<?xml version="1.0" encoding="UTF-8"?><rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
> <channel><title>Comments on: Html5 video puzzle &#8211; proof of concept</title> <atom:link href="http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/feed/" rel="self" type="application/rss+xml" /><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/</link> <description>Not everyday I get to learn "nothing"</description> <lastBuildDate>Sun, 05 Feb 2012 18:57:00 +0000</lastBuildDate> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.2.1</generator> <item><title>By: Brad</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-643</link> <dc:creator>Brad</dc:creator> <pubDate>Thu, 10 Feb 2011 10:25:00 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-643</guid> <description>Hi,
The problem I am having is the following:
I use a video and a canvas tag and capture a frame from the video tag and place it into the canvas tag, but when I create a reference of the canvas in javascript so that I may return the dataURL it bombs out.
Here is the code I use to place the frame from the video:
_________________________________________________________________
var video = document.getElementById(“video”);
var canvasDraw = document.getElementById(‘imageView’);
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext(’2d’);
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);
_________________________________________________________________
The above works perfectly.
Below is the code to get the dataURL:
_________________________________________________________________
function getURIformcanvas() {
var ImageURItoShow = “”;
var canvasFromVideo = document.getElementById(“imageView”);
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext(“2d”); // Get the context for the canvas.
var ImageURItoShow = canvasFromVideo.toDataURL(“image/png”); //&lt;– It fails on this line.
}
var doc = document.getElementById(&quot;txtUriShow&quot;);
doc.value = ImageURItoShow;
}
_______________________________________________________________
It always fails on the line:
var ImageURItoShow = canvasFromVideo.toDataURL(&quot;image/png&quot;);
Any thought on what might be the problem. If I load a normal image into the canvas it works fine, but as soon as I load the image from video into the canvas that line fails.
Any ideas?</description> <content:encoded><![CDATA[<p>Hi,<br
/> The problem I am having is the following:<br
/> I use a video and a canvas tag and capture a frame from the video tag and place it into the canvas tag, but when I create a reference of the canvas in javascript so that I may return the dataURL it bombs out.<br
/> Here is the code I use to place the frame from the video:<br
/> _________________________________________________________________<br
/> var video = document.getElementById(“video”);</p><p>var canvasDraw = document.getElementById(‘imageView’);<br
/> var w = canvasDraw.width;<br
/> var h = canvasDraw.height;<br
/> var ctxDraw = canvasDraw.getContext(’2d’);</p><p>ctxDraw.clearRect(0, 0, w, h);<br
/> ctxDraw.clearRect(0, 0, w, h);<br
/> ctxDraw.drawImage(video, 0, 0, w, h);<br
/> _________________________________________________________________<br
/> The above works perfectly.<br
/> Below is the code to get the dataURL:<br
/> _________________________________________________________________<br
/> function getURIformcanvas() {<br
/> var ImageURItoShow = “”;<br
/> var canvasFromVideo = document.getElementById(“imageView”);<br
/> if (canvasFromVideo.getContext) {<br
/> var ctx = canvasFromVideo.getContext(“2d”); // Get the context for the canvas.</p><p>var ImageURItoShow = canvasFromVideo.toDataURL(“image/png”); //&lt;– It fails on this line.<br
/> }<br
/> var doc = document.getElementById(&quot;txtUriShow&quot;);<br
/> doc.value = ImageURItoShow;</p><p>}<br
/> _______________________________________________________________<br
/> It always fails on the line:<br
/> var ImageURItoShow = canvasFromVideo.toDataURL(&quot;image/png&quot;);</p><p>Any thought on what might be the problem. If I load a normal image into the canvas it works fine, but as soon as I load the image from video into the canvas that line fails.</p><p>Any ideas?</p> ]]></content:encoded> </item> <item><title>By: Alexander</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-549</link> <dc:creator>Alexander</dc:creator> <pubDate>Thu, 13 Jan 2011 20:11:51 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-549</guid> <description>Thanks. Good step.
In the past, there was &quot;Alive! jigsaw&quot; which turns the images and video files to jigsaw. The freeware v4.12 requires indeo codec and works with any jpg or avi file if you put these files in folder of the program, and then the program will detect them and you can choose any one. later, this game became shareware but you can find the freeware V4.12 from some of websites. I want to play your game offline in html5 web prowser as free open source alternative with more freedom to the user to choose own files. Please, try and put a roadmap for the next editions of the game.</description> <content:encoded><![CDATA[<p>Thanks. Good step.<br
/> In the past, there was &#8220;Alive! jigsaw&#8221; which turns the images and video files to jigsaw. The freeware v4.12 requires indeo codec and works with any jpg or avi file if you put these files in folder of the program, and then the program will detect them and you can choose any one. later, this game became shareware but you can find the freeware V4.12 from some of websites. I want to play your game offline in html5 web prowser as free open source alternative with more freedom to the user to choose own files. Please, try and put a roadmap for the next editions of the game.</p> ]]></content:encoded> </item> <item><title>By: James Griggs</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-525</link> <dc:creator>James Griggs</dc:creator> <pubDate>Fri, 07 Jan 2011 15:32:26 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-525</guid> <description>Thanks Altryne, I would really love to know if it is possible.  Are you available for contract work?</description> <content:encoded><![CDATA[<p>Thanks Altryne, I would really love to know if it is possible.  Are you available for contract work?</p> ]]></content:encoded> </item> <item><title>By: Altryne</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-522</link> <dc:creator>Altryne</dc:creator> <pubDate>Tue, 04 Jan 2011 12:12:20 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-522</guid> <description>unfotumately I havent had time to... Ive tried and failed back when iPad was on 3.2
now that it&#039;s on 4.2 I can try and see if they updated something, and &#039;ll update my blog.</description> <content:encoded><![CDATA[<p>unfotumately I havent had time to&#8230; Ive tried and failed back when iPad was on 3.2</p><p>now that it&#8217;s on 4.2 I can try and see if they updated something, and &#8216;ll update my blog.</p> ]]></content:encoded> </item> <item><title>By: James Griggs</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-518</link> <dc:creator>James Griggs</dc:creator> <pubDate>Mon, 03 Jan 2011 15:01:38 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-518</guid> <description>Hi Altryne,
Were you able to get this to work on the iPad using svg?  Did the iOS 4.2 update make this work for canvas?
Very interested how far you got with this.
Sincerely,
James</description> <content:encoded><![CDATA[<p>Hi Altryne,<br
/> Were you able to get this to work on the iPad using svg?  Did the iOS 4.2 update make this work for canvas?<br
/> Very interested how far you got with this.<br
/> Sincerely,<br
/> James</p> ]]></content:encoded> </item> <item><title>By: Fabio Gasparri</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-214</link> <dc:creator>Fabio Gasparri</dc:creator> <pubDate>Mon, 23 Aug 2010 15:19:57 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-214</guid> <description>Hi Altryne, thanks for you reply. Not sure I get your idea, but I will give it a try. you say to put the video tag inside an svg object, an then get the video frames from the svg object?</description> <content:encoded><![CDATA[<p>Hi Altryne, thanks for you reply. Not sure I get your idea, but I will give it a try. you say to put the video tag inside an svg object, an then get the video frames from the svg object?</p> ]]></content:encoded> </item> <item><title>By: Altryne</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-213</link> <dc:creator>Altryne</dc:creator> <pubDate>Mon, 23 Aug 2010 05:07:35 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-213</guid> <description>Hi Fabio,
Thanx for the comment, I noticed the same thing, video just doesn&#039;t draw i canvas on the ipad whatever I did :(
Too bad because thiw whole puzzle idea was originally for the ipad.
Its a &quot;mobile safari&quot; thing, and there are bugs on this in bagtrack
Anyway, I later stumbled upon svg, and saw somewhere that you can also put video on svg, which the mobile safari supports,
Just need to try and see if that&#039; will work</description> <content:encoded><![CDATA[<p>Hi Fabio,<br
/> Thanx for the comment, I noticed the same thing, video just doesn&#8217;t draw i canvas on the ipad whatever I did <img
src='http://alexw.me/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /><br
/> Too bad because thiw whole puzzle idea was originally for the ipad.<br
/> Its a &#8220;mobile safari&#8221; thing, and there are bugs on this in bagtrack<br
/> Anyway, I later stumbled upon svg, and saw somewhere that you can also put video on svg, which the mobile safari supports,<br
/> Just need to try and see if that&#8217; will work</p> ]]></content:encoded> </item> <item><title>By: Fabio Gasparri</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-212</link> <dc:creator>Fabio Gasparri</dc:creator> <pubDate>Sun, 22 Aug 2010 21:33:30 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-212</guid> <description>Excellent work!
I was playing around some similar ideas, and one of the things I found when doing some tests is that trying to draw a video on a canvas ( canvas.drawImage(video,0,0) ) works perfectly fine in Chrome and Firefox, but unfortunately (and surprisingly), it doesn&#039;t work on my iPad.
Do you have any idea or thoughts on how to solve this?
Thanks!</description> <content:encoded><![CDATA[<p>Excellent work!<br
/> I was playing around some similar ideas, and one of the things I found when doing some tests is that trying to draw a video on a canvas ( canvas.drawImage(video,0,0) ) works perfectly fine in Chrome and Firefox, but unfortunately (and surprisingly), it doesn&#8217;t work on my iPad.<br
/> Do you have any idea or thoughts on how to solve this?<br
/> Thanks!</p> ]]></content:encoded> </item> <item><title>By: Hamid Raza</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-201</link> <dc:creator>Hamid Raza</dc:creator> <pubDate>Fri, 30 Jul 2010 11:30:00 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-201</guid> <description>awesome</description> <content:encoded><![CDATA[<p>awesome</p> ]]></content:encoded> </item> <item><title>By: Alex Wolkov Makes a HTML5 Video Jigsaw Puzzle &#171; Awesome But Useless</title><link>http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/comment-page-1/#comment-149</link> <dc:creator>Alex Wolkov Makes a HTML5 Video Jigsaw Puzzle &#171; Awesome But Useless</dc:creator> <pubDate>Sun, 06 Jun 2010 06:36:10 +0000</pubDate> <guid
isPermaLink="false">http://alexw.me/?p=210#comment-149</guid> <description>[...] contacted me (at coolshit@awesomebutuseless.com &#8211; send me links!) about his latest experiment into the exciting world of HTML5 video and canvas: a video jigsaw puzzle.  Tags: Alex Wolkov, canvas, HTML5, jQuery, [...]</description> <content:encoded><![CDATA[<p>[...] contacted me (at <a
href="mailto:coolshit@awesomebutuseless.com">coolshit@awesomebutuseless.com</a> &#8211; send me links!) about his latest experiment into the exciting world of HTML5 video and canvas: a video jigsaw puzzle.  Tags: Alex Wolkov, canvas, HTML5, jQuery, [...]</p> ]]></content:encoded> </item> </channel> </rss>
