ouku HTML5 播放器擴展 —— 告別 flash 和廣告

部分功能說明

• 清晰度切換位于播放器左下角，采用智能記憶模式
• （如一個視頻有 標 高 超，點了高后會記住高清，但是點超后會清除，如果進入一個有原畫的會選擇原畫（最高清晰度））
• 彈幕開關、設置、屏蔽，播放器音量均會自動記憶
• 含有多個音頻語言的視頻可以在右鍵菜單中切換，同類劇集間切換時臨時記憶所選語言
• 多個語言的視頻中，選擇的語言為臨時記憶，在劇集內切換時保留，打開其他沒有同種語言的視頻會丟棄已記憶語言
• 在視頻播放器下方功能區中，下載按鈕現在正如其名，含有下載功能
• 播放器各項設置現已整合進側欄，通過右下按鈕開啟

其他瀏覽器？

• Safari擴展沒有跨域特權，無法獲取視頻地址及正常播放
• Edge擴展整體殘缺，無法可靠使用

使用組件

• flv.js
• ABPlayer-bilibili-ver（有改動）

項目地址

https://github.com/esterTion/Youku-HTML5-Player

所周知，HTML5 已經可以很好的支持 Audio 和 Vedio 了，我們可以方便的在網頁添加多媒體控件。

然而，設計師總是與眾不同，修改 Audio 默認樣式已成常態。

本文將圍繞如何通過 CSS 來修改 HTML5 的默認樣式，撇開 JS 實現方式。當然，后續還會推出一篇文章：打造與眾不同的 Audio 播放器，先占個坑吧！

一、Audio 結構

Audio 的用法很簡單，插入下面的代碼，一個原生音頻播放器就完成了：

二、屬性一覽

• autoplay：如果出現該屬性，則音頻在就緒后馬上播放。
• controls：如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
• loop：如果出現該屬性，則每當音頻結束時重新開始播放。
• preload：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。
• src：要播放的音頻的 URL。

三、兼容性

從上圖可以看到，基本上所有瀏覽器都支持了 Audio 標簽，所以我們完全可以大膽的使用。

四、設計師的要求

先來看看設計稿：

再來看看 HTML5 原生 Audio：

你可能發現了問題：要么改樣式，要么重寫音頻播放器。

有沒有一種代價最小，見效又快的方式呢？

五、問題窘境

當我們打開開發者工具審查 Audio 元素的時候，除了 Audio 標簽，什么也看不到。

這時候，肯定有人想這么改：

然而，并沒有什么作用，一切照舊。

那么問題來了，如果只通過修改樣式，能不能達到修改音頻播放器的外觀的功能呢？

六、最終方案

答案是肯定的，我們來覆寫 Audio 內置的一些全局樣式，如：

我們羅列出了一些播放器可供修改的樣式屬性：

1.控制面板

2.音量

3.播放按鈕

4.時間軸

5.當前時間／剩余時間

6.前進／后退

7.全屏

...

還有很多，這里就不列舉了。找到這些屬性對應的內置 CSS 類，就可以隨心所欲的定制了。

七、并不完美

按照上面 CSS 樣式修改，乍一看，好像和設計出入不大。然而我們碰到了更細節的問題，具體如下：

1. 播放／暫停 按鈕不能替換；
2. 播放進度 slider 和 聲音 slider 無法修改樣式；

怎么辦，這是個問題，距離設計師與眾不同的音頻播放器就差一步之遙了！

八、繼續探索

首先，突破點在于能否找到一個 pause 的樣式類，來解決上述問題一。

其次，play 和 pause 如何觸發圖片互換。

我們知道，通過 audio::-webkit-media-controls-play-button 可以重新定義播放按鈕的外觀樣式。

那么，是否存在：audio::-webkit-media-controls-paused-button 這個全局屬性呢？

Google 翻閱源碼，確實找到了 pause 操作。至此，問題一解決。

我們繼續看看問題二：播放進度 slider 和 聲音 slider 無法修改樣式

audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 background-color: initial;
 border: initial;
 color: inherit;
 margin: initial;
}

屬性是支持的，為何并沒有其作用呢？國外友人是這么回答的：

styling the timeline thumb through CSS doesn't seem possible at the moment.

看起來并沒有什么辦法，然后我們可以變通一下，既然改不了，那就遮蓋處理：

處理思路：先隱藏，通過濾鏡來覆寫樣式。

問題解決，工作完成，Perfect！