HTML5 Video(影片)

HTML5 Video(影片)

Web網站上的影片

#直到現在，仍然不存在一項旨在網頁上顯示視訊的標準。

今天，大多數影片是透過外掛程式（例如 Flash）來顯示的。然而，並非所有瀏覽器都擁有相同的插件。

HTML5 規定了一種透過 video 元素來包含影片的標準方法。

HTML5 (視頻)- 如何運作

如需在HTML5 中顯示視頻，您所有需要的是：

實例

<video width="320" height="240" controls>
  <source src="视频文件名称" type="视频格式">
  <source src="视频文件名称" type="视频格式">
您的浏览器不支持Video标签。
</video>

autoplay 屬性

實例

#設定為自動播放的video 元素：

<video controls="controls" autoplay="autoplay"> 
 <source src="视频文件名称" type="视频格式"> 
  <source src="视频文件名称" type="视频格式">
您的浏览器不支持Video标签。
</video>

#controls：    如果出現該屬性，則向使用者顯示控件，例如播放按鈕。    

<video> 元素提供了 播放、暫停和音量控制來控制影片。

同時<video> 元素元素也提供了 width 和 height 屬性控制影片的尺寸.如果設定的高度和寬度，所需的影片空間會在頁面載入時保留。 。如果沒有設定這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

<video> 與</video> 標籤之間插入的內容是提供給不支援 video 元素的瀏覽器顯示的。

<video> 元素支援多個 <source> 元素. <source> 元素可以連結不同的視訊檔案。

影片格式與瀏覽器的支援

目前， <video> 元素支援三種影片格式： MP4, WebM, 和Ogg:

瀏覽器                    MP4              WebM       1#                    NO                      NO    # #c       YES                      YES    

#Firefox         YES                      YES    

Safari                      YES                   NO                      NO    

Opera       YES (從Opera 25 起)      YES                      YES    

MP4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4檔案

WebM = 帶有VP8 視訊編碼和Vorbis 音訊編碼的WebM 檔案

Ogg = 帶有Theora 視訊編碼和Vorbis 音訊編碼的Ogg 檔案