h5-视频 

 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>
index.html

 

posted @ 2016-10-18 16:50  舍近求猿  阅读(163)  评论(0)    收藏  举报