title: HTML5: Manually "playing" a video inside a canvas, in IOS Safari
body: <p>So, here's what I'm trying to do:
  I want to load a video into a video element, but not have it played in the "normal" way.
  Using a timed interval, calculated according to the movie's framerate, I want on each iteration to </p>
  
  <p>A. Manually advance the video one 'frame' (or as close as possible to that). <br />
  B. Draw that frame into a canvas.</p>
  
  <p>Thereby having the video "play" inside the canvas.</p>
  
  <p>Here's some code:</p>
  
  <pre><code>&lt;video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"&gt;&lt;/video&gt;
  &lt;canvas width="400" height="224" id="videoCanvas"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var videoDom = document.querySelector("#mainVideo");
  var videoCanvas = document.querySelector("#videoCanvas");
  var videoCtx = null;
  var interval = null;
  
  videoDom.addEventListener('canplay',function() {
     // The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms
     interval = setInterval(function() { doVideoCanvas(); }, 41.66);
  });
  
  videoDom.addEventListener('loadeddata',function() {
    videoCtx = videoCanvas.getContext('2d');
  });
  
  function doVideoCanvas() {
    videoCtx.drawImage(videoDom,0,0);
    //AFAIK and seen, currentTime is in seconds
    videoDom.currentTime += 0.0416;
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This works perfectly in Google Chrome, but it doesn't work in an Iphone's Safari;<br/>
  The video frames <strong>does not get drawn at all</strong> to the canvas.</p>
  
  <p>I made sure that:</p>
  
  <ul>
  <li>The video events I hooked into does get triggered (did 'alerts' and they were shown).</li>
  <li>I have control over the canvas (did a '<code>fillRect</code>' and it filled).</li>
  </ul>
  
  <p>[I also tried specifying dimensions in the drawImage - it didn't help]<br/>
  <strong>Is <code>drawImage</code> with a video object not applicable at all in Iphone Safari...?</strong></p>
  
  <p>Even if I'll manage to find a way to capture the video frames, there are also some other issues in the Iphone's browser:</p>
  
  <ul>
  <li><p>Access to the <code>currentTime</code> property of the video is only granted once the video has started playing (in a standard way). I thought about maybe somehow "playing it hidden" and then capturing, but didn't manage to do that. Also thought of maybe somehow start playing the video and then immediately stop it;<br/>
  There doesn't seem to be any way to forcefully start the playing of a video in the IOS Safari. <code>video.play()</code>, or <code>autoplay</code> doesn't seem to do anything. Only if the user taps the "play circle" on the video then the video starts playing (taking all over the screen, as usually with videos on the IPhone's browser).</p></li>
  <li><p>Once the video plays - the <code>currentTime</code> property <strong>does</strong> get forwarded. On the video itself. When you pause the video and go back to the normal html page - you can see the frames on the video element changing. Though, in a slow phase (unlike in Google Chrome, where the rate seems to be smooth enough to make it look like it's playing) - in the iphone it looks to be a rate of something like 2-3 frames per second maybe. It stays the same even if I try changing the interval timing, I guess there's a minimum time limit that the browser on the IPhone can handle.</p></li>
  </ul>
  
  <p><strong>"Bonus question"</strong> :)
   - When the frames on the video element progresses from the event - the circle "play button" is visible on the video element (since it is not actually 'playing'). Is there anyway to hide it and make it invisible?</p>
  
  <p><em>This has been tested on Iphone 3GS (with both 3G and Wifi) and Iphone 4, both running IOS 5, both having the same results as described.</em></p>