18、HTML5 Video（視頻）和 audio（音頻）
阿新 • • 發佈：2018-03-11
float run 加載 clas opera ada titles tran 允許
video標簽概述：
<video> 元素提供了 播放、暫停和音量控件來控制視頻。
同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。
<video>元素還支持字幕元素<track>。
瀏覽器對video標簽支持的視屏格式：
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | 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 文件
添加視頻，應在前端目錄下添加video文件夾，並將視頻文件存放在該目錄下：
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
<track>字幕效果：
| 屬性 | 值 | 描述 |
|---|---|---|
| default | default | 規定該軌道是默認的。如果用戶沒有選擇任何軌道，則使用默認軌道。 |
| kind | captions chapters descriptions metadata subtitles |
規定文本軌道的文本類型。 |
| label | text | 規定文本軌道的標簽和標題。 |
| src | URL | 必需的。規定軌道文件的 URL。 |
| srclang | language_code | 規定軌道文本數據的語言。如果 kind 屬性值是 "subtitles"，則該屬性是必需的。 |
audio 音頻概述：
control 屬性供添加播放、暫停和音量控件。
在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件
音頻格式的MIME類型：
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
HTML5 <video> - 使用 DOM 進行控制
HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。
<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.
其中的方法用於播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
更多參考請查看 HTML5 Audio/Video DOM 參考手冊
18、HTML5 Video（視頻）和 audio（音頻）