WordPress 影片字幕自動選擇(預設字幕)設定

這篇文章對於大部分WP的使用者可能幫助不大,但對於用WP來做影音網站的站長就相對很重要了,本小編有自己經營的謎片網站,很多的裏番等影片都是外掛字幕的,凡舉SSA、SRT、ASS等等各種字幕都有,要放上WP的影片有諸多限制,參考官方說明可用的檔案類型如下:

.mp4, .m4v (MPEG-4)
.mov (QuickTime)
.wmv (Windows Media Video)
.avi
.mpg
.ogv (Ogg)
.3gp (3GPP)
.3g2 (3GPP2)

取自:https://en.support.wordpress.com/accepted-filetypes/#video

個人的經驗是使用MPEG-4 H.264是絕對沒有問題的,所以即使是.avi我也是會轉成MPEG-4,轉檔很多教學我不會贅述,本篇重點在於如何預設掛載字幕

前導

首先我們得科普一下WebVTT這個字幕格式是什麼,詳細的介紹文也很多,像MDN解釋的WebVTT就算滿齊全的,文字格式的轉換很簡單,編碼則使用UTF-8

我稍微搜尋了一下實用的各類字幕轉WebVTT的工具發現這個網站最實用:

https://subtitletools.com/convert-to-vtt-online

他能夠直接支援srt, ass, ssa, smi, sub這些格式無痛轉換,同時檔名也不會跑掉,這是眾多工具中算很優質的了。

介紹完了前篇,想必各位都了解了WebVTT,WP原本預設就有支援字幕的加載,但自從版本5.0之後的新影片播放器就拿掉了這個功能,我十分不解,所幸舊的編輯器和HTML程式碼編輯器都得以保留,也代表著使用這兩種辦法都可以加載字幕,我選擇使用HTML直接編輯效率來的較高

下面是我整理出來的HTML程式碼,直接複製貼上WP的文字編輯器即可使用

至於連結如何取得可以透過WP媒體庫的附件詳細資料裡就有網址可以拷貝,以下是我的範例

這樣一來你的影片就有字幕可以選了

預設字幕實作

相信熟WP的人都知道上面的步驟怎麼完成,重點在下面的教學國內實在找不到文章,爬了一些國外的文發現到可以使用jQuery來實作,這又可以採用直接在佈景主題編輯器做修改(風險高)使用外掛來插入兩種方式,TK很懶、也怕網站Crash掉,所以明顯地採用了後者。

在安裝外掛的頁面找到「Simple Custom CSS and JS」,這套外掛是用來方便且快速制定CSS與javascript用的

找到並安裝完啟用以後便可以在側邊欄找到Custom CSS&JS的蹤跡,我們選擇Add Custom JS

它會直接引導你到有點類似撰寫文章的頁面,差異在於是要撰寫程式

由於jQuery本來就是一個以Javascript來編寫的函式庫,所以直接在註解底下鍵入以下程式碼

我將Tilte鍵入sub,這部分隨意。按發布就完成新增了

回到All Custom Code就會發現剛剛新增的sub出現在那兒,重刷你的網站就會發現所有的影片皆會自動選擇字幕了!

參考連結

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料