Posted by 各位讀者好，希望這篇秘技之一冷能給你的生活帶來便利。「冷知識」是 oxymoron 呀 XD
在影音網站播放影片時，控制條（control bar）總是浮出來妨礙畫面完整。
它讓網友痛不欲生。在於被它擋到的邊邊角角必須裁切掉，多一道手序不打緊，被摧毀的訊息量，叫你我內心的那個小強……迫症患者無聲地淒然吶喊：這我絕不允許！。
到底有什麼方法能隱藏它、或任何妨礙畫面完整的物件呢？
科宅這篇文，教大家如何隨心所欲，專業的截圖。畫面不用心酸的只能抓一部分，我們要抓好，抓滿！每日一冷給你滿滿的大～平～台～
或許你是某位遊戲直播主的鐵粉，常常想保存每個心動的瞬間。
又或許你固定在某站追的動畫好有梗，讓你好想截圖起來，和朋友分享。
又或者某些影片裡壯闊的畫面實在高清夢幻又唯美，讓你好想設為桌面。
───原來，大家都是和科宅志趣相投的朋友呢。
那我們就，開始吧。
先假設大家都知道鍵盤上有一個按鍵叫「截取螢幕」，Print Screen (prt sc)，大致上在右上角這個位置（紅圈圈）。
按下去之後，再打開圖片編輯軟體，例如每日一冷最喜歡、忠實好用的小畫家。
在小畫家中按下「貼上」 → 一些塗塗畫畫 →「存檔」，就可以將剛才按下按鈕時的畫面保存。
※ 還不清楚？ＯＫ的，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 網站的留言呀、通知呀、建議影片清單等等干擾物都消失了。簡直是哆啦Ａ夢的獨裁者按紐。
步驟三
滑到目標片段附近按暫停，用左右方向鍵，和上面提到的逐格播放（手動慢動作）快捷鍵，鎖定我們要的截圖目標。這時影片正在框框裡完美的暫停著。
步驟四
按右下角的齒輪，我們把字幕關閉起來。再來，把影片清晰度調整到最高。
步驟五
最後變魔法，按下書籤列的魔法按鈕，說聲「霹靂卡霹靂拉拉波波力那貝貝魯多」。
控制條就咻一下消失了，畫面變成這樣清潔溜溜。再按下 F11 全螢幕就可以傻瓜截圖了。
是說這範例好爛，被遮到的畫素本來就大多是黑的，哪有救援的必要 XD
步驟六：Ｐｒｏｆｉｔｓ！
「等等，科宅你搞屁啊，變魔法是哪招？！」每日一冷的創站元老，讀者Ａ怒火中燒的說。
喔喔喔對不起，說明得不夠清楚，所謂的魔法是一串 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 可以用。說明完畢。
每日一冷 