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>
