兩倍速看 FaceBook 影片

以下使用 Google Chrome 瀏覽器示範，其他瀏覽器能不能用我不清楚。

先說結論。可以打開瀏覽器開發者工具，在 console 使用以下指令。

$$('video').forEach(x => x.playbackRate = 2)

“person holding GoPro HERO” by Jakob Owens on Unsplash

起源

今天我用電腦看 FB 影片，發現他似乎沒有內建按鈕可以像 YouTube 一樣簡單的變成兩倍速，對於看習慣兩倍速影片的我實在感到有些不自在。

今天要介紹一個方法可以讓你用兩倍速 (或者其他倍速) 看 FB 影片。事實上，不管是不是用 FB ，只要你的播放器是使用 html5 的規格實現的，就可以使用下列方法。

原理解釋

在網頁中，每一個元素可以看成是一個 html 的 tag ，例如影片就是一個 html 的 tag。大概長的下面這樣。

<video> ... </video>

這個元素代表的就是影片，我們通常會利用 JavaScript 來操作 html 元素。例如把影片變成兩倍速，就是一個例子。

所以我們希望可以執行一段小小的 JavaScript 程式碼，來達成兩倍速這件事。例如想辦法讓瀏覽器執行這段。

video.playbackRate = 2

實際操作

我們要做的事情有兩個

• 把影片選起來
• 把選起來的影片速度設成 2

把影片選起來

我們打開 Chrome devtools，或是按右鍵，檢查。在 console 標籤下可能會看到類似下面的畫面。

Facebook 打開 Chrome devtools 後顯示的畫面

看起來很可怕，他說如果有人叫你在上面貼上東西的話，很有可能是要試圖要你植入一些惡意的程式碼。因為我等一下就會叫你在上面貼東西，所以在你真正貼上之前，也請你評估一下我叫你貼的程式碼，是否合乎安全後再使用。

我們按下圖片中左上角的選取工具，按下之後選取工具會變成藍色表示你已經按下去了，再到網頁中影片上面點一下，就可以把他選起來。在選的過程中，你會發現滑鼠移動到影片上方時，影片一整個變藍藍的反白，別害怕，這表示你選的真的是影片，看看那紫色的字寫著 video 就是了。

到這一步只要按下滑鼠左鍵成功選取影片了

把選起來的影片速度設成 2

接下來，在剛剛叫出的 devtools 的 console 裡面貼上下列 JavaScript 程式，把影片速度設定成 2 。

$0.playbackRate = 2

console 內的結果

理論上就可以成功了。

原則上， $0 指的是你剛剛選取的影片，而 playbackRate 指的是播放速度。更詳細的說明可以參考 Command Line 。

一定要先用滑鼠選影片嗎

我到 vimeo 上面點影片，想要用相同的手法達到兩倍速的效果，但是卻失敗，因為 vimeo 影片前面有個 div 元素擋著， video 元素被擋在後面滑鼠選不到。這導致我思考有沒有不用滑鼠選取的方法。

原則上要有目標影片，才能針對他的速度 (playbackRate) 調整。如果你運氣很好，剛好這個網頁只有唯一一個 video tag ，那你可以試試看這段程式碼貼到 console 裡面。這段程式會選擇他第一個看到的 video 來調整速度。基本上只是拿 $$('video')[0] 代替之前看到的 $0 。而 $$('video') 會選出所有的 video 元素，把他們收錄成一個 list ， [0] 則是表示我們選的是這個 list 中的第一個元素。如果剛好整個網頁中只有一部影片，那以下這段肯定可以選到你正在看的那一個影片。

$$('video')[0].playbackRate = 2

如果網頁上有多個影片的話，可以使用以下指令。

$$(‘video’).forEach(x => x.playbackRate = 2)