6

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

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 页面时 - 您可以看到视频元素上的帧发生变化。虽然，在一个缓慢的阶段（不像谷歌浏览器，它的速度似乎足够平滑，让它看起来像是在播放）——在 iphone 中它看起来可能是每秒 2-3 帧的速度。即使我尝试更改间隔时间，它也保持不变，我想 iPhone 上的浏览​​器可以处理的最小时间限制。

“奖金问题” :) - 当视频元素上的帧从事件中进行时 - 圆形“播放按钮”在视频元素上可见（因为它实际上不是“播放”）。反正有没有隐藏它并使其不可见？

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

4

2 回答 2

1

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

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

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

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

于 2012-05-30T09:57:43.097 回答
0

我不相信loadeddata在 iOS 上调用了该事件，loadedmetadata而是尝试该事件。我还发现有必要在 iOS 上videoDom.load()设置后调用该方法videoDom.src。

对于我的用例，我需要在seeked事件之后执行“dRAF”（双重 requestAnimationFrame），以确保实际绘制到画布而不是透明矩形。

尝试类似：

videoDom.onloadedmetadata = () => {
  videoCanvas.height = videoDom.videoHeight
  videoCanvas.width = videoDom.videoWidth
  videoDom.currentTime = 0
}

videoDom.onseeked = () => {
  // delay the drawImage call, otherwise we get an empty videoCanvas on iOS
  // see https://stackoverflow.com/questions/44145740/how-does-double-requestanimationframe-work
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      videoCanvas.getContext('2d').drawImage(videoDom, 0, 0, videoCanvas.width, videoCanvas.height)
      videoDom.currentTime += 0.0416
    })
  })
}

videoDom.load()

从这个要点

于 2020-05-27T05:15:42.403 回答