前几天突然想做一个像BiliBIli的弹幕系统，原来想法是视频外套一个div，然后div创建弹幕元素P标签飘过实现，后来发现太卡了，就用canvas实现，后来发现一个问题，
我的实现原理就是id为con的父元素div包住两个元素，一个是绘制弹幕的canvas，一个是video视频，
父元素相对定位，canvas和video绝对定位并且宽度都为100%；高度也为100%，这样父元素变大变小，这两个元素也会一起变。
但是我在video全屏的时候把canvas的z-index调到最大，还是无法覆盖住，后来才了解到video全屏的时候，层级比z-index本身还大，所以没有效果，那么怎么实现全屏呢？很简单，把你video的父元素全屏不就行了，这项层级就相同了，canvas就可以覆盖了。
文件头和style部分，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>腾讯云视频全屏弹幕示例</title>
<!--腾讯云点播需要的js和css，用户不用加 !-->
<link href="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
<script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--腾讯云点播需要的js和css，用户不用加 !-->
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.video-wrapper {
position: relative;
width: 640px;
height:500px;
margin: auto;
}
#canvasBarrage {
position: absolute;
width: 100%;
height: 100%;
z-index: 2147483647;
pointer-events: none;
}
#videoBarrage {
position: absolute;
background-color: black;
width: 100%;
height: 100%;
outline: 1px solid #eee;
}@keyframes bgColor {
25% {
background-color: darkred;
}
50% {
background-color: darkgreen;
}100% {
background-color: darkblue;
}
}
</style>body部分在下面。
</html>
body部分，实现原理就是id为con的父元素div包住两个元素，一个是绘制弹幕的canvas，一个是video视频，
父元素相对定位，canvas和video绝对定位并且宽度都为100%；高度也为100%，这样父元素变大变小，这两个元素也会一起变。
<body>
<div id="con" class="video-wrapper">
<canvas id="canvasBarrage"></canvas>
<video id="videoBarrage" preload="auto"></video>
</div>
<input id="input" name="value" required>
<button id="submit" disabled>发送弹幕</button>
<button id ="full">全屏</button></body>
JS部分（我使用的是第三方的腾讯云点播，就是视频上传给腾讯云保管，可以节省服务器空间，当然你也可以使用html的video标签实现本地播放，都是一样的，只是相关的事件不一样，例如我的例子都是腾讯云点播文档的，可以改成你的就可以了，都是基于video标签播放的）
<script>
var canvasBarrage = function(canvas, data) {
var currentTime ;//放在最前面定义视频时长变化赋值,这个是获取我视频播放的秒数
var video = document.getElementById('videoBarrage');
if (!canvas || !data || !data.length) {
return;
}
if (typeof canvas == 'string') {
canvas = document.querySelector(canvas);
canvasBarrage(canvas, data);
return;
}
var context = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
function Barrage(obj, index) {
// 随机x坐标也就是横坐标，对于y纵坐标，以及变化量speed
this.x = canvas.width;
this.y = canvas.height * Math.random();
this.speed = 2;
this.isShow = true;
this.opacity = 0.8;
this.text = obj.value || '';
this.time = obj.time;
this.color = obj.color || 'red';
this.fontSize = obj.fontSize;
console.log(this.fontSize)
};
Barrage.prototype.draw = function() {
var text = this.text;
// 根据此时x位置绘制文本
context.strokeStyle = this.color;
context.font = 'bold '+this.fontSize+'px "microsoft yahei", sans-serif';
context.fillStyle = 'rgba(255,255,255, '+this.opacity+'})';
context.fillText(text, this.x, this.y);
context.strokeText(text, this.x, this.y);
}
var store = {};
data.forEach((item,i) => {
store[i] = new Barrage(item, i);
});
// 绘制弹幕文本
var drawAll = function() {
for (var i in store) {
var barrage = store[i];
if (currentTime > barrage.time && barrage.isShow) {
barrage.x -= barrage.speed;
store[i].draw();
}
}
};
//这个是我使用了第三方技术腾讯云点播时要创建的video对象,不用使用，如果你只想用video标签实现本地播放,下面的播放器事件替换成你的video播放器事件就好了,例如<video>标签的播放暂停事件等.
var player = TCPlayer("videoBarrage", { // player-container-id 为播放器容器ID，必须与html中一致
fileID: "秘密哦", // 请传入需要播放的视频filID 必须
appID: "秘密哦", // 请传入点播账号的appID 必须
autoplay: false //是否自动播放
//其他参数请在开发文档中查看
});//播放器事件
//这个是我腾讯云点播播放器的暂停事件,替换成你的
player.on('pause', function(){
isPause = true; //isPause 就是弹幕播放时用来判断你的视频是否暂停了,暂停就不播放弹幕.，用来实现暂停弹幕不播放的效果的判断值
});
//这个是我腾讯云点播播放器的播放事件,替换成你的
player.on('play', function(){
isPause = false;//isPause 就是弹幕播放时用来判断你的视频是否暂停了,暂停就不播放弹幕.
render();
});
function getreqfullscreen (root) {//获取全屏
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
var fullscreen = getreqfullscreen();
document.getElementById('full').οnclick=function() {//全屏按钮点击事件
fullscreen.call(document.getElementById("con"));//全屏id为con的元素,即video的父元素
}
//这个是我播放时长条改变事件，currentTime就是我的当前播放秒数
player.on('timeupdate', function(){
currentTime = Math.round(player.currentTime());
});
//这个是我的播放器长度条改变触发事件，
player.on('seeked', function(){
currentTime = Math.round(player.currentTime());
console.log(currentTime)
reset();//实现拖动视频条，弹幕也会改变
});var reset = function() {//重绘弹幕,实现拖动视频条,弹幕也会随之改变
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i in store) {
var barrage = store[i];
if (currentTime > barrage.time) {//currentTime为播放器事时间,大于弹幕时间时,重新绘制弹幕,这样拖动视频条,弹幕也会重绘.
console.log('判断出来')
barrage.isShow = false;
} else {
store[i].x = canvas.width;
}
}
}//退出全屏事件
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}var input = document.getElementById('input');
var submitBtn = document.getElementById('submit');//发送弹幕
var status =1;
var status1 = 1;
var video=document.getElementById("con");
var canvas = document.getElementById('canvasBarrage');
var Ba=document.getElementById('videoBarrage');
$(document).keyup(function(e){
var key = e.which || e.keyCode;;
if(key == 27){
console.log('退出全屏')
exitFullscreen();
}
});
input.addEventListener('input', () => {//判断 弹幕不能空
if (input.value.trim()) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
});submitBtn.addEventListener('click', (event) => {//发送按钮
event.preventDefault();
//把弹幕push进去到data里,data为弹幕组
data.push({
value: input.value,
time: currentTime
});
input.value = '';
submitBtn.disabled = true;
console.log(data);
render();
});
var render = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawAll();
if (!isPause) {
requestAnimationFrame(render);
}
};
var add = function(obj) {//暴露接口返回add,render
store[Object.keys(store).length] = new Barrage(obj);
};return {
add,
render
}
var barrage = canvasBarrage('#canvasBarrage', data);
barrage.render();
}//弹幕组
var data = [{
value: '我是第一秒',
color: 'red',
fontSize: 35,
time: 1
}, {
value: '我是第二秒',
color: 'blue',
fontSize: 35,
time: 2
}, {
value: '我是第三秒',
color: 'yellow',
fontSize: 35,
time: 3
}, {
value: '我是第四秒',
color: 'yellow',
fontSize: 35,
time: 4
}, {
value: '我是第五秒',
color: 'yellow',
fontSize: 35,
time: 5
}, {
value: '我是第六秒',
color: 'yellow',
fontSize: 35,
time: 6
}, {
value: '我是第七秒',
color: 'yellow',
fontSize: 35,
time: 7
}, {
value: '我是第八秒',
color: 'yellow',
fontSize: 35,
time: 8
}]
canvasBarrage('#canvasBarrage', data);</script>
效果图
全屏
那么有人问了，你这没用啊，全屏按钮在外面，我想要的是视频里面有个全屏，
关于这个很简单，你审查video标签下的全屏按钮在哪里，然后禁用video的全屏属性，然后在查找他的父元素，对其添加你的全屏按钮就可以了。我已经实现了。
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
