用canvas实现视频播放与弹幕功能

写在最前

本次分享一下使用canvas来进行视频播放并且添加弹幕功能。

欢迎关注我的博客，不定期更新中——

效果图

示例源码见：源码地址

可以看到上方为一段视频，下面是用canvas来重新绘制的视频，并且支持动态的添加弹幕。

canvas载入视频

canvas中的drawImage方法绘制图片所需要的数据源不单单是某张图片，同样可以是使用视频的某一帧来进行绘制。就像这样：

var video = document.getElementById('video')
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ctx.drawImage(video, 0, 0, width, height);//当视频开始播放后触发这个方法可以开始绘制视频

为什么通过canvas绘制视频？

因为canvas提供了getImageData && putImageData方法使得操作者可以动态得来更改每一帧图像的显示状态，如果你知道它应该怎么变：）

比如像MDN中提到的可以对上面这段视频中的黄色背景进行色调的变化：mdn示例地址

this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx