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

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

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

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

https://greasyfork.org/scripts/381682

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

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

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

其他快捷鍵可以通過下載的介紹頁面找到介紹。記住快捷鍵，你會(huì)發(fā)現(xiàn)這款插件超好用！

特色功能

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

李子柒今天更新了哦~！

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

左上角可以逐幀播放

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

Shift+P 畫中畫

#科技V計(jì)劃# #

ouku HTML5 播放器擴(kuò)展 —— 告別 flash 和廣告

部分功能說明

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

其他瀏覽器？

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

使用組件

flv.js
ABPlayer-bilibili-ver（有改動(dòng)）

項(xiàng)目地址

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

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

然而，設(shè)計(jì)師總是與眾不同，修改 Audio 默認(rèn)樣式已成常態(tài)。

本文將圍繞如何通過 CSS 來修改 HTML5 的默認(rèn)樣式，撇開 JS 實(shí)現(xiàn)方式。當(dāng)然，后續(xù)還會(huì)推出一篇文章：打造與眾不同的 Audio 播放器，先占個(gè)坑吧！

一、Audio 結(jié)構(gòu)

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

二、屬性一覽

autoplay：如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
loop：如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開始播放。
preload：如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，則忽略該屬性。
src：要播放的音頻的 URL。

三、兼容性

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

四、設(shè)計(jì)師的要求

先來看看設(shè)計(jì)稿：

再來看看 HTML5 原生 Audio：

你可能發(fā)現(xiàn)了問題：要么改樣式，要么重寫音頻播放器。

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

五、問題窘境

當(dāng)我們打開開發(fā)者工具審查 Audio 元素的時(shí)候，除了 Audio 標(biāo)簽，什么也看不到。

這時(shí)候，肯定有人想這么改：

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

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

六、最終方案

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

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

1.控制面板

2.音量

3.播放按鈕

4.時(shí)間軸

5.當(dāng)前時(shí)間／剩余時(shí)間

6.前進(jìn)／后退

7.全屏

...

還有很多，這里就不列舉了。找到這些屬性對(duì)應(yīng)的內(nèi)置 CSS 類，就可以隨心所欲的定制了。

七、并不完美

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

播放／暫停按鈕不能替換；
播放進(jìn)度 slider 和聲音 slider 無法修改樣式；

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

八、繼續(xù)探索

首先，突破點(diǎn)在于能否找到一個(gè) pause 的樣式類，來解決上述問題一。

其次，play 和 pause 如何觸發(fā)圖片互換。

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

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

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

我們繼續(xù)看看問題二：播放進(jìn)度 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知識(shí)點(diǎn)總結(jié)，淺顯易懂適合入門新手
下一篇：HTML 表格

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商