HTML5視頻video開發demo例子

yg3n 9年前發布 | 32K 次閱讀 HTML5 前端技術

HTML5的video可以使用DOM的方式進行控制。video元素同樣擁有方法、屬性和事件。
比如它擁有的方法用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。
其中的 DOM 事件能夠通知您，比方說，video元素開始播放、已暫停，已停止，等等。
廢話少說了，看下面的實例吧。

為視頻創建簡單的播放/暫停以及調整尺寸控件： 

    <!DOCTYPE html>   
    <html>   
    <body>   
    歡迎大家關注我的博客！如有疑問,請加QQ群：135430763共同學習！  
    <div style="text-align:center;">  
      <button onclick="playPause()">播放/暫停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />  
        <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />  
       你的瀏覽器不支持html5的video標簽  
      </video>  
    </div>  
    <script type="text/javascript">  
        var myVideo=document.getElementById("video1");  
        function playPause(){   
            if (myVideo.paused)   
                myVideo.play();   
            else   
                myVideo.pause();   
        }   
        function makeBig(){   
            myVideo.width=560;   
        }   
        function makeSmall(){   
            myVideo.width=320;   
        }   
        function makeNormal(){   
            myVideo.width=420;   
        }   
    </script>   
    </body>   
    </html>

 本文由用戶 yg3n 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！