HTML5 canvas和mp4视频真实交互弹幕实例页面

展示

代码

HTML代码：

<canvas id="canvasBarrage"></canvas>
<video id="videoBarrage" width="640" height="384" src="./video.mp4" controls></video>

JS代码：

// 弹幕数据
var dataBarrage = [{
    value: 'speed设为0为非滚动',
    time: 1, // 单位秒
    speed: 0
}, {
    value: 'time控制弹幕时间，单位秒',
    color: 'blue',
    time: 2
}, ...];

/*!
** by zhangxinxu(.com)
** 与HTML5 video视频真实交互的弹幕效果
** http://www.zhangxinxu.com/wordpress/?p=6386
** MIT License
** 保留版权申明
*/
var CanvasBarrage = function (canvas, video, options) {
    if (!canvas || !video) {
        return;    
    }
    var defaults = {
        opacity: 100,
        fontSize: 24,
        speed: 2,
        range: [0,1],
        color: 'white',
        data: []
    };
    
    // ... 其它参见页面源代码
}

// 初始化弹幕方法
var eleCanvas = document.getElementById('canvasBarrage');
var eleVideo = document.getElementById('videoBarrage');

var demoBarrage = new CanvasBarrage(eleCanvas, eleVideo, {
    data: dataBarrage
});

// 新增弹幕
/* 
demoBarrage.add({
    value: '弹幕内容',
    time: eleVideo.currentTime
    // 其它如color, fontSize, opacity等可选
});
*/

// 全局设置修改，直接（例如）：
// demoBarrage.opacity = 50;
// 或者字号大小 demoBarrage.fontSize = 16;