HTML5Video標籤詳解

黄舟原創: 2017-05-19 17:24:494495瀏覽

在前面的小強的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標籤詳解

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. H5 video标签只能放声音不能放视频的解决办法

4. 分享一个video标签无法播放mp4的问题以及解决方案

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：小強的HTML5行動開發之路（13）－HTML5中的全域屬性下一篇：小強的HTML5行動開發之路（13）－HTML5中的全域屬性

看更多

HTML5Video標籤詳解

相關文章