1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 video 8 { 9 width: 500px; 10 /*height: 500px;*/ 11 } 12 </style> 13 </head> 14 <body> 15 <video id="vid" src="1.mp4" controls poster="1.jpg" loop preload="metadata"> 16 <source src="1.mp4"> 17 <source src="1.ogg"> 18 您的浏览器不支持视频播放 19 </video> 20 <button>获取信息</button> 21 <button>开始/暂停</button> 22 <div id="box"></div> 23 <p id="p1"></p> 24 <script > 25 var vid=document.getElementById('vid'); 26 var box=document.getElementById('box'); 27 var p1=document.getElementById('p1'); 28 var bt=document.getElementsByTagName('button'); 29 bt[0].onclick=function () { 30 box.innerHTML='视频的时长：'+vid.duration+'<br>视频的当前的播放时间是：'+vid.currentTime; 31 } 32 bt[1].onclick=function () { 33 if (vid.paused){//暂停 34 vid.play(); 35 }else{//开始 36 vid.pause(); 37 } 38 } 39 vid.ontimeupdate=function () { 40 p1.innerHTML='当前播放时间：'+vid.currentTime; 41 } 42 </script> 43 </body> 44 </html>