前端video如何转化为canvas

最新推荐文章于 2024-07-15 20:58:58 发布

原创最新推荐文章于 2024-07-15 20:58:58 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#video #canvas #video转canvas

JavaScript 同时被 2 个专栏收录

84 篇文章

订阅专栏

javascript入门到进阶

71 篇文章

订阅专栏

本文介绍了如何利用HTML5的2D渲染引擎Pixi.js将视频内容渲染到Canvas上，以此实现视频在Canvas中播放并伴有声音。虽然这种方法无法改善低端设备的视频播放问题，但可以作为反盗链的一种手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

由于用的公司的电脑, 不太方便录制, 不过亲测是好使的. (之后会补上的)

简介

本次使用的框架为国外比较出名的HTML5 2D渲染引擎, http://www.pixijs.com/
本篇开发基于https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js
其框架的4.7.1版本进行开发. 实现的效果: dom节点只有canvas, 视频在canvas播放, 有声音.

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
  <script>

    var app = new PIXI.Application(375, 667, { transparent: true });
    document.body.appendChild(app.view); // 创建canvas画布场景

var button = new PIXI.Graphics()
    .beginFill(0x0, 0.5)
    .drawRoundedRect(0, 0, 100, 100, 10)
    .endFill()
    .beginFill(0xffffff)
    .moveTo(36, 30)
    .lineTo(36, 70)
    .lineTo(70, 50);
// 这里为什么要用一个button呢, 在移动端就不用说了, video是没法自动播放的. chrome66以上也做了限制, 当用户没有对当前页面做出任何操作的时候触发video的play函数是会报错的, chrome官方解释为怕给用户带来烦恼, 因此这里需要用button触发一下
// 这里的button是根据pixi的Graphics画出来的, 可以在上面绑定事件

button.x = (app.screen.width - button.width) / 2;
button.y = (app.screen.height - button.height) / 2;

button.interactive = true;
button.buttonMode = true;

app.stage.addChild(button);

button.on('pointertap', onPlayVideo);

function onPlayVideo() {

    button.destroy();

    var texture = PIXI.Texture.fromVideo('找不到可以用的视频url, 你自己搞一个看看, 本地文件也可以');

    var video = texture.baseTexture.source; // 这就是video的dom对象
    video.loop = 'loop'

    var videoSprite = new PIXI.Sprite(texture);
    videoSprite.width = app.screen.width;
    videoSprite.height = app.screen.height;

    app.stage.addChild(videoSprite);
}


  </script>
</body>
</html>

原理

原生js实现上面功能

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>
</head>
<body>

  <video id="video" controls loop width='400' height='600' autoplay webkit-playsinline="true" src='你的本地视频或者好使的url'></video>

<script>
  var VideoToCanvas = (function(window, document) {
    function VideoToCanvas(videoElement) {
      if(!videoElement) {return;}

      var canvas = document.createElement('canvas');
      canvas.width = videoElement.offsetWidth;
      canvas.height = videoElement.offsetHeight;
      ctx = canvas.getContext('2d');

      var newVideo = videoElement.cloneNode(false);

      var timer = null;

      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

      var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

      function drawCanvas() {
        ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
        timer = requestAnimationFrame(drawCanvas);
      }

      function stopDrawing() {
        cancelAnimationFrame(timer);
      }

      newVideo.addEventListener('play', function() {
        drawCanvas();
      },false);
      newVideo.addEventListener('pause', stopDrawing, false);
      newVideo.addEventListener('ended', stopDrawing, false);

      videoElement.parentNode.replaceChild(canvas, video);

      this.play = function() {
        newVideo.play();
      };

      this.pause = function() {
        newVideo.pause();
      };

      this.playPause = function() {
        if(newVideo.paused) {
          this.play();
        } else {
          this.pause();
        }
      };

      this.change = function(src) {
        if(!src) {return;}
        newVideo.src = src;
      };

      this.drawFrame = drawCanvas;
    }

    return VideoToCanvas;
  })(window, document);


  var video = document.getElementById('video');
  var canvas = new VideoToCanvas(video);

  window.setTimeout(() => {
    canvas.pause()
  }, 2000); // 2秒后暂停

</script>

</body>
</html>