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> <!- -內容在這裡顯示--> </div> </div> <!--發送對話框--> <div class=send> <input type=text class=s_text placeholder=使用回車可以快速發送彈幕/> <input type=button class=s_btn value=發送/> <!--關閉彈幕功能--> <span class=barrage_close>關閉彈幕</ 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: }.barrage .screen .content { position: relative; width: 10% ; 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: #2B14fcolor; 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:#ff; : 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 = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.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.程式碼效果演示
<a style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tah, 死, tah,o-family; Microsoft YaHei;"><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>總結以上所述是小編給大家介紹的HTML5實現視頻彈幕功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！