<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Video Player w/ React & GSAP 📺</title><style type="text/css"> #myvideo{ width: 800px; height: 600px; margin: 0 auto; } h3{ font-size: 20px; } .my_show{ width: 800px; height: 600px; border: solid 1px gray; }</style></head><body> <h3>我的音乐我做主</h3> <video id="myvideo" controls autoplay> <source src="video/de2.mp4" type="video/mp4"> </video><div> 播放时间: <span id="showTime"></span></div><br><div id="buttonDiv"> <input type="button" value="播放/暂停" onclick="PlayorPause()"> <input type="button" value="增加音量" onclick="AddYin()"> <input type="button" value="减小音量" onclick="MinYin()"> <input type="button" value="设置静音" onclick="JingYin()" id="SetMuted"></div><canvas id="myCanvas"></canvas><script type="text/javascript"> var video=document.getElementById("myvideo"); var showTime=document.getElementById("showTime"); if(video.canPlayType){ video.addEventListener("timeupdate",TimeUpdate,false); } //格式化播放时间 function TimeUpdate(){ var ct=video.currentTime; var st=video.duration; var ctStr=RunTime(parseInt(ct/60))+":"+RunTime(parseInt(st%60)); var stStr=RunTime(parseInt(st/60))+":"+RunTime(parseInt(st%60)); showTime.innerHTML=ctStr+"|"+stStr; } function RunTime(num){ var len=num.toString().length; while(len<2){ num="0"+num; len++; } return num; } //播放/暂停 function PlayorPause(){ if(video.paused){ video.play(); }else{ video.pause(); } } //加音量 function AddYin(){ if(video.volume<1){ video.volume+=0.1; } } //减音量 function MinYin(){ if(video.volume>0){ video.volume-=0.1; } } //设置静音 function JingYin(){ if(!video.muted){ video.muted=true; document.getElementById("SetMuted").value="取消静音"; }else{ video.muted=false; document.getElementById("SetMuted").value="静音"; } }</script></body></html>
来源：https://www.cnblogs.com/xiaokemo/p/12495843.html