-1

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

下一个代码不起作用：

var canvas, context;
var video = document.getElementById("video");

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("click", mouseClick);


function mouseClick(e) {
  video.src = "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4";
  video.addEventListener('loadeddata', function() {
    video.play();
    draw();
  });
}

function draw() {
		context.drawImage(video, 0, 0, 500, 300);
    setTimeout(draw, 50);
}
<canvas id="canvas" width="500" height="300"></canvas>
<video id="video" width="500" height="300">
</video>

请指教我做错了什么。

图像序列的大小太大。

4

1 回答 1

0

我在这里试用了您的代码：https ://github.com/poshaughnessy/video-to-canvas-test

此处演示：https ://poshaughnessy.github.io/video-to-canvas-test/

但我无法复制 Samsung Internet v7.2 的问题。（经过短暂的加载延迟后）它对我来说可以正常播放并且也可以渲染到画布上......

“图像序列的大小太大。”

您的意思是视频在画布中的缩放比例不正确？如果是这样，您是否尝试过调整画布大小和传递给该drawImage方法的尺寸？（目前您正在以 500 像素宽度 x 300 像素高度绘制它，但视频的纵横比为 16:9）。

注意。出于性能原因，我建议使用requestAnimationFrame而不是硬编码 50 毫秒的时间延迟：https ://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

于 2018-07-26T14:40:10.107 回答