HTML5：手动“打”画布里面的视频，在IOS的Safari

所以，这里是我想要做的事：我想加载视频到视频元素，但又不希望它在“正常发挥“ 办法。使用按照电影的帧率计算的定时间隔，我希望在每次迭代中都可以使用HTML5：手动“打”画布里面的视频，在IOS的Safari

A.手动将视频提前一帧（或尽可能接近该帧）。
B.将该帧绘制到画布上。

从而具有视频“玩”画布里面。

下面是一些代码：

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

这工作完全在谷歌浏览器，但它并没有在iPhone的Safari工作;
视频帧没有得到根本在画布上绘制。

我确信：

我勾搭成不被触发视频事件（做“警报”，他们被证明）。
我有在画布上控制（做了一个“fillRect”，它填补）。

[我也试过在指定的drawImage尺寸 - 这并没有帮助]
是drawImage与视频对象并不适用于所有的iPhone Safari浏览器...？

即使我会设法找到一种方法来捕捉视频帧，也有在iPhone的浏览器的一些其他问题：

到视频的currentTime属性访问仅授予一旦视频开始播放（以标准方式）。我想也许以某种方式“隐藏起来”，然后捕捉，但没有设法做到这一点。也想到可能以某种方式开始播放视频，然后立即停止播放;
似乎有不被任何方式强行启动的IOS Safari浏览器的视频的播放。 video.play()或autoplay似乎没有做任何事情。只有当用户点击视频上的“播放圈”时，视频才会开始播放（通常在iPhone的浏览器上播放视频）。
一旦视频播放 - currentTime属性确实得到转发。在视频本身。当您暂停视频并返回到正常的html页面时 - 您可以看到视频元素上的帧发生变化。虽然，在一个缓慢的阶段（不像谷歌浏览器，在速度似乎不够顺畅，使它看起来像它的播放） - 它看起来是像每秒2-3帧也许率的iphone。即使我尝试更改间隔时间，它仍然保持不变，我猜iPhone上的浏览器可以处理的最小时间限制。

“奖金问题” :) - 当视频元素的帧从事件的进展 - 圆“播放按钮”是可见的视频元素的（因为它实际上不是“玩” ）。无论如何要隐藏它并使之看不见？

这已经在Iphone 3GS（同时使用3G和Wifi）和Iphone 4上测试，两者均运行IOS 5，两者的结果都与上述相同。

来源

2012-05-30 Yuval A.

不幸的是，我没有iOS设备来测试这个，但我不认为你需要以你试图使用currentTime属性的方式实际捕获视频帧。通常的过程看起来是这样的：

创建一个视频元素，不受管制（省略controls属性）
隐藏元素
当播放视频时它画到画布上的间隔

正如您发现的那样，iOS设备不支持在HTML5视频（或者确实是音频）上自动播放，但您可以创建一个单独的控件以使用play()方法启动视频播放。

这种方法应该可以解决您使用播放按钮的问题，因为在这种情况下您实际上正在播放视频。

来源

2012-05-30 09:57:43

感谢您的回复和提示！我遇到以下文档：http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html 其中有一行声明：“注意：视频作为画布drawImage（）方法的来源目前在iOS上不受支持。“ ：\ 但另一种选择是将视频转换为图像序列 - 并将其用于画布上！ –

很好找Yuval，知道这真的很有用。您应该添加这是您的问题的答案并接受它。 –

类似的功能目前似乎在Android Chrome和Android Browser中也不足。 – Falcon

HTML5：手动“打”画布里面的视频，在IOS的Safari

回答

相关问题