1.首先展示一下彈幕視頻彈幕原圖，事實說話
2.代碼展示
1>html代碼展示
<div class="barrage">
<video id="myvideo" autoplay loop width="100%" height="300px">
<source src="video/1.mp4">
</video>
<div class="screen">
<div class="content">
<!--內(nèi)容在這里顯示-->
</div>
</div>
<!--發(fā)送對話框-->
<div class="send">
<input type="text" class="s_text" placeholder="使用回車可以快速發(fā)送彈幕"/>
<input type="button" class="s_btn" value="發(fā)送" />
<!--關(guān)閉彈幕功能-->
<span class="barrage_close">關(guān)閉彈幕</span>
<!-- 靜音功能 -->
<span id="muted">開啟靜音</span>
</div>
</div>
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();
});
//將彈幕內(nèi)容放進數(shù)組貯存起來
var arr=[];
var h=arr.push();
// 監(jiān)聽發(fā)送，按enter發(fā)送
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('你的內(nèi)容為空，請?zhí)顚懺u論在再發(fā)送');
return false;
}
var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getColor() + ";'class='content_text'>" + text + "</div>");
$(".content").append(_lable.show());
init_barrage();
$(".s_text").val("");
});
//初始化彈幕技術(shù)
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);
//設(shè)置視頻播放速度
// 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 = '關(guān)閉靜音';
// console.log(2222)
}
}
3.代碼效果演示
<a title="查看演示效果" href="https://leader755.github.io/Video-barrage/" target="_blank" >點我查看演示效果</a>
<a title="下載源碼" href="https://github.com/Leader755/Video-barrage.git" target="_blank">點我下載源碼</a>
4.最重要的一點別忘了
問題：視頻寬度不能100%,高度我定死了300px，有哪位大神幫嗎解決一下吧。以下為涉及的主要代碼，可以上翻查看詳細代碼。
<div class="barrage">
<video id="myvideo" autoplay loop width="100%" height="300px">
<source src="video/1.mp4">
</video>
</div>
<style>
.barrage {
position: relative;
width: 100%;
height:250px;
}
#myvideo{
position: absolute;
/* width: 100%;
height:300px; */
top: -50px;
left: 0;
z-index: -1;
}
</style>
總結(jié)
以上所述是小編給大家介紹的HTML5實現(xiàn)視頻彈幕功能 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
