原文鏈接:我寫了一款谷歌瀏覽器插件
一款可隨意調節百度網盤在線播放視頻速度的谷歌瀏覽器插件。
前言
最近一直在看百度雲盤上的網課,當想倍速播放的時候卻發現沒有這個功能。然后就在網上找到了一段可以調整播放速度的 JS 代碼。
//調整播放速度為 1.5xvideojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5)
將這段代碼拷貝到瀏覽器的 Console 中按下回車鍵確實可以使用。但是當我用了兩次之后就發現,實在受不了這種重復而且相當不靈活的操作。還有一個問題是計算機相關專業的大多數同學會使用這種辦法,但是應該還有很大一部分同學並不知道怎么用。然后我就考慮自己做個谷歌瀏覽器插件來靈活的調節播放速度,不但可以方便自己也能夠方便他人。盡管我當時還不知道瀏覽器插件的工作機制,但是看到各種各樣的插件都實現了相當復雜的功能后,我認為技術上應該是可以的。那么接下來就要找谷歌瀏覽器插件開發文檔去學習了。
展示
一個半小時后做出來了特別low的 V1.0.1 版本,下面紅框中的部分為插件面板。
現在是可以用了,但是有輕微強迫症的我想再完善一下。從產品體驗上來說這一版本是很差勁的,因為調節一次速度既需要鍵盤又需要鼠標。一個好的產品使用起來怎么可能這么麻煩,能一只手完成的事情絕不用兩只手來做。
又半個小時后,V1.0.2 出來了,下面是視頻演示(視頻大約9M,有聲音)
(視頻無法添加,觀看請點擊這里 )
原理
為插件面板上的進度條綁定事件,當滑動時將數值傳遞給后台的 controlVideo.js 文件.然后將數值與上述關鍵代碼拼接后插入到當前頁面中,視頻播放速度就會相應變化。當然還有許多細節方面的處理,包括當再次打開插件面板時會將當前視頻播放速度的大小體現在進度條上等。
(注:有想自己做插件的同學可以把這款插件當作Demo,不是因為代碼寫的有多好,而是程序中用到的方法應該適用於大多數簡單插件的開發。)
下載
- 方式一:在瀏覽器中訪問https://github.com/chxcode/speeded_video_for_Baidu_Netdisk,進行下載。請不要“吝嗇”你的 star 喔!(點擊文末 閱讀原文 可以直接打開網址)
- 方式二:在公眾號(Worldhello)后台回復:290
安裝使用
- 將下載的文件解壓。
- 打開谷歌瀏覽器,點擊窗口右上角的三個小點,然后點擊「更多工具」,接着點擊「擴展程序」。這時你在界面上應該可以看到「加載已解壓的擴展程序」按鈕(如果看不到就把右上角的「開發者模式」打開,如果打開之后仍然看不到那就打開百度,搜索“附近有哪些眼科醫院?”哦,不行!這種問題還是問谷歌比較安全一些。如果發現谷歌不能用,那你一定沒看我這篇文章 【推薦】不翻牆如何免費使用谷歌搜索引擎?… ...)。
- 看到「加載已解壓的擴展程序」后然后點擊它,在彈出的窗口中選擇你剛剛解壓后的文件。
(注:解壓后的文件就不要動了,一旦刪除或移動位置那么谷歌瀏覽器中的插件將不能使用。所以一開始的時候就應該放置一個比較“安全”的地方。) - 使用方法,參考上面演示視頻即可。