訓練家的佈弱格-Patch1.2

The BLOG of trainer



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

類型:電腦應用
作者:羽山
文章時間:2021-10-04 13:20:01
瀏覽人數:12734人
標題: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 都可以包進去變成原碼

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

 

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

 

2021-12-15 補充:

V0.2 版開發 ok

安裝方式同 V0.1 版,舊版可以先移除再重新安裝

 V0.2 版點「3」之後,滑鼠移到畫面中上方,就會出現設定選單,移開就會消失

 

 

 在影片播放時,即可拖動拉Bar來改變字體大小、左右位置

 

 

 左

 

 

 右

操作範例

 

2021-12-23 補充:

在歷經 0.3、0.4 版朋友與網友  Tom 回饋心得,新的作法直接採用放大原有高度的比例

大小從 0.1~3 這樣不管單行字、雙行字,都會照同比例放大

另外也使用 localStorage 來紀錄數值

這樣就算下次重開瀏覽器,也能重載最後一次的設定數值

 

 字體大小改成放大倍數 0.1~3

 

2021-12-26 補充:

0.5 版作了個比較大的改版

寫著寫著就把 jQuery 3.6.0 移掉,重新寫了一套剛好符合這個專案用的簡易版的 jquery lite

 

(2022-01-06) V0.6 版:

移除不必要的 console.log,debug 時方便看的內容以後在 release 後應該隱藏。

 

2022-03-21 補充:

這幾天在家晚上忙沒在追劇,一個高職同學聯絡我說她們家沒放大字幕沒辦法追劇!

打開電視點一點還真的失效了~

晚上有空研究一下是什麼原因

0.7 版也是重要的改版,與舊版不一樣

Netflix 在3月17~3月19左右,將原本中文字幕的圖片,改回文字,預設為 31px 字級

而且採用 static css style 的作法,目前開發的方式只好將原本 text z-index 下移至看不見

然後重新加入自己的 div ,配合 31x使用者調整的字體大小 0.1~3 倍,來達到字幕放大的效果

固定在 bottom 10% 與 always text-align center ,最後再將字幕粗體、加細邊框

最後用 setInterval 一直抓原本 text 的內容來顯示,效果也是滿不錯的~^_^

新加的 div 就與 video tag 同一層,才不會在放大到全螢幕時消失

開發的方式大概就是如此

 新版 V0.7 就不需要調整 X 軸的功能了,字幕利用 CSS 置中效果卓越

 

2022-04-20 補充:

新版 V0.8 版可以調整字距了

網友 mii 提到想增加「字距」的功能,已開發成功

 V0.8 版

 

V0.8 版字距調整的參考影片

 

如果是用 chrome 商店,V0.8 版也上架,昨天才寫,今早就送審過了,效率真不錯 :D

 

 

 不小看到 Dcard 有人在討論 3waNetflix ,大家都很想要改字體粗細、字框粗細

在 V0.9 版順手作了

商店連結(呵,雖然是商店,不過羽山這支是完全免費無廣告且開放源始碼的^^)

 

https://chrome.google.com/webstore/detail/3wanetflix/hpmbbonnlchnbbakdegcbbflbjgganaf

 

 歷經了 V1.0~V1.5 的改版

感謝 Man 哥發現有些影片的字幕會變重疊,也緊急修正

目前定版的 V1.5 已可以調整

字體大小、字體粗細、字體間距、字框粗細、字幕高度

另外字體顏色與字體邊框的顏色也可以作出區別

這樣看字幕就相當舒適了~~~

 

 

  (2022-05-18) V1.6 版:

  https://github.com/shadowjohn/my_netflix_sub_plugin/blob/main/release/V1.6/3wa_netflix.zip

  1、預設的字體顏色:#fff5f8,邊框顏色:#1c5cb0,字體粗細:1.4、字框粗細:10、字幕高度:12,字體大小:1.6、字體間距:12.5

  2、修正在選影片頁時,控制項不能被點選 (有發現在選影片頁時,中間的有時會點不到,修正了)

  3、檢查 chrome 字體置中的問題,檢查正常

有同學反應 Chrome 字體偏右,不過我這看起來還滿正常的

V1.6 版,可以調整的項目增加不少~^_^~

 

 (2022-06-11) V1.7 版:

  https://github.com/shadowjohn/my_netflix_sub_plugin/blob/main/release/V1.7/3wa_netflix.zip

  1、當使用者使用 1080p 套件時,仍為圖片型文字,調整字幕置中的問題

 如果使用者安裝 1080p 套件,netflix 是圖片型字幕

 

 

 V1.7 版,可以調整字體大小、字體Y軸、自動置中

 

 netflix 不知道為啥寫了 * { letter-spacing: 0!important}

導致 letter-spacing 失效,解決方法就是每次在處理 my3waSubDiv style

把裡面所有的元件都使用 important 約在 736 行

V1.8 修正文字間距問題 

 

 這二天也在努力開發雙字幕的功能,不過似乎沒這麼容易實作

如果有能量研發,再等我的好消息~

 

 

 

~祝各位追劇愉快~

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

第 1 頁

有話要說  看留言 【60】

其他分類
當月訓練
(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】酷龍 150 換機油 34015km

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

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

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

最新訓練
(2022-08-06)
【本田 MSX-125】MSX-125 換後輪

(2022-06-18)
【NSR 150】NSR150 轉速表卡住

(2022-06-07)
【網誌】3WA 全站 utf8 轉 utf8mb4

(2022-05-28)
【KTM 390】KTM Duke390 維修含氧感知器

(2022-05-28)
【NSR 150】NSR150 維修煞車開關

(2022-05-21)
【酷龍 150】酷龍 150 更換時速表線

(2022-05-15)
【Suzuki 小阿魯150】小阿魯換後輪

(2022-05-14)
【機車綜合相關】順牙工具特工(電動扳手用)

(2022-05-08)
【NSR 150】NSR150 更換後輪

(2022-05-02)
【NSR 150】NSR150 維修機油燈-Part2