[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)