问HTML5:在IOS中，在画布中手动“播放”视频

EN

所以，我想做的是:我想把一个视频加载到一个视频元素中，但不是以“正常”的方式播放。使用一个时间间隔，根据电影的框架计算，我希望在每次迭代中

手动推进视频一帧(或尽可能接近)。

把那个框架画成画布。

从而使视频“播放”在画布内。

下面是一些代码：

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video>
<canvas width="400" height="224" id="videoCanvas"></canvas>

<script type="text/javascript">

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;
}

</script>

这在Google中非常有效，但在Iphone的Safari中却不起作用；

视频帧完全不被绘制到画布上。

我确保：

• 我连接到的视频事件确实会被触发(做了“警报”并显示出来)。
• 我控制着画布(做了一个'fillRect‘，它被填充了)。

我还试着在drawImage中指定维度--这没有帮助

带视频对象的drawImage 在Iphone .？中根本不适用

即使我能找到一种捕获视频帧的方法，Iphone浏览器中还有其他一些问题：

• 只有在视频开始播放(以标准方式)时，才授予对视频的currentTime属性的访问权限。我想也许是“玩隐藏的”然后捕捉，但我没有做到这一点。也想过也许可以开始播放视频，然后立即停止播放； 在IOS Safari中，似乎没有任何方法可以强行开始播放视频。video.play()，或autoplay似乎什么也不做。只有当用户点击视频上的“播放圈”时，视频才会开始播放(就像IPhone浏览器上的视频一样，屏幕上到处都是视频)。
• 一旦视频播放- currentTime属性确实被转发。在视频上。当您暂停视频并返回到普通的html页面时，您可以看到视频元素上的帧正在发生变化。不过，在一个缓慢的阶段(与谷歌Chrome不同，Chrome的速度看起来足以让它看起来像是在播放)--在iphone中，它看起来可能是每秒2-3帧的速度。即使我尝试更改间隔时间，它也保持不变，我想IPhone上的浏览器可以处理的时间限制是最小的。

“奖励问题” :) -当视频元素上的帧从事件中进展时，圆圈"play按钮“在视频元素上是可见的(因为它实际上不是‘play’)。有什么办法把它藏起来让它隐形吗？

这已经在iPhone3GS( 3G和Wifi)和Iphone 4上进行了测试，它们都运行IOS 5，结果与描述相同。