[canvas] canvas 绘制视频内容

Question

[canvas] canvas 绘制视频内容

Opened this issue 5 years ago · 1 comments

Answer 1 · 2020-06-19T08:01:11.000Z

<!DOCTYPE html>
<html>

<body>

  <p>要使用的视频：</p>
  <video id="video1" controls width="270" autoplay loop muted style="visibility:hidden;height:0">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
  </video>

  <p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>

  <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>

  <script>
    var v = document.getElementById("video1");
    var c = document.getElementById("myCanvas");
    ctx = c.getContext('2d');
    var i = null
    window.setInterval(function () {
        ctx.drawImage(v, 0, 0, 270, 135)
      }, 20);
    // v.addEventListener('play', function () {
    //   i = window.setInterval(function () {
    //     ctx.drawImage(v, 0, 0, 270, 135)
    //   }, 20);
    // }, false);
    v.addEventListener('pause', function () {
      window.clearInterval(i);
    }, false);
    v.addEventListener('ended', function () {
      clearInterval(i);
    }, false);
  </script>

</body>

</html>