HTML5視頻播放器-油猴腳本推薦

眾多 Chrome 瀏覽器擴展中，有一款必推插件它的中文名字叫油猴，被稱為最強的瀏覽器插件，但更多人稱它為神器！油猴 (Tampermonkey) ，這款擴展本身支持 Chrome、Firefox、Microsoft Edge、Safari 等多家瀏覽器平臺，而且分為 Stable、Beta 兩條產品線，適應不同的用戶需求。

用戶在安裝了 Tampermonkey 擴展后，可以在 Greasy Fork、 OpenUserJS 網站上找到各種實用腳本，按需安裝好腳本后，可為網站添加新的功能，有些能使網站的界面更加易用，有些則能隱藏網站上煩人的部分內容。

今天給大家推薦一款N 合一的視頻播放增強腳本 h5player，用一款腳本就可以為視頻網站的在線視頻播放器添加多項便捷的控制功能，包括倍速播放、畫中畫、網頁全屏、截圖，以及視頻畫質調整（調節亮度、飽和度、對比度）等。

https://greasyfork.org/scripts/381682

h5player 下載鏈接： https://greasyfork.org/scripts/381682

H5player 腳本支持包括 Bilibili、愛奇藝、QQ音樂MV頻道、微博視頻頻道、優酷、搜狐等多家國內網站，剛開始安裝好這款腳本，可能用戶還察覺不到播放器控制按鈕的任何變化，其實h5player 腳本是通過豐富的快捷鍵組合來實現各種功能，在視頻播放器頁面中找不到相應的按鈕入口。下面是我整理的比較常用的快捷鍵列表：

ctrl+\ 快捷鍵是否全網頁可用，默認true
Ctrl+space 禁用/啟用該播放插件
→ 快進5秒
← 后退5秒
Ctrl+→ 快進30秒
Ctrl+← 后退30秒
↑ 音量升高 10%
↓ 音量降低 10%
Ctrl+↑ 音量升高 20%
Ctrl+↓ 音量降低 20%
C 加速播放 +0.1
X 減速播放 -0.1

其他快捷鍵可以通過下載的介紹頁面找到介紹。記住快捷鍵，你會發現這款插件超好用！

特色功能

比如針對倍速播放，h5player 腳本提供了多達十幾倍甚至數十倍的速度播放視頻，通過 C、X 快捷鍵以 0.1 的速度逐漸加速或者減速，腳本還能夠自動記錄上一次調整好的播放速度。

李子柒今天更新了哦~！

h5player 腳本還提供了逐幀控制的功能，通過 D、F 控制上下一幀的播放，可以找到質量最佳的一幀后，再去截圖獲得最好的視頻畫面，甚至通過快捷鍵為當前畫面加模糊、調整對比度/色相等畫質控制，實現不一樣的截圖效果。

左上角可以逐幀播放

視頻畫中畫功能（shift+P）可以在頁面滾動時，以小窗口的形式方便用戶觀看視頻，h5player 腳本則讓允許通過快捷鍵快速實現畫中畫效果，即使切換至非當前標簽頁時，還能夠以畫中畫形式繼續觀看視頻，而且支持拖拽的改變大小！

Shift+P 畫中畫

#科技V計劃# #

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 樣式修改，乍一看，好像和設計出入不大。然而我們碰到了更細節的問題，具體如下：

播放／暫停按鈕不能替換；
播放進度 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！

在線咨詢

上一篇：史上最全的HTML、CSS知識點總結，淺顯易懂適合入門新手
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商