在iPad上将HTML5视频绘制在画布上

Question

我正在画一个视频到画布上，Safari/Chrome/Firefox/Opera等浏览器都能正常工作，但是在iPad上，尽管视频播放了（使用正确的编解码器），它从未被呈现在画布上。

基本上我只是调用：

canvas.getContext("2d").drawImage(video, 0, 0);

当视频正在播放时执行此操作，并在视频暂停或结束时停止执行。

还有什么其他需要考虑的吗？例如清除画布吗？

- just_a_dude

---

我刚刚在我的iPhone上尝试了苹果自己的HTML5演示，当我尝试播放视频时，结果是它在自己的全屏应用程序中打开，而不是在浏览器中。不确定Safari移动版是否支持内联视频。 - GordonM

@Stacker-flow，您能否确认一下 这个 jsfiddle 在您的系统上是否无法工作？ - Kaiido

我不知道iPad，但是这个解决方案适用于运行iOS 13.4.1的iPhone 6S：https://gist.github.com/diachedelic/cf758562ad6fdf7db79f474f5528dec0 - diachedelic

Answer 1

目前iPad上的Safari浏览器不支持此功能。在HTML5的canvas标签和video标签的属性和事件方面，尤其是在iPad上存在一些限制。在桌面浏览器中可以正常工作的canvas和video标签的属性和事件在iPad上无法正常工作。这也是我的个人经验。

- Raki

Answer 2

请查看将视频放在画布上。

基本上，您无法将视频对象传递给画布的drawImage方法。苹果建议将视频放置在画布后面，但如果您想以某种方式操作视频，则这并没有帮助。

- Matt27

Answer 3

你尝试过将它包裹在requestAnimationFrame()函数中吗？

<video src="YourSrcFile.webm" autolay muted></video>
         // Fallback to mp4 if not supported.
<canvas></canvas>

    const video = document.querySelector("video");      // Offscreen Canvas.
    const canvas = document.querySelector("canvas");    // Onscreen Canvas.

          canvas.style.zIndex = '50';
    const ctx = canvas.getContext("2d");

    video.addEventListener('play',()=>{
      function step() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
        requestAnimationFrame(step)
      }
      requestAnimationFrame(step);
    })

确保将屏幕上和屏幕外的画布与原始视频的纵横比匹配，否则额外的计算会使其变得卡顿且性能差。您可以在 CSS 中使用 Transform Scale 来调整大小，只要它成比例即可。这似乎不会导致故障，但我建议将视频从 mp4、avi 或其他文件类型转换为 webm。

我刚用这个做了一个 VJ 循环，运行很流畅。

尝试一下这些方法，看看是否有所改善。

- Ryan Stone

Answer 4

<script>
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth / 100);
    var ch = Math.floor(canvas.clientHeight / 100);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}
</script>

- konakzizu

---

你能否添加一些解释呢？谢谢。 - Werner Henze