[秘技] 永久隱藏播放條,影片截圖百分百


  •  
  •  
  •  
  •  

各位讀者好,希望這篇秘技之一冷能給你的生活帶來便利。「冷知識」是 oxymoron 呀 XD

在影音網站播放影片時,控制條(control bar)總是浮出來妨礙畫面完整

  它讓網友痛不欲生。在於被它擋到的邊邊角角必須裁切掉,多一道手序不打緊,被摧毀的訊息量,叫你我內心的那個小強......迫症患者無聲地淒然吶喊:這我絕不允許!。
  到底有什麼方法能隱藏它、或任何妨礙畫面完整的物件呢?
  科宅這篇文,教大家如何隨心所欲,專業的截圖。畫面不用心酸的只能抓一部分,我們要抓好,抓滿!每日一冷給你滿滿的大~平~台~

或許你是某位遊戲直播主的鐵粉,常常想保存每個心動的瞬間。

又或許你固定在某站追的動畫好有梗,讓你好想截圖起來,和朋友分享。

又或者某些影片裡壯闊的畫面實在高清夢幻又唯美,讓你好想設為桌面。

───原來,大家都是和科宅志趣相投的朋友呢。

那我們就,開始吧。

 

先假設大家都知道鍵盤上有一個按鍵叫「截取螢幕」,Print Screen (prt sc),大致上在右上角這個位置(紅圈圈)。

按下去之後,再打開圖片編輯軟體,例如每日一冷最喜歡、忠實好用的小畫家

在小畫家中按下「貼上」 → 一些塗塗畫畫 →「存檔」,就可以將剛才按下按鈕時的畫面保存。

※ 還不清楚?OK的,Google 搜尋「擷取螢幕」有更多教學。

_

這個基礎技能懂了還不夠,根據我身為截圖黨的豐富經驗,我們還有阻礙得搞定呢。具體來說是兩點:

壹、鎖定目標

每次都得在那邊痛苦的反覆暫停、退回、暫停......直到終於找到畫質最清晰、姿勢表情最正確的一幕,然後不小心按到播放又跑掉 Rrrrrrrrrrrrrrr......

貳、清理戰場

根本的問題是,雖然只要滑鼠不動,大部分網站的控制條就會自動隱藏,但一按暫停它就會不請自來地出現呀。不能暫停截圖,根本考驗反射速度。

 

無論 YouTube 還是我們的優酷,隨意窩還是 BiliBili,總有影片標題與控制條等一干狐群狗黨,佔據了畫面上下方,影片的可見部分硬生生被喀嚓掉兩條。接下來我們就來消滅控制條的暴政,拯救被迫犧牲的畫素們吧!

the bar

這條礙眼之物,怎麼讓它不見呢?

 

先來個但書,世界上聰明的人拿~麼~多~ 必然有人已經寫出功能強大的插件,自動化這項工作(例如 "You Clever" 這個 Chrome 插件 ←見電腦玩物站長的介紹)畢竟懶惰是人類進步的最大動力嘛。如此強大之物,會讓這篇文章的方法瞬間無用,寫文章的科宅自慚形穢,躲在牆角畫圈圈。

只是,我就是有這股「不想裝插件」的任性嘛,想用土法煉鋼的精神、靠完全基礎 vanilla 的工具搞定不也是種浪漫?不另外安裝東西,不只比較安全,也有可能在調查方法的過程中不小心學到一點額外的東西啊。

況且上述工具只適用於 YouTube。本文提供的方法,原則上跨平台,適當改裝仍多才多藝呢。

隨機一冷
英文裡香草 vanilla 意思是遊戲軟體(或其他東西)沒有經過改裝的。
典故來自於──冰淇淋。冰淇淋最常見的口味是香草不是嗎。

 

以下教學,影片截圖預設目標是 YouTube預設執行裝置是個人電腦

※解釋:別的網站需要調整,但原理一樣,下面某行程式碼修改後才適用。

廢話不多說,要完成超完美截圖,我們必須再學兩個簡單的快捷鍵功能。

你知道嗎?YouTube 可以逐格放映

在影片暫停時,

按一下鍵盤的ㄝ鍵(就是「 ,」或「<」符號)影片會倒退一格畫面;

按一下隔壁的ㄡ鍵(「.」或「>」符號)可以前進一格畫面。

keyboard-311803_960_720

YouTube 的幾個快捷鍵: [K] 鍵 是暫停,頁面焦點不在影片時一樣適用。左角括號 [<] 鍵是退一格,右角括號 [>] 鍵是進一格。

連續按 [<]、[>] 這兩顆快捷鍵(注:不需按 shift,shift + [ㄝ/ㄡ] 是加快與減慢播放速度的快捷鍵),我們可以 手動慢動作播放,進而精確鎖定要截圖的那一幀影像。這招好方便的,大家學會了嗎?

然後是讓瀏覽器視窗 全螢幕化 的快捷鍵,因為我們要讓畫面放到最大最清晰!抓好抓滿!

在 IE / Chrome / Firefox ,全螢幕化都是 F11 鍵,再按一次可恢復。

奇怪的是 Windows 內建的 Edge 瀏覽器一直沒有全螢幕的功能,反正沒人用,我們就不理它吧。

_

好,萬事俱備,我們進入實戰

步驟一進到要截圖的影片,這裡以 3Blue1Brown 頻道的「黎曼 zeta 函數與解析延拓的視覺化說明」為例

ex1

各種阻礙我們截圖的小玩意呀!準備消失吧。

步驟二(可省略)

將網址從
/  www.youtube.com/watch?v=[一串影片編碼]
改成
/  www.youtube.com/emded/[一串影片編碼]
再順手按個 Enter,我們進入影片的嵌入模式,讓原本 YouTube 網站的留言呀、通知呀、建議影片清單等等干擾物都消失了。簡直是哆啦A夢的獨裁者按紐。

步驟三

滑到目標片段附近按暫停,用左右方向鍵,和上面提到的逐格播放(手動慢動作)快捷鍵,鎖定我們要的截圖目標。這時影片正在框框裡完美的暫停著。

步驟四

按右下角的齒輪,我們把字幕關閉起來。再來,把影片清晰度調整到最高。

步驟五

最後變魔法,按下書籤列的魔法按鈕,說聲「霹靂卡霹靂拉拉波波力那貝貝魯多」。

控制條就咻一下消失了,畫面變成這樣清潔溜溜。再按下 F11 全螢幕就可以傻瓜截圖了。

clean

只要誠心使用魔法,整個畫面就會變這樣     #絕非修圖,這是同一格影片

是說這範例好爛,被遮到的畫素本來就大多是黑的,哪有救援的必要 XD

步驟六Profits!

「等等,科宅你搞屁啊,變魔法是哪招?!」每日一冷的創站元老,讀者A怒火中燒的說。

喔喔喔對不起,說明得不夠清楚,所謂的魔法是一串 javascript ← 網際網路的語言,可以說是命令你的瀏覽器聽話的魔法咒語。

它的全文是這樣

javascript:function isolate(name){d=document.getElementsByClassName(name)[0]; p=d.parentElement; p.innerHTML=''; p.appendChild(d); }; isolate("html5-video-container");

好讀版是這樣

javascript:
function isolate(name){
d=document.getElementsByClassName(name)[0];
p=d.parentElement; p.innerHTML='';
p.appendChild(d); };
isolate("html5-video-container");

使用前要事先準備,像法師必須記憶咒文。別擔心很簡單的。

魔法的精神是要把這一小段程式碼放到瀏覽器的書籤列,建立一個可以一鍵使用,稱為 bookmarklet:書籤小程式 的玩意。

_

[法一]*一分鐘法*

把這個連結「霹靂卡霹靂拉拉波波力那貝貝魯多」直接拉到瀏覽器書籤列,要使用的時候點一下即可!

_

[法二]*備用法*

隨便新增一個書籤(快捷鍵 Ctrl+D)

按「編輯」按鈕 → 將「編輯書籤」頁面中的「網址」這欄刪除,用上面程式碼代替(請從 j 複製到最後一個分號,分行不影響)。

完成之後在 YouTube 網站、播放影片時點一下剛剛建立好的書籤,若萬事成功就可以打敗魔王救出公主隱藏控制條與時間軸了。

 _

[法三]*剪下貼上法*

讀者也可以每次都來每日一冷網站複製這一行(←私心希望XD),貼到瀏覽器的網址列。但請注意,Chrome 和 Firefox 的工程師為了安全,當你貼上程式碼時,最前面 "javascript: " 等字會自動被刪掉(以免陌生人寄給你這樣一串代碼叫你貼到瀏覽器執行),讀者需要自己把 "javascript: " 輸入回去,再按 Enter 執行才會有效

_

_

走筆到此,已經完成本文的使命,只要順著上面幾個步驟,就可以在 YouTube 影片中擷取完全沒有干擾的完整畫面。

咦,怎麼有人在哭喊?

「完了完了,圖片抓完,但我怎麼用控制條就是變不回來。我好像把 YouTube 弄壞了,這下死定啦。」

這位讀者別擔心啊,只要按 F5 重整頁面就會恢復原樣。這招就和所有魔術一樣,是假的,暫時的,安全又老少咸宜。注意啦,影像只要不超出著作權法規定的合理使用範圍,本教學應該不會害你被吉。

那就這樣啦,我是科宅,下次見囉!

 

_

以下是補充說明,因為和 魔法 電腦程式有關,即使完全看不懂也沒關係。

簡單來講上面那幾行字寫成的代碼,功能是 控制狄拉克之海中瑪那漩渦的極性流向 告訴瀏覽器我們只希望它顯示影片本身,請隱藏其他擋到視線的、有的沒的元件。

背後原理是,瀏覽器上顯示的所有東西都是一種稱為 HTML DOM (文件物件模型)的架構。所有看得到(與看不到)的 HTML 元件,稱為結點 Node 的,通通可以用 javascript 加以操作更改其屬性。

以 Google Chrome 為例,按下 F12 就可以叫出「開發者工具」,這顧名思義一般是網頁開發者在用的,這個介面可以讓你操縱用戶端(也就是螢幕上看到的東西)的網頁元件,對齊、大小、顯示方式、隱藏與否等等。開發者工具做得到的事情,理論上通通可以用 javascript 做,但會比較繁瑣。

我們不是駭客,這些更改對 YouTube 公司伺服器上的內容完全沒影響,只有我們使用者端看到的東西會被更改、被「客製化」而已。事實上這也是阻擋廣告神器 AdBlock 能讓廣告欄位消失的原理。有名的 Firefox 套件 Greasemonkey (油猴)讓使用者可以高度客製化任何網站的外觀,原理也是一樣的。

以 YouTube 的網頁來說,我們截圖黨想保留的影片,它的「真身」是一行長得像這樣的 HTML 節點(Node)物件。

<div class="html5-video-container" data-layer="0" style="width ...中略... </div>

其中 html5-video-container 是 YouTube 的網頁工程師給這個結點的名字(class 屬性),知道了節點的名字就能對它使用巫術,和《地海巫師》寫的一模一樣呀。例如說,將這個物件單獨隔離出來,其餘物件刪光光。

這些年,播放影片幾乎都是使用 HTML5,主流影音網站仍使用內嵌 Flash 的很少很少,所以這個原理理論上可以推廣用於其他家網路影音,只要他們的播放器是 HTML 語法構成的。

以隨意窩影音為例,影片控制列的「真名」這次叫做 "vjs-control-bar" 我們可以直接從開發者工具選取、將它隱藏,或是寫一段代碼。

javascript:function remove(name){ temp=document.getElementsByClassName(name); for (i=0; i<temp.length; i++) { temp[i].parentNode.removeChild(temp[i]) }; }; remove("vjs-control-bar");

至於其他網站隱藏影片礙眼功能列的方法,就由聰明的讀者自行發揮囉。

大原則是在開發者模式中找到要留存的物件,區分出其他不需要的,再利用這兩個 js 函數清理戰場。如果最糟狀況,影片元件沒有 class 屬性,甚至連 id 都沒有,最後還有大絕招 XPath 可以用。說明完畢。


  •  
  •  
  •  
  •  

Comments

comments

四月 25th, 2017 by