本次分享一下使用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.ctx1.getImageData(0, 0, this.width, this.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; //将视频黄色部分的透明度进行了变化    }    this.ctx2.putImageData(frame, 0, 0);

视频中效果截图如下：

更多关于canvas的图像操作可以参考下面这两篇文章：

• 基于canvas实现波浪式绘制图片
• 基于canvas实现的一个截图小demo
  

基于canvas的图像处理可以实现很强大的功能，比如滤镜啊之类的~

腾讯的Aolly Team团队出品的AlloyImage - 基于HTML5技术的专业图像处理库就是个很好的范例。作者就搞不明白那些高深的东西了，什么拉普拉斯算子，各种算子：）

弹幕功能

弹幕功能分为两部分：

• 监听新弹幕的推送
• 渲染弹幕到页面
  

监听新弹幕的推送

通过维护一个弹幕数组来实时去渲染每一个弹幕字条的应有位置。而何时更新这个数组，为了解耦作者使用了发布订阅的方式来进行数组的更新。当然这里并不是一定要使用这种模式，只不过作者刚刚学习完所以拿来用一下而已。千万别喷我：）

[JavaScript] 纯文本查看 复制代码

var Event = (function(){    var list = {},        listen,        trigger,        remove;        listen = function(key,fn){ /收集监听事件            if(!list[key]) {                list[key] = [];            }            list[key].push(fn);        };        trigger = function(){/触发后依次执行回调            var key = Array.prototype.shift.call(arguments),                 fns = list[key];            if(!fns || fns.length === 0) {                return false;            }            for(var i = 0, fn; fn = fns[i++];) {                fn.apply(this,arguments);            }        };        remove = function(key,fn){            var fns = list[key];            if(!fns) {                return false;            }            if(!fn) {                fns && (fns.length = 0);            }else {                for(var i = fns.length - 1; i >= 0; i--){                    var _fn = fns;                    if(_fn === fn) {                        fns.splice(i,1);                    }                }            }        };        return {            listen: listen,            trigger: trigger,            remove: remove        }})();//调用方式Event.listen('data', addNewWord）$('#submit').click(function() { //点击发送后便触发data事件  var data = $('input').val()    Event.trigger('data', {      value: data,    })})function addNewWord (data) {    var newWord = new Barrage(this.canvas, this.ctx, data) //构建新的弹幕实例    wordObj.push(newWord)},渲染弹幕到页面
声明了一个弹幕的构造函数，内部包含了其各种属性并且在原型链中添加了draw方法来进行绘制：
function Barrage(canvas, ctx, data) {    this.width = canvas.width    this.height = canvas.height    this.ctx = ctx    this.color = data.color || '#'+Math.floor(Math.random()*16777215).toString(16) //随机颜色    this.value = data.value    this.x = this.width //x坐标    this.y = Math.random() * this.height    this.speed = Math.random() + 0.5    this.fontSize = Math.random() * 10 + 12}Barrage.prototype.draw = function() {        if(this.x < -200) {            return        } else {            this.ctx.font = this.fontSize + 'px "microsoft yahei", sans-serif';            this.ctx.fillStyle = this.color            this.x = this.x - this.speed            this.ctx.fillText(this.value, this.x, this.y)        }}

本次分享一下使用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.ctx1.getImageData(0, 0, this.width, this.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; //将视频黄色部分的透明度进行了变化    }    this.ctx2.putImageData(frame, 0, 0);

视频中效果截图如下：

更多关于canvas的图像操作可以参考下面这两篇文章：

• 基于canvas实现波浪式绘制图片
• 基于canvas实现的一个截图小demo
  

基于canvas的图像处理可以实现很强大的功能，比如滤镜啊之类的~

腾讯的Aolly Team团队出品的AlloyImage - 基于HTML5技术的专业图像处理库就是个很好的范例。作者就搞不明白那些高深的东西了，什么拉普拉斯算子，各种算子：）

弹幕功能

弹幕功能分为两部分：

• 监听新弹幕的推送
• 渲染弹幕到页面
  

监听新弹幕的推送

通过维护一个弹幕数组来实时去渲染每一个弹幕字条的应有位置。而何时更新这个数组，为了解耦作者使用了发布订阅的方式来进行数组的更新。当然这里并不是一定要使用这种模式，只不过作者刚刚学习完所以拿来用一下而已。千万别喷我：）

[JavaScript] 纯文本查看 复制代码

var Event = (function(){    var list = {},        listen,        trigger,        remove;        listen = function(key,fn){ /收集监听事件            if(!list[key]) {                list[key] = [];            }            list[key].push(fn);        };        trigger = function(){/触发后依次执行回调            var key = Array.prototype.shift.call(arguments),                 fns = list[key];            if(!fns || fns.length === 0) {                return false;            }            for(var i = 0, fn; fn = fns[i++];) {                fn.apply(this,arguments);            }        };        remove = function(key,fn){            var fns = list[key];            if(!fns) {                return false;            }            if(!fn) {                fns && (fns.length = 0);            }else {                for(var i = fns.length - 1; i >= 0; i--){                    var _fn = fns;                    if(_fn === fn) {                        fns.splice(i,1);                    }                }            }        };        return {            listen: listen,            trigger: trigger,            remove: remove        }})();//调用方式Event.listen('data', addNewWord）$('#submit').click(function() { //点击发送后便触发data事件  var data = $('input').val()    Event.trigger('data', {      value: data,    })})function addNewWord (data) {    var newWord = new Barrage(this.canvas, this.ctx, data) //构建新的弹幕实例    wordObj.push(newWord)},渲染弹幕到页面
声明了一个弹幕的构造函数，内部包含了其各种属性并且在原型链中添加了draw方法来进行绘制：
function Barrage(canvas, ctx, data) {    this.width = canvas.width    this.height = canvas.height    this.ctx = ctx    this.color = data.color || '#'+Math.floor(Math.random()*16777215).toString(16) //随机颜色    this.value = data.value    this.x = this.width //x坐标    this.y = Math.random() * this.height    this.speed = Math.random() + 0.5    this.fontSize = Math.random() * 10 + 12}Barrage.prototype.draw = function() {        if(this.x < -200) {            return        } else {            this.ctx.font = this.fontSize + 'px "microsoft yahei", sans-serif';            this.ctx.fillStyle = this.color            this.x = this.x - this.speed            this.ctx.fillText(this.value, this.x, this.y)        }}