video和audio学习
video——视频 src 地址 autoplay 自动播放 loop 循环播放 poster 封面地址 <video> <flash></flash> </video> video支持什么格式——通用格式mp4 IE wmv、mp4 Chrome webq、mp4 FireFox ogv、mp4 audio——mp3 JS接口 .play() 播放 .pause() 暂停 .stop() × pause+currentTime .currentTime 当前播放位置(s) .duration 长度(s) .volume 音量：0-100 .muted 静音：bool
demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .box {width:500px; background:#eee; height:20px;} .box .child {background:green; height:20px; width:0} </style> <script> window.onload=function (){ let oV=document.getElementById(‘v1‘); let oBtn1=document.getElementById(‘btn1‘); let oBtn2=document.getElementById(‘btn2‘); let oBtn3=document.getElementById(‘btn3‘); let oBtn4=document.getElementById(‘btn4‘); let oChild=document.querySelector(‘.child‘); oBtn1.onclick=function (){ oV.play(); }; oBtn2.onclick=function (){ oV.pause(); }; oBtn3.onclick=function (){ oV.pause(); oV.currentTime=0; }; oBtn4.onclick=function (){ alert(`${oV.currentTime}|${oV.duration}`); }; oV.addEventListener(‘timeupdate‘, function (){ oChild.style.width=parseInt(100*oV.currentTime/oV.duration)+‘%‘; }, false); oV.muted=true; }; </script> </head> <body> <input type="button" value="播放" id="btn1"> <input type="button" value="暂停" id="btn2"> <input type="button" value="停止" id="btn3"> <input type="button" value="查看当前进度" id="btn4"> <br> <div class="box"> <div class="child"></div> </div> <video src="https://vd1.bdstatic.com/mda-hjmhaxk5y6zh8vxm/mda-hjmhaxk5y6zh8vxm.mp4" controls id="v1"> </video> </body> </html>
