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

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

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

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

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

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

1、標(biāo)簽

2、常用屬性：

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

controls--顯示音樂(lè)控件；

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

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

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

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)后的樣式：

代碼如下：

    
        
        
        
    
    
        

            
            

                
                
                00:00:00
                /
                00:00:00
                
            
        
        
    

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