<video> 標簽
<video> 允許你輕松地嵌入一段視頻。一個簡單的例子如下:
<video id="video" controls autoplay>
<source src="http://localhost:8080/img/hmbb.mp4"/>
您的瀏覽器不支持 video 標簽。
</video>
在標簽中 的 source 可以指定多種類型的媒體內容。
媒體文件的內容
像 MP3、MP4、WebM 這些 視頻格式,定義了構成媒體文件的音頻軌道和視頻軌道的儲存結構,其中還包含描述這個媒體文件的元數據,以及用于編碼的編碼譯碼器等等。
比如:一個格式為 WebM 的電影包含了
- 視頻軌道
- 音頻軌道
- 和文本軌道
其中視頻軌道包含一個主視頻軌道和一個可選的 Angle 軌道;
音頻軌道包含英語和西班牙語的音頻軌道,還有一個英語評論的音頻軌道;
文字軌道包含英語和西班牙語的字幕軌道,如下圖所示:
image.png
編解碼器
音頻和視頻軌道以適合的格式保存。音頻軌道和視頻軌道使用不同的格式。
不同的瀏覽器支持不同的視頻和音頻格式, 例如:
- WebM 容器通常包括了 Opus 或 Vorbis 音頻和 VP8/VP9 視頻。這在所有的現代瀏覽器中都支持,除了他們的老版本。
- MP4 容器通常包括 AAC 以及 MP3 音頻和 H.264 視頻。這在所有的現代瀏覽器中都支持,還有 Internet Explorer。
- 老式的 Ogg 容器往往支持 Ogg Vorbis 音頻和 Ogg Theora 視頻。主要在 Firefox 和 Chrome 當中支持,不過這個容器已經被更強大的 WebM 容器所取代
如何使用
一般來說,在頁面里簽入 <video>標簽,結合一些播放器來使用。比如 https://github.com/bilibili/flv.js 等。
END
參考資料
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content