~為響應政府網路分級制度~
~本站全部內容均為限制級,保證很黃很暴力~

訓練家的佈弱格-Patch1.2

The BLOG of trainer



編輯日期:2021-10-04 13:20

類型:電腦應用
作者:羽山
文章時間:2021-10-04 13:20:01
瀏覽人數:1825人
標題:Netflix 字幕加大心得
網址:https://3wa.tw/blog/blog.php?id=1935
內容:
 

最近跟幾個好友 share netflix,從此晚上回家吃飯幾乎就離不開無廣告 netflix 影集追劇人生

為了在大螢幕上播影片,還搬了一台筆電24小時開機當作電視盒使用

netflix 什麼都好,就是那渣一般的字幕大小…

 如果今天在電腦上近近看,字慕大小還算可以,但坐到餐桌稍遠一點

就會覺得字幕黑邊過細,白色過多,字體又太小,本來吃飯時間就不容易集中心神看電視

就會變得更吃力了!

 

 網路上有個微妙的連結可以進到 netflix 的後台更改字幕樣式、大小

https://www.netflix.com/SubtitlePreferences

實際上調完後,字仍一樣小,完全看不出任何改變

嘗試使用 NflxMultiSubs,也是什麼效果都沒變化

看了評論才發現原來九月後 netflix 改版,這功能就掛了~_~"

 

 週末追劇越追越不爽…看來是時候展現真正的技術力了

 

 

 由於 netflix 是  DRM 影片,數位版權管理影片

一般的截圖會抓不到畫面,所以背景就變黑

 

 

首先用 F12 觀察字幕是什麼狀況

 

 

發現字幕其實就是圖片,寫死大小的圖片

嘗試調整 width、height,發現圖片是可以縮放的

但影片只要一播,image 這個 tag就會重生

所以這樣改動效果有限

於是...

 

var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

setTimeout(function(){
  $("head").append(" \
<style> \
image{width:100%;height:70px;} \
image[height='90']{width:100%;height:120px;} \
image[height='95']{width:100%;height:120px;} \
image[height='106']{width:100%;height:120px;} \
image[height='105']{width:100%;height:120px;} \
image[height='108']{width:100%;height:120px;} \
image[height='107']{width:100%;height:120px;} \
</style>");


clearInterval(window['wtf']);
window['wtf']=setInterval(function(){
$("image").attr('x',-50);

},50);
},3000);

 

簡單寫了一小段 javascript,首先先引入 jquery (這樣比較簡單好寫)

然後3秒後(等jquery讀完),在 head 裡加入一段 style

圖高為 70px,寬 100%

當圖的屬性高為 90、95、105、106、107、108 (其實這些是雙行字,或是雙行又有雙引號、單引號字)

這時的字高改為 120px

最後再用 setInterval,每50ms 就把 image 的 x 提前個 50

為了避免語法重複執行,所以每次執行前,都把舊的 interval clear 掉

這樣就算語法重複執行,也不會堆疊太多執行緒

 

 執行前 

 

 執行後

 

效果卓越啊...

但如果每次進 netflix 前都要去拿鍵盤複製貼上程式碼,實在掉漆…

所以要研究一下瀏覽器的 extension (plugin) 怎麼開發

 

首先先去下載範例

https://github.com/GoogleChrome/chrome-extensions-samples

範例中 examples 裡的 page-redder 就很適合拿來練習

 把 page-redder 目錄拉出來,裡面只有二個檔案

 

 

 然用進到瀏覽器的 extensions 擴充模組,上面是 brave

chrome、edge 也差不多,現在核心都一樣了

點開「開發人員模式」按左邊載入未封裝項目

 

 

 選到 page-redder

 

 

 然後在瀏覽器右上的擴充工具鎚子,把剛才裝的 Page Redder 釘選上去,就會多一個「P」

 

 

 隨便瀏覽一個網頁,按一下「P」,發現該網頁的背景變紅色了

原來 extension 這麼容易開發啊^_^~

 

然後就把剛才寫的 Code 簡單改一改,就作寫了一個 my_netflix_sub_plugin

https://github.com/shadowjohn/my_netflix_sub_plugin

 

使用方法:

1、下載 https://github.com/shadowjohn/my_netflix_sub_plugin/archive/refs/heads/main.zip

2、解壓縮  main.zip

 進到擴充功能

 

 

 如果是 chrome ,可以在網址列輸入:

chrome://settings/

右上「打開開發人員模式」,然後選「載入未封裝項目」

 

 

 目錄選到解壓縮後,裡面目錄的 3wa_netflix 選擇資料夾

 

 

 確定有載進來了

 

 

 一樣在選單把剛才裝的 3waNetflix 釘選到工具列

這樣以後看 netflix 覺得字幕太小需要放大,就點一下這個「3」就行了

 

實際操作的感覺

 

原來寫 extension 難度不算高,整包 jquery 都可以包進去變成原碼

未來有額外的瀏覽需求也許可以寫些好用的外掛~

 

總算可以讓字幕變大,躺沙發追劇開心又愉快

 

 

 

 

 

 

 

 

 

 

 

 

 

 

首頁  上十頁  上一頁  1 下一頁    最末頁 (總共有...1頁)

第 1 頁

有話要說  看留言 【4】

其他分類
當月訓練
(2021-10-27)
【電腦應用】羅技 M585 滑鼠按鍵維修

(2021-10-25)
【網頁設計心得】live2d 空洞臉問題修正

(2021-10-25)
【NSR 150】NSR150 線圈、脈波線圈、激磁線圈

(2021-10-25)
【NSR 150】NSR150 碼表溫度計、油表電阻

(2021-10-25)
【機車綜合相關】SJ4000 4K Air 行車紀錄器

(2021-10-17)
【酷龍 150】酷龍換機油 34015km

(2021-10-04)
【電腦應用】Netflix 字幕加大心得

(2021-10-04)
【NSR 150】NSR150 自製可程式 CDI 程式說明

(2021-10-02)
【KTM 390】KTM RC390 更換打檔桿油封

最新訓練
(2021-11-21)
【NSR 150】NSR150 自製 RC 線組 Part 2

(2021-11-20)
【山葉 XMAX 300】XMAX 300 更換來令片

(2021-11-20)
【酷龍 150】酷龍整理前煞車

(2021-11-14)
【NSR 150】NSR150 更換活塞 - Part1

(2021-11-14)
【電腦應用】利用Serial控制Relay關閉插座-斷線終結者

(2021-10-27)
【電腦應用】羅技 M585 滑鼠按鍵維修

(2021-10-25)
【網頁設計心得】live2d 空洞臉問題修正

(2021-10-25)
【NSR 150】NSR150 線圈、脈波線圈、激磁線圈

(2021-10-25)
【NSR 150】NSR150 碼表溫度計、油表電阻

(2021-10-25)
【機車綜合相關】SJ4000 4K Air 行車紀錄器