影片書籤管理器 – 高效率操控影片

Introduction

因為工作上的關係,最近經常接觸到 Chrome 擴充功能,其中比較獨特又實用的,應該就是這個影片書籤管理器。

會有這個發想還是跟學英文有關(之前寫過的工具好像都是跟學英文相關),因為在網路上用美劇或TED之類的 Youtube 學英文,最需要的就是:

  1. 需要記錄某些台詞的時間點
  2. 同一句話要不斷重複聽好幾次

最一開始只能土法煉鋼,滑鼠停在進度條上每隔幾秒就點一下,而且一點點移動都有可能跑到下一句台詞去,覺得不勝其擾。雖然電腦上的影片播放軟體有提供書籤、AB循環播放的功能,但又懶得把每一部影片都載下來,於是才認真覺得這是一個需求的突破口。

Do it!

由於目標是在所有網頁上的 HTML5 影片,因此我不太可能寫一個網站把我想要的影片讀進來處理,於是剛好想到 Chrome 本身的擴充功能,幾乎完全吻合這個需求需要的背景。

我參考了一個很厲害,有一千多顆星星的擴充功能,因為他跟我目前要寫的東西非常像,它主要是控制影片的加減速,我可以從中得到一些操控 HTML5 video 元素的想法。

最後上架的版本有以下功能:

  1. 直接在影片上新增、移除、移動到書籤
  2. 直接在影片上設定、移除 AB 循環範圍
  3. 影片加減速、影片循環、隱藏書籤等附加功能
  4. 以上功能全部都可以由鍵盤完成,並可指定順手的快捷鍵

Demo

video bookmarker demo

Chrome extensionView on Github

What’s the Difficulty?

最困擾我的一樣是 UX (使用者體驗)的問題。

我腦中想的是像電腦的影片播放器,它會直接把書籤顯示在進度條上,使用者一眼就可以看到書籤加在哪個位置,要移除也是滑鼠一拉就完成了。但這件事情要在 web video 就困難了許多,難點在於

「我該怎麼自動找到每一個網站的影片進度條在哪?」

其實這個問題只要縮小支援範圍,比如只限 Youtube 使用,就可以很簡單地解決,因為 Youtube 的進度條過了一萬年還是在那。但我的夢作得很大,我想要所有使用 HTML5 影片的網站都能使用這個功能,導致我在這個問題上一直卡著。

當然我想過一些折衷解法,比如不要把書籤顯示在進度條,而是在影片的正下方模擬一個自己的進度條,使用者一樣可以看到自己加進去的書籤。但一方面每個網站播放器的進度條都不一樣,會導致畫面上有兩個不一樣長度的進度條,顯得讓人困惑也難以對應書籤真正的位置;另一方面,如果使用者開啟全螢幕來看影片,就無法看到書籤了。

最後我折衷再折衷,如果不能吃到 100% 的市場,起碼大塊的餅要吃到,於是我分別跑到 Youtube、Vimeo、bilibili、niconico 這四個大家看影片大宗的網站,一個一個找他們的進度條在哪裡。最後客製出來這四個網站的影片可以直接在進度條上看到書籤,而其他網站(或者是透過嵌入方式的影片),目前還不支援顯示書籤,雖然看不到,但功能還是健全的哦!

Note

我一直都很喜歡寫程式解決生活上遇到的問題,尤其是生產力方面的阻礙,這讓我對於花費太多時間的瓶頸特別敏感,經常逛臉書、滑網頁到一半,突然就一個 idea 掉下來,我會靜靜地讓這個 idea 在腦袋裡轉一下,接著動手去找找看有沒有人寫過類似的工具,如果沒有,那這就會是個很好的題材,因為解決人們生活上、工作上的痛點,一直是我非常感興趣的。而今天這個擴充功能,就是我前一個禮拜突然靈感一來,就火速把它生出來。

當然不可否認,這支程式還有很多問題,不管是測試完整度、功能實用性、UI 美觀等,待改進的地方很多,所以我放上了 Github,歡迎大家一起討論或修改,我非常樂見大家一起努力,讓一個產品更趨於完美。

Reference

videospeed
video_bookmarker