javascript - IOS Safari 中的 HTML5 : Manually "playing" a video inside a canvas,

Question

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

一个。手动将视频推进一个“帧”(或尽可能接近该帧)。
B. 将该框架绘制到 Canvas 中。

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

这是一些代码:

<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 中不起作用；
视频帧根本不会绘制到 Canvas 。

我确定:

• 我 Hook 的视频事件确实被触发了(“警报”并被显示)。
• 我可以控制 Canvas (执行“fillRect”并填充它)。

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

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

• 只有在视频开始播放(以标准方式)后，才能访问视频的 currentTime 属性。我想过也许以某种方式“隐藏播放”然后捕获，但没有设法做到这一点。也想到了也许以某种方式开始播放视频然后立即停止；
  IOS Safari 中似乎没有任何方法可以强制开始播放视频。 video.play() 或 autoplay 似乎没有任何作用。只有当用户点击视频上的“播放圈”时，视频才会开始播放(播放整个屏幕，通常在 iPhone 浏览器上播放视频)。

• 视频播放后 - currentTime 属性确实被转发。在视频本身。当您暂停视频并返回正常的 html 页面时 - 您可以看到视频元素上的帧发生变化。不过，在一个缓慢的阶段(不像在谷歌浏览器中，速度似乎足够平滑，让它看起来像是在播放)——在 iPhone 中，它看起来可能是每秒 2-3 帧的速度。即使我尝试更改间隔时间，它也保持不变，我猜 iPhone 上的浏览​​器可以处理的最小时间限制。

“奖金问题” :) - 当视频元素上的帧从事件开始时 - 圆圈“播放按钮”在视频元素上可见(因为它实际上并未“播放”)。无论如何隐藏它并使其不可见？

这已经在运行 IOS 5 的 Iphone 3GS(同时具有 3G 和 Wifi)和 Iphone 4 上进行了测试，结果与描述的相同。

Answer 1

不幸的是，我没有 iOS 设备来对此进行测试，但我认为您不需要像尝试使用 currentTime 属性那样实际捕获视频帧。通常的过程看起来像这样:

1. 创建一个没有控件的视频元素(省略 controls 属性)
2. 隐藏元素
3. 播放视频时，每隔一段时间将其绘制到 Canvas 上

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

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