各位讀者好,希望這篇秘技之一冷能給你的生活帶來便利。「冷知識」是 oxymoron 呀 XD
在影音網站播放影片時,控制條(control bar)總是浮出來妨礙畫面完整。
它讓網友痛不欲生。在於被它擋到的邊邊角角必須裁切掉,多一道手序不打緊,被摧毀的訊息量,叫你我內心的那個小強……迫症患者無聲地淒然吶喊:這我絕不允許!。
到底有什麼方法能隱藏它、或任何妨礙畫面完整的物件呢?
科宅這篇文,教大家如何隨心所欲,專業的截圖。畫面不用心酸的只能抓一部分,我們要抓好,抓滿!每日一冷給你滿滿的大~平~台~
或許你是某位遊戲直播主的鐵粉,常常想保存每個心動的瞬間。
又或許你固定在某站追的動畫好有梗,讓你好想截圖起來,和朋友分享。
又或者某些影片裡壯闊的畫面實在高清夢幻又唯美,讓你好想設為桌面。
───原來,大家都是和科宅志趣相投的朋友呢。
那我們就,開始吧。
先假設大家都知道鍵盤上有一個按鍵叫「截取螢幕」,Print Screen (prt sc),大致上在右上角這個位置(紅圈圈)。

按下去之後,再打開圖片編輯軟體,例如每日一冷最喜歡、忠實好用的小畫家。
在小畫家中按下「貼上」 → 一些塗塗畫畫 →「存檔」,就可以將剛才按下按鈕時的畫面保存。
※ 還不清楚?OK的,Google 搜尋「擷取螢幕」有更多教學。
_
這個基礎技能懂了還不夠,根據我身為截圖黨的豐富經驗,我們還有阻礙得搞定呢。具體來說是兩點:
壹、鎖定目標
每次都得在那邊痛苦的反覆暫停、退回、暫停……直到終於找到畫質最清晰、姿勢表情最正確的一幕,然後不小心按到播放又跑掉 Rrrrrrrrrrrrrrr……
貳、清理戰場
根本的問題是,雖然只要滑鼠不動,大部分網站的控制條就會自動隱藏,但一按暫停它就會不請自來地出現呀。不能暫停截圖,根本考驗反射速度。
無論 YouTube 還是我們的優酷,隨意窩還是 BiliBili,總有影片標題與控制條等一干狐群狗黨,佔據了畫面上下方,影片的可見部分硬生生被喀嚓掉兩條。接下來我們就來消滅控制條的暴政,拯救被迫犧牲的畫素們吧!

先來個但書,世界上聰明的人拿~麼~多~ 必然有人已經寫出功能強大的插件,自動化這項工作(例如 “You Clever" 這個 Chrome 插件 ←見電腦玩物站長的介紹)畢竟懶惰是人類進步的最大動力嘛。如此強大之物,會讓這篇文章的方法瞬間無用,寫文章的科宅自慚形穢,躲在牆角畫圈圈。
只是,我就是有這股「不想裝插件」的任性嘛,想用土法煉鋼的精神、靠完全基礎 vanilla 的工具搞定不也是種浪漫?不另外安裝東西,不只比較安全,也有可能在調查方法的過程中不小心學到一點額外的東西啊。
況且上述工具只適用於 YouTube。本文提供的方法,原則上跨平台,適當改裝仍多才多藝呢。
#隨機一冷
英文裡香草 vanilla 意思是遊戲軟體(或其他東西)沒有經過改裝的。
典故來自於──冰淇淋。冰淇淋最常見的口味是香草不是嗎。
以下教學,影片截圖預設目標是 YouTube,預設執行裝置是個人電腦。
※解釋:別的網站需要調整,但原理一樣,下面某行程式碼修改後才適用。
廢話不多說,要完成超完美截圖,我們必須再學兩個簡單的快捷鍵功能。
你知道嗎?YouTube 可以逐格放映
在影片暫停時,
按一下鍵盤的ㄝ鍵(就是「 ,」或「<」符號)影片會倒退一格畫面;
按一下隔壁的ㄡ鍵(「.」或「>」符號)可以前進一格畫面。
然後是讓瀏覽器視窗 全螢幕化 的快捷鍵,因為我們要讓畫面放到最大最清晰!抓好抓滿!
在 IE / Chrome / Firefox ,全螢幕化都是 F11 鍵,再按一次可恢復。
奇怪的是 Windows 內建的 Edge 瀏覽器一直沒有全螢幕的功能,反正沒人用,我們就不理它吧。
_
好,萬事俱備,我們進入實戰
步驟一:進到要截圖的影片,這裡以 3Blue1Brown 頻道的「黎曼 zeta 函數與解析延拓的視覺化說明」為例

步驟二(可省略)
將網址從
/ www.youtube.com/watch?v=[一串影片編碼]
改成
/ www.youtube.com/emded/[一串影片編碼]
再順手按個 Enter,我們進入影片的嵌入模式,讓原本 YouTube 網站的留言呀、通知呀、建議影片清單等等干擾物都消失了。簡直是哆啦A夢的獨裁者按紐。
步驟三
滑到目標片段附近按暫停,用左右方向鍵,和上面提到的逐格播放(手動慢動作)快捷鍵,鎖定我們要的截圖目標。這時影片正在框框裡完美的暫停著。
步驟四
按右下角的齒輪,我們把字幕關閉起來。再來,把影片清晰度調整到最高。
步驟五
最後變魔法,按下書籤列的魔法按鈕,說聲「霹靂卡霹靂拉拉波波力那貝貝魯多」。
控制條就咻一下消失了,畫面變成這樣清潔溜溜。再按下 F11 全螢幕就可以傻瓜截圖了。

是說這範例好爛,被遮到的畫素本來就大多是黑的,哪有救援的必要 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 可以用。說明完畢。