溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

h5+js實(shí)現(xiàn)視頻播放的方法

發(fā)布時(shí)間：2020-08-28 10:07:39 來源：億速云 閱讀：1134 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了h5+js實(shí)現(xiàn)視頻播放的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

由于h6兼容性問題，很多瀏覽器對(duì)于插入視頻播放的支持都大不相同?；鸷С值谋容^完整，谷歌則支持的不是很好，很多功能都不能實(shí)現(xiàn)，這就需要我們?nèi)プ灾埔粋€(gè)播放界面，去兼容不同的瀏覽器。

只插入一個(gè)視頻時(shí)，瀏覽器中只會(huì)出現(xiàn)這樣一個(gè)畫面。只有單擊右鍵才可以彈出菜單欄顯示播放或者顯示控件；

h5+js實(shí)現(xiàn)視頻播放的方法

下面是一個(gè)自制播放控件的小練習(xí)，比較粗糙，很多功能有待完善。

制作中可能用到的一些常見屬性和內(nèi)容：

1、標(biāo)簽<video></video>

2、常用屬性：

autoplay--自動(dòng)播放；

controls--顯示音樂控件；

loop--實(shí)現(xiàn)循環(huán)播放；

poster--視頻加載未開始時(shí)播放的圖片；

3、video支持多視頻格式：（以此解決不同瀏覽器對(duì)視頻格式的兼容問題）

<video poster="img/oceans-clip.png">
    <source src="video/oceans-clip.mp4"></source> 
    <source src="video/oceans-clip.webm"></source> 
    <source src="video/oceans-clip.ogv"></source> 
</video>

4、獲取當(dāng)前視頻播放的狀態(tài)：

playbtn(對(duì)象).onclick=function(){
　　　if(video.paused){
　　　  video.play();　　
　　　}else{
　　　　video.pause();
　　　}
}

5、視頻的一些特殊事件：

1）當(dāng)視頻可以播放獲取總時(shí)間：

vdideo.oncanplay=function(){
　　　console.log(video.duration);
}

2）視頻播放時(shí)，獲取實(shí)時(shí)時(shí)間：

video.ontimedate=function(){
　　console.log(video.currentTime);
}

3）視頻結(jié)束：

video.onended=function(){
}

實(shí)現(xiàn)后的樣式：

h5+js實(shí)現(xiàn)視頻播放的方法

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>視頻</title>
        <style type="text/css">
            input,body,div{
                margin: 0;
                padding: 0;
            }
            input{
                display: inline-block;
                width: 30px;
                height: 30px;
                background-size: 30px;
                float: left;    
            }
            #control{
                width: 620px;
                height: 30px;
                background-color: #222;
                margin-top: -8px;
                padding: 5px 10px;
                clear: both;
                /*position: absolute;
                top:300px
                left: 100px;*/
            }
            #jdt{
                margin: 10px 5px 0 5px;
                width: 400px;
                height: 10px;
                float: left;    
            }
            span {
                display: inline-block;
                color: #fff;
                float: left;
                margin: 6px 5px 0 5px;
                font: 14px "微軟雅黑";    
            }
            #box1{
                margin:50px auto;
                width: 615px;
                height: 305pc;
                /*position: relative;*/
            }
            #playbnt{
                
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <video poster="img/oceans-clip.png">
                <source src="video/oceans-clip.mp4"></source>
                <source src="video/oceans-clip.webm"></source>
                <source src="video/oceans-clip.ogv"></source>
            </video>
            <div id="control">
                <input type="image" value="" id="playbnt" src="img/on.png"/>
                <meter id="jdt" min="0" max="100"></meter>
                <span id="timeone">00:00:00</span>
                <span>/</span>
                <span id="timeall">00:00:00</span>
                <input type="image" value="" id="fullbnt" src="img/expand.jpg"/>
            </div>
        </div>
        <script type="text/javascript">
            var playbnt=document.getElementById("playbnt");
            var fullbnt=document.getElementById("fullbnt");
            var video=document.querySelector("video");
            var box1=document.getElementById("box1");
            //播放按鈕
            playbnt.onclick=function(){
                if(video.paused){
                    video.play();
                    playbnt.src="img/pause.png";
                }else{
                    video.pause();
                    playbnt.src="img/on.png";
                }
            }
            //點(diǎn)擊進(jìn)入全屏（注意兼容）
            fullbnt.onclick=function(){
                if(document.fullscreenElement||document.webkitFullscreenElement||document.mozCancelFullScreen||document.msFullscreenElement){
                    if(document.cancelFullscreen){
                        document.cancelFullscreen();
                    }else if(document.webkitCancelFullscreen){
                        document.webkitCancelFullscreen();
                    }else if(document.mozCancelFullScreen){
                        document.mozCancelFullScreen();
                    }else if(document.msExitFullscreen){
                        document.msExitFullscreen();
                    }
                }else{
                    if(video.requestFullscreen){
                        video.requestFullscreen();
                    }else if(video.webkitRequestFullscreen){
                        video.webkitRequestFullscreen();
                    }else if(video.mozRequestFullScreen){
                        video.mozRequestFullScreen();
                    }else if(video.msRequestFullscreen){
                        video.msRequestFullscreen();
                    }
                }
            }
            //實(shí)時(shí)獲取時(shí)間
            var timh=0;
            var timm=0;
            var tims=0;
            var all=null;
            var one=null;
            var timeone=document.getElementById("timeone");
            var jdt=document.getElementById("jdt");
            video.ontimeupdate=function(){
                var t=Math.floor(video.currentTime);    
                ont=t;
                timh=t/3600;
                timm=t%3600/60;
                tims=t%60;                
//                console.log(t);
                 if(t<10){
                    timeone.innerHTML="00:00:0"+tims;
                }else if(10<t<60){
                    timeone.innerHTML="00:00:"+tims;
                }else if(60<t<600){
                    timeone.innerHTML="00:0"+timm+":"+tims;
                }
                else if(600<t<3600){
                    timeone.innerHTML="00:"+timm+":"+tims;
                }else if(3600<t<36000){
                    timeone.innerHTML="0"+timh+":"+timm+":"+tims;
                }else if(t>36000){
                    timeone.innerHTML=timh+":"+timm+":"+tims;
                }
                
                jdt.value=(t/all)*100;
            }
            //獲取總時(shí)間
            video.oncanplay=function(){
                var t=Math.floor(video.duration);
                all=t
                timh=t/3600;
                timm=t%3600/60;
                tims=t%60;                
//                console.log(t);
                 if(t<10){
                    timeall.innerHTML="00:00:0"+tims;
                }else if(10<t<60){
                    timeall.innerHTML="00:00:"+tims;
                }else if(60<t<600){
                    timeall.innerHTML="00:0"+timm+":"+tims;
                }
                else if(600<t<3600){
                    timeall.innerHTML="00:"+timm+":"+tims;
                }else if(3600<t<36000){
                    timeall.innerHTML="0"+timh+":"+timm+":"+tims;
                }else if(t>36000){
                    timeall.innerHTML=timh+":"+timm+":"+tims;
                }
            }
            
            //視頻結(jié)束時(shí)進(jìn)度條
            video.onended=function(){
                    playbnt.src="img/on.png";
                    timeone.innerHTML="00:00:00";
                    video.currentTime=0;
            }
            //單擊進(jìn)度條
            var jdtl=jdt.offsetLeft;
            var jdtw=jdt.offsetWidth;
            jdt.onclick=function(event){
//                console.log(all);
                var onex=Math.floor((event.clientX-jdtl));//點(diǎn)擊坐標(biāo)到進(jìn)度條左端距離
                console.log("鼠標(biāo)單擊坐標(biāo):"+event.clientX);
//                console.log(jdtl);
                var allx=Math.floor(jdtw);       //進(jìn)度條的寬度
                var x=onex/allx;                                
                console.log("單擊坐標(biāo)-left="+onex);
                console.log("進(jìn)度條寬度="+allx);//百分比
                console.log("百分比="+x);
                video.currentTime=Math.floor(all*x);   //實(shí)時(shí)時(shí)間=總時(shí)長*百分比
                console.log("實(shí)時(shí)時(shí)間="+all*x);
            }
            
        </script>
    </body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享h5+js實(shí)現(xiàn)視頻播放的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手