近年來互聯網的發展越來越快，技術水平、服務質量不斷提升，用戶體驗的要求也越來越高。對于視頻觀看體驗，用戶往往會因為數秒的等待時間或頻繁的卡頓而放棄觀看內容。如何提高用戶內容消費的能力和體驗成為了各大視頻內容平臺亟待解決的問題。
B 站于 2018 年進行了一次基于"video first"的年度性優化，針對用戶體驗的關鍵指標進行性能優化改造。包括交互設計改版、基于 MPEG-DASH 協議的視頻體驗優化、播放頁秒開、彈幕體驗優化等方面。希望為面對改善用戶體驗和性能的與會者提供參考。
下面是GMTC全球大前端技術大會對嗶哩嗶哩資深前端工程師譚兆歆老師的采訪，對于視頻體驗優化方向感興趣的同學可以了解一下：
InfoQ：譚老師你好，可以先簡單的介紹一下你自己和目前所負責的工作嗎？
譚兆歆：我在 B站任職五年，從 2016年開始負責 Web播放器相關的工作。包括初版 HTML5 播放器的開發和灰度上線，以及相關的業務規劃和技術調研。另外我還負責彈幕相關的技術實現，比如大家比較感興趣的蒙版彈幕。
InfoQ：我看你提到說 2018 年的時候 B 站做了一次基于"video first"的年度性優化，針對用戶體驗的關鍵指標進行性能優化改造，具體有哪些優化的點呢，可否舉例說明？
譚兆歆：我們主要針對三個用戶體驗的關鍵指標進行優化改造：用戶進入頁面到視頻準備好播放的時間、視頻播放卡頓率、視頻播放錯誤率。比如為了降低視頻播放錯誤率，我們和視頻云的同學一起準備了多點備線和格式 策略，DASH格式視頻出現網絡錯誤時，我們會嘗試不同地區的備線，然后再嘗試不同格式比如切換 flv格式的視
頻，盡量保證用戶體驗總是正常的狀態。
InfoQ：對于播放頁“秒開”，你們做了哪些技術優化？
譚兆歆：我們對原有播放流程進行了非常大幅度的改動，將視頻播放提到了優先級最高的位置，比如從第一個請求開始逐個分析，看看哪些請求是對播放頁播放來說必需優先的小程序彈幕設置時間，將大量非必須模塊都進行了優化或延后處理。另外我們還使用了各種預加載和預取的方式小程序彈幕設置時間，具體可以期待一下我的分享~
InfoQ：你們做了哪些播放體驗的優化讓清晰度可以無縫切換、卡頓率下 降 60%呢？
譚兆歆：B 站去年調研并且上線了一項重要技術：基于 MPEG?DASH 的視頻播放。這種播放標準能夠讓視頻分片更加靈活，對于網絡波動的情況兼容性更高。比如你處于自動的清晰度，網絡好的時候會保持你所能觀看的最高清晰度，網絡有波動的時候會降低清晰度保證流暢播放，由于 DASH 標準不同清晰度的分片是對齊的，所以切換是完全無縫的，不會產生卡頓的體驗。
InfoQ：B 站的彈幕蒙版這項技術跟市面上其他 APP 的彈幕功能都不一樣， 是一個什么樣的契機讓你們希望做出這樣的技術嘗試呢？
譚兆歆：這還是比較感謝 B 站這樣一個特殊的環境和我們出色的腦洞超大的小伙伴吧。之前我們一直是使用彈幕透明度和密度控制等設置來彈幕遮擋問題的，然后我們注意到了 CSS3的 mask?image屬性是能夠用蒙版的方式實現彈幕防遮擋的。產品的行動力很高，立刻聚集了人工智能和前后端的小伙伴，在去年六一的時候把這樣一件“玩具”帶 給了 B 站的小伙伴。
（智能防遮擋彈幕）
InfoQ：可以簡單的講講彈幕蒙版到底是一個什么樣的實現原理嗎？
譚兆歆：彈幕蒙版是通過機器學習，將視頻中的人物、動物等特征標識出來，然后輸出為點 map 或路徑的形式供端上處理。比如在 Web 端是輸出為數個多邊形路徑，多邊形部分則是人像或動物這種不被遮擋的區域，使用 CSS3 的 mask?image 屬性在彈幕層繪制 格式的 svg 圖形來達到防遮擋的效果。數據的下發在點直播有所不同， 點播是異步請求的數據文件，直播則需要和流同步下發。
InfoQ：問一個有意思的問題，對于 B 站這樣濃厚 ACG氛圍公司的技術團隊，我們很是好奇程序員們的工作方式會有什么不同嗎？
譚兆歆：B 站的工作環境是比較有特點的，可能打開電梯映入眼簾的就是擺出高難度姿勢的 JOJO 主角團們。一些同事的桌上也堆滿了手辦和模型，這樣會讓他們感覺更舒適， 工作效率更高。
另外我們有很多項目的命名也透露著 ACG 和 B 站文化的氣息，例如 金坷垃、大力、Fate 英靈等等。熟悉 ACG 和 B 站文化的同學一上手就會對這些項目產生好感。
嘉賓介紹：
譚兆歆， 資深前端工程師。在 B 站任職五年，現負責 Web 播放相關工作，即 HTML5 播放器及播放內核開發、彈幕支持和特效研究、用戶體驗優化方面。參與的項目有 HTML5 播放器開發及在 B 站的全面上線、DASH 內核調研開發、蒙板彈幕、播放頁改版與秒開等。
活動推薦：
除上述議題之外，在GMTC全球大前端技術大會上還有關于前端框架、工程化、性能優化、跨平臺、小程序、、移動 AI、前端團隊管理等內容的 60+干貨技術案例分享。