<!DOCTYPE html> <html> <head> <title>HTML5-video(播放暫停視頻；打開關閉聲音；進度條)</title> <meta charset="utf-8"/> </head> <body> <video id="video1" controls="controls" width="400px" height="400px"> <source src="videos/demo.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"); //關閉聲音 function enableMute(){ myvideo.muted=true; btn[0].disabled=true; btn[1].disabled=false; } //打開聲音 function disableMute(){ myvideo.muted=false; btn[0].disabled=false; btn[1].disabled=true; } //播放視頻 function playVid(){ myvideo.play(); setInterval(pro1,1000); } //暫停視頻 function pauseVid(){ myvideo.pause(); } //全屏 function showFull(){ myvideo.webkitrequestFullscreen(); } //進度條展示 function pro1(){ pro.max=myvideo.duration; pro.value=myvideo.currentTime; } //拖動range進行調音量大小 function setvalue(){ myvideo.volume=ran.value/100; myvideo.muted=false; } </script> </body> </html>
效果圖：
