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>