h5+js如何實現影片播放？簡單影片播放器控制的製作

h5 js如何實現影片播放？這篇文章就給大家透過範例介紹使用h5 js製作影片播放器控制的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 【推薦教學：Html5影片教學】

由於h5相容性問題，許多瀏覽器對於插入影片播放的支援都大不相同。火狐支援的比較完整，Google則支援的不是很好，很多功能都不能實現，這就需要我們去自製一個播放介面，去相容不同的瀏覽器。

只插入一個影片時，瀏覽器中只會出現這樣一個畫面。只有點擊右鍵才可以彈出選單列顯示播放或顯示控制；

下面是自製播放控制項的小練習，比較粗糙，很多功能有待完善。

製作中可能用到的一些常見屬性和內容：

1、標籤39000f942b2545a5315c57fa3276f220a6a9c6d3f311dabb528ad355798dc27d

2、常用屬性：

autoplay--自動播放;

controls--顯示音樂控制；

loop--實現循環播放；

poster--影片載入未開始時播放的圖片；

3、video支援多重影片格式

：（以此解決不同瀏覽器對影片格式的相容問題）

<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、取得目前影片播放的狀態：

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

####5、影片的一些特殊事件：######## #1）當影片可以播放取得總時間：###

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

###2）影片播放時，取得即時時間：###

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

###3）影片結束：###

video.onended=function(){
}

#######實現後的樣式：###################程式碼如下：###

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a7视频6e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf
            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{
                
            }
        531ac245ce3e4fe3d50054a55f265927
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        7fdebad7eb82ec390f2c32e1f12afe1e
            1405df188813e558f0140e3ab6e78ca7
                cd56d94a47a12885cb9dcdb78a969f5e055a816595e1cf5e4b7c6fe05c404a6c
                72869299b9e83661f52f74f1a0f1b4f6055a816595e1cf5e4b7c6fe05c404a6c
                ad0174e7eff5e4ab98b92592db810584055a816595e1cf5e4b7c6fe05c404a6c
            a6a9c6d3f311dabb528ad355798dc27d
            2ea26eabe7a1f178ec3f106f3cb66b31
                1d90c59fbeabcc32747892d80c3dbf5a
                cfa22b4c312e1430b3785d6cb577b89e6fd20bd7b615c56cbd536dc339c52b20
                9159ca2cbab8ec73f3d1b35fd417667200:00:0054bdf357c58b8a65c66d7c19c8e4d114
                45a2772a6b6107b401db3c9b82c049c2/54bdf357c58b8a65c66d7c19c8e4d114
                18cb35418c1c67c9302b6fd0efb4534100:00:0054bdf357c58b8a65c66d7c19c8e4d114
                e99d7a811f1a940a8cdba0f0388de53e
            16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        8019067d09615e43c7904885b5246f0a
            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";
                }
            }
            //点击进入全屏（注意兼容）
            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();
                    }
                }
            }
            //实时获取时间
            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(t4bf8e71bbeebea6eb36c87b18c4494ad36000){
                    timeone.innerHTML=timh+":"+timm+":"+tims;
                }
                
                jdt.value=(t/all)*100;
            }
            //获取总时间
            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(tcb441262531df53df20eaddc4ed7e7da36000){
                    timeall.innerHTML=timh+":"+timm+":"+tims;
                }
            }
            
            //视频结束时进度条
            video.onended=function(){
                    playbnt.src="img/on.png";
                    timeone.innerHTML="00:00:00";
                    video.currentTime=0;
            }
            //单击进度条
            var jdtl=jdt.offsetLeft;
            var jdtw=jdt.offsetWidth;
            jdt.onclick=function(event){
//                console.log(all);
                var onex=Math.floor((event.clientX-jdtl));//点击坐标到进度条左端距离
                console.log("鼠标单击坐标:"+event.clientX);
//                console.log(jdtl);
                var allx=Math.floor(jdtw);       //进度条的宽度
                var x=onex/allx;                                
                console.log("单击坐标-left="+onex);
                console.log("进度条宽度="+allx);//百分比
                console.log("百分比="+x);
                video.currentTime=Math.floor(all*x);   //实时时间=总时长*百分比
                console.log("实时时间="+all*x);
            }
            
        2cacc6d41bbb37262a98f745aa00fbf0
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

###以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！ ###

以上是h5+js如何實現影片播放？簡單影片播放器控制的製作的詳細內容。更多資訊請關注PHP中文網其他相關文章！