Question

我在画布上绘制视频，这适用于Safari / Chrome / Firefox / Opera，但在iPad上，即使播放视频（正确的编解码器等），它也永远不会在画布上呈现，

基本上我只是打电话：

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

播放视频时

，视频暂停或结束时停止播放。

还有什么我应该考虑的吗？喜欢清除画布吗？

Answer 1

目前在iPad上的safari不支持此功能。 HTML5的canvas标签和视频标签的属性和事件有一些限制，特别是在iPad上。在桌面浏览器上正常工作的画布和视频标签的属性和事件不适用于iPad。这也是我个人的经历。

Answer 2

请参阅Putting Video on Canvas

您基本上无法将视频对象传递给canvas drawImage方法。 Apple建议将视频放在画布后面，但如果您想以某种方式操纵视频，这将无济于事。

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内使用“变换比例”来调整它的大小，只要它成比例即可。似乎没有什么问题，但我建议将视频从mp4，avi或其他文件类型转换为webm。

仅将其用于vjloop及其运行平稳。

尝试这些，看看有什么区别。

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>

在画布上绘制html5视频 - 在iPad上

4 个答案: