站長資訊網h5+js如何實現視頻播放？本篇文章就給大家通過示例介紹使用h5+js制作視頻播放器控件的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。【推薦教程：Html5視頻教程】
由于h5兼容性問題，很多瀏覽器對于插入視頻播放的支持都大不相同。火狐支持的比較完整，谷歌則支持的不是很好，很多功能都不能實現，這就需要我們去自制一個播放界面，去兼容不同的瀏覽器。
只插入一個視頻時，瀏覽器中只會出現這樣一個畫面。只有單擊右鍵才可以彈出菜單欄顯示播放或者顯示控件；
下面是一個自制播放控件的小練習，比較粗糙，很多功能有待完善。
制作中可能用到的一些常見屬性和內容：
1、標簽<video></video>
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(){ }
實現后的樣式：
代碼如下：
<!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"; } } //點擊進入全屏（注意兼容） 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(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; } //獲取總時間 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; } } //視頻結束時進度條 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); } </script> </body> </html>
