HTML5:在IOS Safari中手动"播放"画布内的视频

Question

所以,这就是我要做的事情:我想将视频加载到视频元素中,但不要以"正常"方式播放.使用根据电影的帧速率计算的定时间隔,我想在每次迭代时使用

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>

这在Google Chrome中完美运行,但在Iphone的Safari中不起作用;
视频帧根本不会绘制到画布上.

我确信:

• 我连接的视频事件确实被触发了(确实是'警告'并且显示了它们).
• 我控制了画布(做了' fillRect'并填充了它).

[我也尝试在drawImage中指定尺寸 - 它没有帮助]
是否drawImage在Iphone Safari中视频对象根本不适用...？

即使我设法找到捕获视频帧的方法,Iphone的浏览器中也存在一些其他问题:

• currentTime只有在视频开始播放后(以标准方式)才能访问视频的属性.我想也许以某种方式"玩它隐藏"然后捕捉,但没有设法做到这一点.也想到可能以某种方式开始播放视频然后立即停止它;
  似乎没有办法在IOS Safari中强行开始播放视频.video.play(),或autoplay似乎没有做任何事情.只有当用户点击视频上的"播放圈子"时,视频才会开始播放(占据整个屏幕,通常与iPhone浏览器上的视频一样).

• 一旦视频播放-该currentTime财产不被转发.在视频本身.当您暂停视频并返回正常的html页面时 - 您可以看到视频元素上的帧发生变化.虽然,在一个缓慢的阶段(不像谷歌Chrome,速率似乎足够平滑,使它看起来像它正在播放) - 在iPhone中,它看起来像是每秒2-3帧的速率.即使我尝试更改间隔时间,它仍然保持不变,我想iPhone上的浏览器可以处理的最小时间限制.

"奖金问题" :) - 当视频元素上的帧从事件进展时 - 视频元素上可以看到圆圈"播放按钮"(因为它实际上并非'正在播放').反正有没有隐藏它并让它隐形？

这已经在Iphone 3GS(同时具有3G和Wifi)和Iphone 4(均运行IOS 5)上进行了测试,两者都具有与所描述的相同的结果.

Answer 1

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

1. 创建一个不带控件的视频元素（省略controls属性）
2. 隐藏元素
3. 当视频播放时，每隔一段时间将其绘制到画布上

正如您所发现的，iOS 设备不支持 HTML5 视频（甚至音频）的自动播放，但您可以创建一个单独的控件来使用该play()方法启动视频播放。

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