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

【问题标题】：drawing html5 video on a canvas - on iPad在画布上绘制 html5 视频 - 在 iPad 上
【发布时间】：2011-09-26 14:09:12
【问题描述】：

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

基本上我只是打电话：

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

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

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

【问题讨论】：

嗯，我刚刚在我的 iPhone 上尝试了 Apple 自己的 HTML5 演示，当我尝试播放视频时，结果是它在自己的全屏应用程序中而不是在浏览器中打开。不完全确定移动版 Safari 是否支持内嵌视频。
@Stacker-flow 你能确认this fiddle 在你的系统上不起作用吗？
我不了解 iPad，但此解决方案适用于运行 iOS 13.4.1 的 iPhone 6S：gist.github.com/diachedelic/cf758562ad6fdf7db79f474f5528dec0

标签： javascript ios html video canvas

【解决方案1】：

<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>

【讨论】：

你能补充解释吗！？谢谢。

【解决方案2】：

您是否尝试过将其包装在 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..

只是将它用于 vjloop 并且运行流畅。

试试这些，看看有什么不同..

【讨论】：

【解决方案3】：

见Putting Video on Canvas

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

【讨论】：

【解决方案4】：

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

【讨论】：