h5-视频
Posted 舍近求猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于h5-视频的主要内容，如果未能解决你的问题，请参考以下文章