主頁 > 知識庫 > HTML5自定義視頻播放器源碼

HTML5自定義視頻播放器源碼
熱門標(biāo)簽：高德地圖標(biāo)注商戶怎么標(biāo) 欣鼎電銷機器人 效果 ok電銷機器人 智能電銷機器人被禁用了么 如何查看地圖標(biāo)注 電話機器人技術(shù) 惡搞電話機器人 黃石ai電銷機器人呼叫中心 地圖標(biāo)注軟件打印出來

video對象

兼容性寫法

    <video controls>
        <source src="data/demo.ovg">
        <source src="data/demo.mp4">
        <source src="data/demo.webm">
        您的瀏覽器不支持，請升級您的瀏覽器
    </video>

video 標(biāo)簽 width height autoplay muted

poster帶有預(yù)覽圖（海報圖片）的視頻播放器

<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>

選中video標(biāo)簽

    var VideoNode = document.getElementById('myVideo');

src控制視頻的來源

VideoNode.src = 'data/demo.ogv';

手動設(shè)置控件 controls

VideoNode.controls = true;

設(shè)置視頻音量

VideoNode.volume = 0.5;

currentTime當(dāng)前播放時間

快進效果

gogogo.onclick = function(){
            VideoNode.currentTime = VideoNode.currentTime + 3;
        };

暫停 pause()

      stopNode.onclick = function(){
            VideoNode.pause();
        };

播放play()

     playNode.onclick = function(){
            VideoNode.play();
        };

load 刷新播放器的事件

      reloadNode.onclick = function(){
            VideoNode.src = 'data/demo.mp4';
            VideoNode.load();
        };

canplay 視頻已經(jīng)加載好 可以開始播放了

 VideoNode.addEventListener('canplay',function(){
            console.log('視頻已經(jīng)加載好 可以開始播放了');
        });

requestFullscreen 讓video標(biāo)簽變成全屏

VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();

        fullScreenNode.onclick = function(){
            if(VideoNode.webkitRequestFullscreen){
                VideoNode.webkitRequestFullscreen();
            }
            else if(VideoNode.mozRequestFullScreen){
                VideoNode.mozRequestFullScreen();
            }
        };

volumechange 當(dāng)音量更改時

    VideoNode.onvolumechange = function(){
            console.log('volumechange');
        };

聲音隨機更改

        volumeNode.onclick = function(){
            VideoNode.volume = Math.random();
        };

seeking 當(dāng)用戶開始拖動進度條時 就會觸發(fā)的事件

 var seekingNum = 0;
        VideoNode.onseeking = function(){
            console.log('seeking...');
            seekingNum++;
            seeking.innerHTML = seekingNum;
        };

seeked 當(dāng)用戶對視頻的進度條并且已經(jīng)完成操作時會觸發(fā)的事件

   var seekedNum = 0;
        VideoNode.onseeked = function(){
            console.log('seeked...');
            seekedNum++;
            seeked.innerHTML = seekedNum;
        };

timeupdate監(jiān)聽視頻播放的狀態(tài)

       VideoNode.addEventListener('timeupdate',function(){
            // 總時長，以分鐘：秒的形式顯示
            let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
            // 當(dāng)前時間，以分鐘：秒的形式顯示
            let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
            timeNode.innerHTML = nowTime+'/'+allTime;
        })

readyState 視頻的準(zhǔn)備信息

  console.log(VideoNode.readyState);
        setTimeout(function(){
            console.log(VideoNode.readyState);
        },500);

playbackRate 查看或設(shè)置視頻的一個播放速度

 console.log(VideoNode.playbackRate)

Rate設(shè)置倍速

//Rate設(shè)置0.5倍速
        RateNode.children[0].onclick = function(){
            VideoNode.playbackRate = 0.5;
        };
        //Rate設(shè)置1倍速
        RateNode.children[1].onclick = function(){
            VideoNode.playbackRate = 1;
        };
        //Rate設(shè)置2倍速
        RateNode.children[2].onclick = function(){
            VideoNode.playbackRate = 2;
        };

loop的設(shè)置

 loopNode.onclick = function(){
            if(VideoNode.loop == false){
                this.innerHTML = '循環(huán)';
                VideoNode.loop = true;
            }
            else{
                this.innerHTML = '不循環(huán)';
                VideoNode.loop = false;
            }
        };

src返回的數(shù)據(jù)

console.log('src='+VideoNode.src);

currentSrc返回的數(shù)據(jù)

console.log('currentSrc='+VideoNode.currentSrc);

監(jiān)聽ended事件

VideoNode.addEventListener('ended',function(){
            console.log('視頻播放結(jié)束了');
            VideoNode.play();
        })

查看視頻的網(wǎng)絡(luò)狀態(tài)

console.log(VideoNode.networkState)

手動設(shè)置控件 controls

VideoNode.controls = true;

手動設(shè)置靜音 muted

VideoNode.muted = true;

自定義視頻播放器

放圖

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;} 
.outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}  
.outerNode .videoNode{
    width: 540px;height: 305px;float: left;
    background: black;
}     
.outerNode .controlsNode{
    width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/playNode.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/pause.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;}
.outerNode .controlsNode .loadNode .lineNode{
    width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
    background: url(images/line_bg.png) repeat-x;
}
.outerNode .controlsNode .loadNode .lineNode .lineRight{
    width: 2px;height: 100%;position: absolute;right: 0;top: 0;
    background: url(images/line_r_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadLeft{
    height: 100%;width:3px ;position: absolute;left: 0;top: 0;
    background: url(images/left_bg.png) no-repeat;z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight{
    height: 100%;width:3px ;position: absolute;right: 0;top: 0;
    background: url(images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}
.outerNode .controlsNode .timeNode{
    float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outerNode .controlsNode .volumeNode{
    width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
    background: url(images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
    height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
    background: url(images/volumeLine_bg.png) repeat-x;position: relative; 
}
.outerNode .controlsNode .volumeLine .v_left{
    width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
    width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;}
.outerNode .controlsNode .fullNode{
    width:15px;height:17px;float: left;margin: 6px 0 0 35px;
    background: url(images/full_bg.png) no-repeat;cursor: pointer;
    transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
    background: url(images/full_hover_bg.png) no-repeat;
}
    </style>
</head>
<body>
    <!-- 最外層的元素 -->
    <div class='outerNode'>
        <!-- video元素 -->
        <video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
        <!-- 控制器的元素 -->
        <div class='controlsNode'>
            <!-- 控制播放暫停的按鈕 -->
            <div class='playNode'></div>
            <!-- video的進度條 -->
            <div class='loadNode'>
                <div class='loadLeft'></div>
                <div class='loadRight'></div>
                <!-- 拖動進度條的按鈕 -->
                <div class='crlNode'></div>
                <!-- 真正的進度條 -->
                <div class='lineNode'>
                    <div class='lineRight'></div>
                </div>
            </div>
            <!-- 時間的元素 -->
            <div class='timeNode'>
                <span class='now'>00:00</span>
                <span> - </span>
                <span class='all'>4:30</span>
            </div>
            <!-- 聲音的標(biāo)志 -->
            <div class='volumeNode'></div>
            <!-- 聲音的條 -->
            <div class='volumeLine'>
                <div class='v_left'></div>
                <div class='v_right'></div>
                <div class='v_DragNode'></div>
            </div>
            <!-- 全屏的按鈕 -->
            <div class='fullNode'></div>
        </div>
    </div>
<script type="text/javascript">
    //播放暫停的控制
    //PlayNode 播放器按鈕
    //VideoNode 播放器
    //PlayBln 控制暫停播放的布爾值
    //FullNode 全屏按鈕
    //nowNode 當(dāng)前時間
    //allNode 視頻的全部時間
    //LineNode 當(dāng)前的進度條
    //CrlNode 進度條按鈕
    //LoadNode 進度條外面的元素
    var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0],
        FullNode = document.querySelector('.fullNode'),
        nowNode = document.querySelector('.now'),
        allNode = document.querySelector('.all'),
        LineNode = document.querySelector('.lineNode'),
        CrlNode = document.querySelector('.crlNode'),
        LoadNode = document.querySelector('.loadNode'),
        VDragNode = document.querySelector('.v_DragNode'),
        PlayBln = true;
    //播放、暫停的事件
    PlayNode.onclick = function(){
        //傳統(tǒng)的通過布爾值去改變classname的方法
        PlayBln = !PlayBln;
        if(PlayBln == false){
            this.className = 'pauseNode';
            VideoNode.play();
        }
        else{
            this.className = 'playNode';
            VideoNode.pause();
        }
    };
    //全屏按鈕的事件
    FullNode.onclick = function(){
        if(VideoNode.webkitRequestFullscreen){
            VideoNode.webkitRequestFullscreen();
        }
        else if(VideoNode.mozRequestFullScreen){
            VideoNode.mozRequestFullScreen();
        }
        else{
            VideoNode.requestFullscreen();
        }
    };
    //解決最開始時間的NAN的問題
    VideoNode.addEventListener('canplay',function(){
        var needTime = parseInt(VideoNode.duration);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        allNode.innerHTML = timeNum;
    },false);
    //解決 時間不足10 的問題
    function toDou(time){
        return time<10?'0'+time:time;
    }
    //當(dāng)視頻播放的時候 需要當(dāng)前的時間動起來
    VideoNode.addEventListener('timeupdate',function(){
        //目前的 百分比進度
        LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';
        CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'
        var needTime = parseInt(VideoNode.currentTime);
        var  s = needTime%60;
        var  m = parseInt(needTime / 60);
        var timeNum = toDou(m)+':'+toDou(s);
        nowNode.innerHTML = timeNum;
    },false);
    //聲音的拖拽按鈕
    VDragNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = VDragNode.parentNode.offsetWidth - 2.5;
            needX = needX < -2.5 ? - 2.5 : needX;
            needX = needX > maxX ? maxX : needX;
            //計算0 - 1
            var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;
            VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;
            VDragNode.style.left = needX + 'px';
        };
        document.onmouseup = function(e){
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
    //拖拽進度條按鈕
    CrlNode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        VideoNode.pause();
        document.onmousemove = function(e){
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = LoadNode.offsetWidth - 8.5;
            needX = needX < -8.5 ? -8.5 : needX;
            needX = needX > maxX ? maxX : needX;
            CrlNode.style.left = needX + 'px';
            LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';
        };
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;
            if(PlayBln == false){
                //console.log(1);
                PlayNode.className = 'pauseNode';
                VideoNode.play();
            }
            else{
                //console.log(2);
                PlayNode.className = 'playNode';
                VideoNode.pause();
            }
        };
        return false;
    };
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的HTML5自定義視頻播放器源碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

標(biāo)簽：聊城 盤錦 綏化 赤峰 阿壩 金昌 萍鄉(xiāng) 中山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5自定義視頻播放器源碼》，本文關(guān)鍵詞  HTML5,自定義,視頻,播放器,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5自定義視頻播放器源碼》相關(guān)的同類信息！
  • 本頁收集關(guān)于HTML5自定義視頻播放器源碼的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章