<!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>
效果图：
