1.首先展示一下弹幕视频弹幕原图，事实说话

2.代码展示

1>html代码展示

2>css代码展示

*{

padding: 0;

margin: 0;

}

input{

outline: none;

}

.barrage {

position: relative;

width: 100%;

height:250px;

}

#myvideo{

position: absolute;

/* width: 100%;

height:300px; */

top: -50px;

left: 0;

z-index: -1;

}

.barrage .screen {

position: absolute;

top: 0px;

right: 0px;

width: 100%;

height: 300px;

}

.barrage .screen .content {

position: relative;

width: 100%;

height: 250px;

background: #000;

opacity:0.5;

/* filter: alpha(opacity=100); *//***针对ie8以上或者更早的浏览器****/

background-color: transparent;

z-index: 1;

}

.barrage .screen .content div {

position: absolute;

font-size: 20px;

font-weight: bold;

white-space: nowrap;

line-height: 40px;

z-index: 40;

}

.barrage .send {

position: absolute;

bottom: 0px;

width: 100%;

height: 55px;

line-height: 55px;

z-index: 1;

/*background: #000;*/

background: rgba(0,0,0,0.5);

text-align: center;

/*display: none;*/

}

.barrage:hover .send{

display: block;

}

.barrage .send .s_text {

width: 60%;

height: 35px;

line-height:35px;

font-size: 16px;

font-family: "微软雅黑";

border-radius:20px;

opacity: 0.8;

}

.barrage .send .s_btn {

width: 105px;

height: 35px;

line-height: 35px;

background: #22B14C;

color: #fff;

border-radius: 10px;

opacity: 0.8;

}

.barrage_close,#muted {

width: 80px;

height: 30px;

line-height: 30px;

border-radius: 10px;

text-align: center;

color: #22B14C;

background:#fff;

cursor: pointer;

opacity: 0.8;

}

#muted{

background:yellow;

}

.barrage_close1{

color: #fff;

background: #fff;

}

/* css动画 */

.content div{

animation:Text 15s infinite normal;

}

@keyframes Text{

0%{

left:100%;

}

20%{

left:75%;

}

80%{

left:0%;

}

100%{

left:-30%;

}

}

3>js代码展示

$(function () {

$(".barrage_close").click(function(){

$(".content div").remove();

});

init_barrage();

});

//将弹幕内容放进数组贮存起来

var arr=[];

var h=arr.push();

// 监听发送，按enter发送

document.οnkeydοwn=function(event){

var e = event || window.event;

if(e && e.keyCode==13){

// console.log(11111);

$(".send .s_btn").click();

}

};

//提交评论

$(".send .s_btn").click(function () {

var text = $(".s_text").val();

if (text == "") {

alert('你的内容为空，请填写评论在再发送');

return false;

}

var _lable = $("

");

$(".content").append(_lable.show());

init_barrage();

$(".s_text").val("");

});

//初始化弹幕技术

function init_barrage() {

var _top = 0;

$(".content div").show().each(function () {

var _left =$(".barrage").width();//浏器览最大宽度(也是浏览器的高度)，作为定位left的值

console.log(_left);

var _height =$(".barrage").height();//视频窗口的最大高度

console.log(_height);

_top += 35;

if (_top >= (_height - 150)) {

_top = 0;

}

$(this).css({ left: _left, top: _top, color: getColor() });

//定时弹出文字

// var time = 10000;

// if ($(this).index() % 2 == 0) {

// time = 15000;

// }

// $(this).animate({ left: "-" + _left + "px" }, time, function () {

// $(this).remove();

// });

});

}

//获取随机颜色

function getColor() {

return '#' + (function (h) {

return new Array(7 - h.length).join("0") + h

})

((Math.random() * 0x1000000 << 0).toString(16))

}

var video=document.getElementById("myvideo");

var mute=document.getElementById("muted");

console.log(muted);

//设置视频播放速度

// video.playbackRate = 0.5;

//视频静音

video.muted = false;

mute.οnclick=function(){

if(video.muted){

video.muted = false;

mute.innerText='';

mute.innerText = '开启静音';

// console.log(1111)

}else{

video.muted = true;

mute.innerText='';

mute.innerText = '关闭静音';

// console.log(2222)

}

}

3.代码效果演示

点我查看演示效果

点我下载源码

4.最重要的一点别忘了

问题：视频宽度不能100%,高度我定死了300px，有哪位大神帮吗解决一下吧。以下为涉及的主要代码，可以上翻查看详细代码。

.barrage {

position: relative;

width: 100%;

height:250px;

}

#myvideo{

position: absolute;

/* width: 100%;

height:300px; */

top: -50px;

left: 0;

z-index: -1;

}

总结

以上所述是小编给大家介绍的HTML5实现视频弹幕功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！