視頻

視頻做爲一種重要的媒體形態，在網站中使用能夠提升網站內容的豐富性，但同時對網絡加載來講也是一個負擔。因此會出現一些以下針對 Web 上視頻的優化。git

1. 使用合適的視頻格式

與圖片相似，不一樣的視頻編碼格式，其數據大小也大都不一樣。目前在 HTML5 Video 中經常使用的格式爲 MPEG-4。除了 MPEG-4 以外，還支持一種叫 WebM 的新的視頻格式。github

WebM(VP9) 相較於 MPEG-4(x264) 來講會更小，不過兼容性(2021.6.5)相對來講也較差。所以能夠考慮在 <video> 中指定多個 <source>。web

<video>
    <source src="/static/video/me.webm" type="video/webm">
    <source src="/static/video/me.mp4" type="video/mp4">
</video>
複製代碼

此外，使用 AV1 編碼^[1]會比 VP9(WebM) 小約30%，比 x264(MPEG-4) 小約45-50%^[2]。瀏覽器

2. 視頻壓縮

對於視頻，咱們也能夠進行有損與無損壓縮，一樣能夠有效減小視頻大小。下面列舉了一些經常使用的工具：緩存

3. 移除沒必要要的音軌信息

在上一節中咱們提到，可使用 <video> 代替 GIF 來實現動畫，同時體積也會更小。因爲在這種場景下自己就是不須要聲音的，因此咱們會將 <video> 設置爲 muted。性能優化

那麼，既然不須要聲音，咱們是否是能夠直接移除掉音軌的數據？是的，這樣作也會幫助進一步縮減視頻的體積。markdown

4. 使用「流」

嘗試讓瀏覽器使用「流」或者小分片的方式來播放你的視頻，例如經常使用的 HLS (HTTP Live Streaming) 技術。簡單來講，使用 HLS 技術，你的視頻會包含一個 .m3u8 的索引文件和一系列包含播放內容的 .ts 分片。瀏覽器經過不斷下載一小段的分片來進行視頻播放，避免了完整視頻下載的流量消耗。網絡

你也能夠嘗試使用 MPEG-DASH^[3] 這個技術，目前開源社區也有一個配套的客戶端實現。前端性能

5. 移除沒必要要的視頻

對於不須要使用視頻的場景，最好的優化方法就是去掉視頻。例如在小屏幕上，你能夠經過媒體查詢來避免下載視頻：

@media screen and (max-width: 650px) {
    #hero-video {
        display: none;
    }
}
複製代碼

關於視頻的優化這裏只介紹了一些基本的手段，但對於一個重度的視頻網站來講，會包含例如播放器 SDK 的優化、數據預取、碼率自適應等更多的優化內容。參考資料包含 B 站的一個關於視頻體驗優化的分享^[4]，感興趣的同窗能夠進一步閱讀下。

此外，雖然上面介紹了一些視頻處理的軟件工具，可是若是有更高的定製化或集成需求，建議使用 FFmpeg^[5] 或相關的庫來處理。

喜歡的朋友歡迎關注個人博客或 RSS 訂閱。

「性能優化」系列內容

帶你全面掌握前端性能優化 🚀
如何利用緩存減小遠程請求？
如何加快請求速度？
如何加速頁面解析與處理？
靜態資源優化的整體思路是什麼？
1. 如何針對 JavaScript 進行性能優化？
2. 如何針對 CSS 進行性能優化？
3. 圖片雖好，但也會帶來性能問題
4. 字體也須要性能優化麼？
5. 如何針對視頻進行性能優化？（本文）
🔜 如何避免運行時的性能問題？
如何經過預加載來提高性能？
尾聲

目前內容已所有更新至 ✨ fe-performance-journey ✨ 倉庫中，陸續會將內容同步到掘金上。若是但願儘快閱讀相關內容，也能夠直接去該倉庫中瀏覽。

【前端性能優化指南】5.5 - 優化你的視頻資源

視頻