Canvas 画布视频浏览器

我正在寻找一种在UC浏览器（手机）和三星互联网浏览器中的canvas/webgl元素中播放视频的方法。我的帆布游戏需要它

下一个代码不起作用：

var画布，上下文；
var video=document.getElementById（“视频”）；
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
canvas.addEventListener（“单击”，鼠标单击）；
功能鼠标单击（e）{
video.src=”https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4";
video.addEventListener（'loadeddata'，function（）{
video.play（）；
draw（）；
});
}
函数绘图（）{
drawImage（视频，0，0，500，300）；
设置超时（抽签，50）；
}

---

我在这里试用了您的代码：

此处演示：

但我无法复制三星互联网v7.2的问题。（在短暂的加载延迟后）它对我来说是正常的，并且也会渲染到画布上

“图像序列太大。”

你的意思是视频在画布中缩放不正确吗？如果是，您是否尝试过调整画布大小和传递给

drawImage

方法的尺寸？（目前您正在以500px的宽度和300px的高度绘制，但视频的纵横比为16:9）

---

注意。出于性能原因，我建议使用

requestAnimationFrame

而不是硬编码50ms延时：

没有尝试，但移动浏览器通常不会预加载视频中的任何内容。因此，您的已加载元数据可能永远不会触发。您可能希望将您的

video.play（）

移出此事件处理程序（但仍在单击事件处理程序中）。忘记提及声音播放，但画布中的视频是blackDemo在我的Samsung Internet v 7.2中仍然不起作用。。。图像序列是指将视频导出为jpeg序列。是否要创建一系列jpeg图像？您上面发布的代码不包含任何这样做的内容-它只是将视频绘制到画布上。