html5-8 如何控制html5中的视频标签和音频标签
一、总结
一句话总结：找到视频或者音频的element对象，然后查手册看对应的方法或者属性就可以，里面有控制的。
1、如何控制html5中的视频标签和音频标签？
找到视频或者音频的element对象，然后查手册看对应的方法或者属性就可以，里面有控制的。
59 //找到视频对象
60 vid=document.getElementById('vid');
61
62 //开始
63 function start(){
64 vid.play();
65 }
66
67 //暂停
68 function pause(){
69 vid.pause();
70 }
2、视频和音频播放方法和暂停方法是什么？
play()和pause()
二、如何控制html5中的视频标签和音频标签
1、相关知识
HTML5视频标签:
<video src="movie.ogg" controls="controls" autoplay loop width='1200px' height='500px'>
</video>
HTML5音频、视频控制:
1.vobj.play();
2.vobj.pause();
HTML5音频标签:
<audio src="go.mp3" controls="controls" autoplay loop>
</audio>
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 .container{ 8 width:1200px; 9 /*background: #ccc;*/ 10 height:600px; 11 margin:0 auto; 12 } 13 14 header{ 15 height:50px; 16 background: #272822; 17 } 18 19 section{ 20 height:500px; 21 margin:15px 0px; 22 } 23 24 footer{ 25 height:50px; 26 background: #272822; 27 } 28 29 article{ 30 float:left; 31 margin-left:30px; 32 } 33 </style> 34 </head> 35 <body> 36 <!-- 主体 --> 37 <div class="container"> 38 <!-- 头部 --> 39 <header> 40 41 </header> 42 43 <!-- 体部 --> 44 <section> 45 <video src="cartoon.webm" width='1200px' id='vid'></video> 46 <p> 47 <button onclick='start()'>播放</button> 48 <button onclick='pause()'>暂停</button> 49 </p> 50 </section> 51 52 <!-- 尾部 --> 53 <footer> 54 55 </footer> 56 </div> 57 </body> 58 <script> 59 //找到视频对象 60 vid=document.getElementById('vid'); 61 62 //开始 63 function start(){ 64 vid.play(); 65 } 66 67 //暂停 68 function pause(){ 69 vid.pause(); 70 } 71 </script> 72 </html>