【记录】如何在Vue中使用Cavas渲染播放视频

刚刚看完Canvas，想试试在vue中用canvas来播放视频

先在data中定义三个变量用来储存

	 // 播放器元素
      videoE: '',
      // canvas元素
      canvasE: '',
      // canvas上下文
      ctx: '',

然后在methods中定义三个方法

    // 先获取元素
    doLoad () {
      // 这里是视频元素我不希望用户看见，所以只生成不插入
      let video = document.createElement('video')
      // 指定这个视频的地址 (本地视频使用require导入)
      video.src = require('../assets/video/bgVideo.mp4')

      video.autoplay = true
      // 获取canvas元素
      this.canvasE = document.getElementById('c1');
      // 获取上下文
      this.ctx = this.canvasE.getContext('2d');
      // 保存video元素
      this.video = video

      // 给视频元素添加播放监听
      video.addEventListener('play', () => {
        this.timerCallback(this.video.videoWidth / 2, this.video.videoHeight / 2);
      }, false);
    },
    
  	// 用来判断视频是否被暂停或者结束
    timerCallback (width, height) {
      // 如果视频暂停或者结束就停止
      if (this.video.paused || this.video.ended) {
        return;
      }
      // 否则就就获取视频内容
      this.computeFrame(width, height);
      //重复
      setTimeout(() => {
        this.timerCallback(width, height);
      }, 0);
    },
    
    //画图
 	 computeFrame (width, height) {
      this.ctx.drawImage(this.video, 0, 0, width, height);
      let frame = this.ctx.getImageData(0, 0, width, height);
      let l = frame.data.length / 4;
      for (let i = 0; i < l; i++) {
        let r = frame.data[i * 4 + 0];
        let g = frame.data[i * 4 + 1];
        let b = frame.data[i * 4 + 2];
        if (g > 100 && r > 100 && b < 43)
          frame.data[i * 4 + 3] = 0;
      }
      return;
    }

最后只需要在mounted生命周期中调用即可

this.doLoad()

效果：

完整代码：

<template>
  <div class="Writing">
    <div class="writing_top">

      <div>
        <canvas id="c1"
                width="500"
                height="300"
                style='border:1px solid pink' />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 播放器元素
      video: '',
      // canvas元素
      canvasE: '',
      // canvas上下文
      ctx: '',
    }
  },
  methods: {
    // 先获取元素
    doLoad () {
      // 这里是视频元素我不希望用户看见，所以只生成不插入
      let video = document.createElement('video')
      // 指定这个视频的地址 (本地视频使用require导入)
      video.src = require('../assets/video/bgVideo.mp4')

      video.autoplay = true
      // 获取canvas元素
      this.canvasE = document.getElementById('c1');
      // 获取上下文
      this.ctx = this.canvasE.getContext('2d');
      // 保存video元素
      this.video = video

      // 给视频元素添加播放监听
      video.addEventListener('play', () => {
        this.timerCallback(this.video.videoWidth / 2, this.video.videoHeight / 2);
      }, false);


    },

    // 用来判断视频是否被暂停或者结束
    timerCallback (width, height) {
      // 如果视频暂停或者结束就停止
      if (this.video.paused || this.video.ended) {
        return;
      }
      // 否则就就获取视频内容
      this.computeFrame(width, height);
      setTimeout(() => {
        this.timerCallback(width, height);
      }, 0);
    },

    computeFrame (width, height) {
      this.ctx.drawImage(this.video, 0, 0, width, height);
      let frame = this.ctx.getImageData(0, 0, width, height);
      let l = frame.data.length / 4;
      for (let i = 0; i < l; i++) {
        let r = frame.data[i * 4 + 0];
        let g = frame.data[i * 4 + 1];
        let b = frame.data[i * 4 + 2];
        if (g > 100 && r > 100 && b < 43)
          frame.data[i * 4 + 3] = 0;
      }
      return;
    }

  },
  mounted () {
    this.doLoad()
  },
}

如果有错误欢迎在评论指正
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas