HTML5Video標籤詳解-H5教程-PHP中文網

HTML5Video標籤詳解

黄舟

發布： 2017-05-19 17:24:49

原創

4468 人瀏覽過

在前面的小強的HTML5行動開發之路（5）－製作一個漂亮的影片播放器中製作了一個非常好用的播放器，有的朋友對其中的原理還不是很了解，這篇文章將在前一篇的基礎上深入剖析

一、使用技巧

在HTML5中可以使用

<video src="move.mp4"></video>

登入後複製

video標籤中有很多屬性，例如controls屬性可以控制是否有控制台。

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

登入後複製

從上面的視頻格式中我們可以看到不同的瀏覽器支援不同的視頻格式，這樣我們可以採用標籤指定多種格式的視頻，默認情況下瀏覽器會自動啟動下載文件來確定其類型。

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

登入後複製

二、Video標籤的屬性

video標籤支援HTML5中的全域屬性與事件屬性

特有屬性如下：

屬性描述

autoplay autoplay 若有該屬性，則視訊在就緒後馬上播放。

controls controls 如果出現此屬性，則向使用者顯示控制項，例如播放按鈕。

height pixels 設定視訊播放器的高度。

loop loop 若有此屬性，且當媒介檔案完成播放後再次開始播放。

preload preload

如果出現此屬性，則視訊在頁面載入時載入，並預備播放。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的影片的 URL。

width pixels 設定視訊播放器的寬度。

大多數瀏覽器支援的視訊方法、屬性事件

方法屬性 currentSrc play

pause() videoWidth progress

canPlay duration timeupdate timeupdate ended ended

error abort

paused empty

muted emptied

seeking waiting

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p 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://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        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>

登入後複製

HTML5Video標籤詳解