真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司

028-86922220

怎么在HTML5中實現(xiàn)一個視頻彈幕功能

這篇文章給大家介紹怎么在HTML5中實現(xiàn)一個視頻彈幕功能，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)資溪免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

1>html代碼展示

關(guān)閉彈幕開啟靜音

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 = $("" + text + "");
    $(".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.代碼效果演示