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>