[html5]html5视频播放器控制视频的操作源代码范例(1)

[html5]html5视频播放器控制视频的操作源代码范例,拖动range进行调音量大小

html5视频播放器控制视频的操作源代码

<!DOCTYPE html>    <html>    <body>    <video id="video1" controls="controls" width="400px" height="400px">   <source src="img/1.mp4">   </video>      <div>   <button onclick="enableMute()" type="button">关闭声音</button>   <button onclick="disableMute()" type="button">打开声音</button>   <button onclick="playVid()" type="button">播放视频</button>   <button onclick="pauseVid()" type="button">暂停视频</button>   <button onclick="showFull()" type="button">全屏</button><br />   <span>进度条:</span>   <progress value="0" max="0" id="pro"></progress>   <span>音量:</span>   <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>   </div>      <script>   var btn=document.getElementsByTagName("button");   var myvideo=document.getElementById("video1");   var pro=document.getElementById("pro");   var ran=document.getElementById("ran");      //cuplayer.com酷播提示:关闭声音   function enableMute(){   myvideo.muted=true;   btn[0].disabled=true;   btn[1].disabled=false;   }   //cuplayer.com酷播提示:打开声音   function disableMute(){   myvideo.muted=false;   btn[0].disabled=false;   btn[1].disabled=true;   }   //cuplayer.com酷播提示:播放视频   function playVid(){   myvideo.play();   setInterval(pro1,1000);   }   //cuplayer.com酷播提示:暂停视频   function pauseVid(){   myvideo.pause();   }   //cuplayer.com酷播提示:全屏   function showFull(){   myvideo.webkitrequestFullscreen();   }   //cuplayer.com酷播提示:进度条展示   function pro1(){   pro.max=myvideo.duration;   pro.value=myvideo.currentTime;   }   //cuplayer.com酷播提示:拖动range进行调音量大小   function setvalue(){   myvideo.volume=ran.value/100;   myvideo.muted=false;   }   </script>      </body>    </html>
(0)

相关推荐