Question

我正在寻找一种在UC浏览器（移动版）和Samsung Internet浏览器的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>

请告知我在做什么错。

图像序列太大。

Answer 1

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

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

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

“图像序列太大。”

您是说视频在画布上的缩放比例不正确吗？如果是这样，您是否尝试过调整画布大小和传递给drawImage方法的尺寸？（当前您以500px宽x 300px的高度绘制它，但是视频的宽高比为16：9）。

NB。出于性能方面的考虑，我建议您使用requestAnimationFrame而不是对50ms时间延迟进行硬编码：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

画布视频UC浏览器

1 个答案: