Question

是否可以添加一个会反复循环到HTML5 Canvas的背景视频？这是我到目前为止所做的工作只是想添加一个将播放到后台的简单视频。我可以使用视频标记向HTML添加视频，但希望它在画布上播放。

<canvas id="ex1" width="525" height="200" style="border: 5px solid black;" ></canvas>

<p id="text"> Increase/Decrease Speed</p>
<input type="button" value="+" id="btnAdd">
<input type="button" value="-" id="btnSub">

<script>
var x = 0;
var y = 15;
var speed = 10;
var isRight = true;

document.getElementById('text').innerText = speed;

document.getElementById('btnAdd').addEventListener('click', function (event) {

    if (isRight) speed++;
    else speed--;
    document.getElementById('text').innerText = speed;

    });

document.getElementById('btnSub').addEventListener('click', function (event) {
    if (isRight) speed--;
    else speed++;
    document.getElementById('text').innerText = speed;

    });

function animate() {

    reqAnimFrame = window.mozRequestAnimationFrame ||   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;

    reqAnimFrame(animate);

    x += speed;

    if (x <= 0 || x >= 475) {
        speed = -speed;

        isRight = !isRight;
    }
    document.getElementById('text').innerText = speed;

    draw();
  }

 function draw() {
    var canvas = document.getElementById("ex1");
    var context = canvas.getContext("2d");

    context.clearRect(0, 0, 525, 200);
    context.fillStyle = "#ff00ff";
    context.fillRect(x, y, 40, 40);
  }

animate();
  </script>

Answer 1

当前在视频元素中运行的帧可以复制到画布。使用setInterval我们必须定期对视频元素进行采样并将其复制到画布。它可以用来做有趣的事情。

来自Mozilla drawImage

第一个参数可以是绘制到上下文中的任何元素;规范允许任何图像元素（即＆lt; img＆gt;，＆lt; canvas＆gt;和＆lt; video＆gt;）。

这是锅炉电镀代码示例 -

var videoElement, canvasContext;

videoElement.addEventListener('play', function(){
    copyCurrentFrameIntoCanvas(this);
    setInterval(copyCurrentFrameIntoCanvas,10,this);
},false);

function copyCurrentFrameIntoCanvas(videoElement) {
    canvasContent.drawImage(videoElement,0,0,<width>,<height>);
}

你需要适当地初始化videoElement和canvasContent，我认为你已经知道了。也替换＆lt; width＆gt;和＆lt; height＆gt;适当的占位符。

Answer 2

您可以创建一个离屏视频元素，这样您就不必处理CSS或导致额外的回流。要创建离屏视频元素很简单：

/// element
var video = document.createElement('video');

/// set video elemet size
video.width = 640;
video.height = 360;

/// setup with auto preload and loop
video.preload = 'auto';
video.loop = true;

现在您可以附加一个事件处理程序，以便在视频准备好播放时开始绘图：

video.addEventListener('canplay', start, false);

现在设置视频源。您需要使用video.canPlayType('<mime-type-here>')方法检查浏览器可以播放的类型，但为了简单起见，我们直接设置了源：

video.src = 'link/to/video.ogv';

在处理程序中，我们现在可以更新视频。当requestAnimationFrame尝试每秒更新60次时，我们可以将其减少一半，因为视频很少超过30 FPS（美国，欧洲25）：

function start() {

    /// get context from canvas (canvas not shown in example)        
    var ctx = canvas.getContext('2d'),
        toggle = true;                  /// this is used to reduce FPS

    /// start video
    video.play();

    /// start loop
    requestAnimationFrame(loop);

    function loop() {

        /// reduce frame-rate to half
        toggle = !toggle;    

        if (toggle) {
            requestAnimationFrame(loop);
            return;
        }

        /// draw video frame
        ctx.draw(video, 0, 0);

        requestAnimationFrame(loop);
    }
}

免责声明：未经测试但您会看到主要步骤。代码应该创建视频元素并在它准备好时自动启动它。然后它将在一个循环中运行并每30 FPS（或左右）将视频帧绘制到画布。

注意：Safari浏览器不支持在iOS中使用视频元素drawImage（目前正在撰写此答案）。

将视频添加到Javascript Canvas

2 个答案: