我自己有時會播著Youtube的播放清單然後做自己事,播個一個小時多就會跳出來「影片已暫停,要繼續觀賞嗎?」,原本覺得還好頂多畫面切過去把對話方塊按掉,但是接著再過一小時多他有跳出來就開始覺得很煩,所以我就在Google搜尋看看也沒有人寫過對付這東西的擴充套件或腳本,很快就找到一個名稱叫
YoutubeNonStop的擴充套件而且還是開源的。
因為好奇功能是怎麼實現的,所以我讀了他的原始碼,讀完後發現有點複雜,他會觀察整個網頁、播放器控制介面(播放按鈕與音量調整的那一條,主要是觀察有沒有隱藏,因為播放時會自動隱藏)、那個萬惡的對話方塊是否有變化還有用戶最後一次用滑鼠或鍵盤操作Youtube網頁是甚麼時候。
觀察用戶最的輸入,是用在如果距離上次操作過了一段時間就會主動檢查影片使否暫停,若暫停了就嘗試讓播放器繼續放。
觀察播放器控制介面,是用在若播放器控制介面發生變化且Youtube頁面看不見了(可能是視窗最小化了又或是切去其他分頁了)就主動檢查影片使否暫停,若暫停了就嘗試讓播放器繼續放。
觀察對話方塊,是用在當那個萬惡的對話方塊存在且顯示時把它關掉,另外關掉後對話方塊是處於隱藏狀態的。
最後會觀察整個網頁是因為Youtube並不是所有頁面都有播放器,還有對話方塊也不是一開始就存在,所以整個網頁發生變化時就會去嘗試觀察播放器與對話方塊,如果都觀察到了就結束觀察整個網頁。
因為Youtube播放影片是用html5的video標籤且現在的瀏覽器大多都支援html5,所以我就採用監聽video的onpause事件來得知影片是否暫停,如果暫停了就去看對話方塊是否出現了然後把它關掉(因為當網頁不可見時關掉對話方塊會卡住,所以先改成忽略對話方塊然後繼續播放)。
然後我不會去觀察整個網頁,因為Youtube是用ajax來實現跳轉畫面,所以我就去採用去改寫發送ajax的request函數,讓他會在ajax完成request後改寫某個html元素的attributeb,然後我會去觀察該html元素的attributeb,當該html元素的attributeb有變動(也就是ajax的request完成,也代表著畫面跳轉完成)我就嘗試去監聽video的onpause事件,如果監聽成功就結束觀察html元素
整個程式碼只有快一百行。