码迷,mamicode.com
首页 > 其他好文 > 详细

h5-视频

时间:2016-10-18 18:12:03      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
 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

 

h5-视频

标签:

原文地址:http://www.cnblogs.com/yoyoyoyoyoyo/p/5973975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!