html5-8 如何控制html5中的视频标签和音频标签

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、代码

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         .container{
             width:1200px;
             /*background: #ccc;*/
             height:600px;
             margin:0 auto;
         }

         header{
             height:50px;
             background: #272822;
         }

         section{
             height:500px;
             margin:15px 0px;
         }

         footer{
             height:50px;
             background: #272822;
         }

         article{
             float:left;
             margin-left:30px;
         }
     </style>
 </head>
 <body>
     <!-- 主体 -->
     <div class="container">
         <!-- 头部 -->
         <header>

         </header>

         <!-- 体部 -->
         <section>
             <video src="cartoon.webm" width='1200px' id='vid'></video>
             <p>
                 <button onclick='start()'>播放</button>
                 <button onclick='pause()'>暂停</button>
             </p>
         </section>

         <!-- 尾部 -->
         <footer>

         </footer>
     </div>
 </body>
 <script>
 //找到视频对象
 vid=document.getElementById('vid');

 //开始
 function start(){
     vid.play();
 }

 //暂停
 function pause(){
     vid.pause();
 }
 </script>
 </html>