HTML 5 視頻
- 艷芬
- 274閱讀
- 2020.08.27
許多時髦的網站都提供視頻。HTML5 提供了展示視頻的標準。
直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
視頻格式
當前，video 元素支持三種視頻格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
controls 屬性供添加播放、暫停和音量控件。
包含寬度和高度屬性也是不錯的主意。
之間插入的內容是供不支持 video 元素的瀏覽器顯示的：
實例
上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。
要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
實例
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| preload | preload |
如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。 如果使用 "autoplay"，則忽略該屬性。 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
相關知識