一種播放視頻時加載字幕文件的方法及系統與流程
2023-10-23 16:37:07 1
本發明涉及領域，尤其涉及一種播放視頻時加載字幕文件的方法及系統。
背景技術：
隨著網際網路的普及以及網絡帶寬的增加，越來越多的人選擇通過電視、機頂盒、手機、平板、PC等設備連接網絡觀看視頻節目，享受網絡帶來的視覺盛宴。作為視頻內容提供商或視頻網站運營商，播放視頻尤其是國外視頻時顯示字幕是非常有必要的。目前，顯示字幕方式分兩種，一種是將字幕內嵌於視頻中，播放視頻無需藉助其它技術顯示字幕；另一種則是以外掛的形式顯示字幕。外掛形式顯示字幕又兩種：一種是播放器加載外掛字幕，另一種是以網頁js插件的形式加載外掛字幕。
相比於內嵌字幕會損失視頻清晰度，且編輯字幕難度大的缺點，外掛字幕的優勢是可以自定義字體、大小，自由修改字幕內容，做到字幕和視頻分離。而在WEB平臺通過瀏覽器播放網絡視頻加載顯示字幕，尤其是在機頂盒設備裡的集成播放器如VLC，博通等並沒有支持外掛字幕的功能。
因此，現有技術還有待於改進和發展。
技術實現要素：
鑑於上述現有技術的不足，本發明的目的在於提供一種播放視頻時加載字幕文件的方法及系統，旨在解決現有技術中WEB平臺播放視頻不支持外掛字幕的問題。
本發明的技術方案如下：
一種播放視頻時加載字幕文件的方法，其中，包括步驟：
在WEB平臺通過瀏覽器播放視頻時，根據播放標籤獲取當前頁面的播放對象；
調用用於顯示字幕的函數，加載並解析字幕文件，將其中各時間段的時間信息和對應的文字信息分別放入到時間數組和文字數組中；
獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息。
所述的播放視頻時加載字幕文件的方法，其中，根據播放標籤獲取當前頁面的播放對象的步驟具體包括：
若當前頁面採用HTML5 VIDEO標籤，則設置播放對象為HTML5 VIDEO對象；
若當前頁面採用HBBTV OBJECT標籤，則設置播放對象為HBBTV OBJECT對象。
所述的播放視頻時加載字幕文件的方法，其中，獲取當前頁面的播放對象之後還包括：
根據播放對象的屬性值判斷是否有設置字幕路徑，若有則調用用於顯示字幕的函數，若否則流程結束。
所述的播放視頻時加載字幕文件的方法，其中，調用用於顯示字幕的函數的步驟具體包括：
判斷是否存在用於顯示字幕的函數，若存在，則直接調用所述函數；若不存在，則用創建一個DIV層，根據當前頁面的位置設置DIV層的層疊樣式表，再將所述DIV層插入到當前頁面中。
所述的播放視頻時加載字幕文件的方法，其中，獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息的步驟具體包括：
每隔預定時間獲取當前播放時間信息，並與時間數組裡的時間信息匹配；
獲取相匹配的時間數組的標識；
根據所述標識讀取並顯示文字數組中對應的文字信息。
一種播放視頻時加載字幕文件的系統，其中，包括：
播放對象獲取模塊，用於在WEB平臺通過瀏覽器播放視頻時，根據播放標籤獲取當前頁面的播放對象；
字幕加載模塊，用於調用用於顯示字幕的函數，加載並解析字幕文件，將其中各時間段的時間信息和對應的文字信息分別放入到時間數組和文字數組中；
字幕顯示模塊，用於獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息。
所述的播放視頻時加載字幕文件的系統，其中，所述播放對象獲取模塊具體包括：
第一設置單元，用於若當前頁面採用HTML5 VIDEO標籤，則設置播放對象為HTML5 VIDEO對象；
第二設置單元，若當前頁面採用HBBTV OBJECT標籤，則設置播放對象為HBBTV OBJECT對象。
所述的播放視頻時加載字幕文件的系統，其中，還包括：
字幕路徑判斷模塊，用於根據播放對象的屬性值判斷是否有設置字幕路徑，若有則調用用於顯示字幕的函數，若否則流程結束。
所述的播放視頻時加載字幕文件的系統，其中，字幕加載模塊具體包括：
函數判斷單元，用於判斷是否存在用於顯示字幕的函數；
直接調用單元，用於若存在用於顯示字幕的函數，則直接調用所述函數；
函數創建單元，用於若不存在用於顯示字幕的函數，則用創建一個DIV層，根據當前頁面的位置設置DIV層的層疊樣式表，再將所述DIV層插入到當前頁面中。
所述的播放視頻時加載字幕文件的系統，其中，字幕顯示模塊具體包括：
時間匹配單元，用於每隔預定時間獲取當前播放時間信息，並與時間數組裡的時間信息匹配；
標識獲取單元，用於獲取相匹配的時間數組的標識；
文字顯示單元，用於根據所述標識讀取並顯示文字數組中對應的文字信息。
有益效果：本發明實現了在WEB平臺通過瀏覽器播放視頻時也能加載外掛字幕的功能，可更靈活的編輯字幕內容，實現字幕和視頻分離的目的，本發明兼容HBBTV OBJECT對象和HTML5 VIDEO對象播放視頻時，加載並顯示字幕。
附圖說明
圖1為本發明一種播放視頻時加載字幕文件的方法較佳實施例的流程圖；
圖2為本發明一種播放視頻時加載字幕文件的系統較佳實施例的結構框圖。
具體實施方式
本發明提供一種播放視頻時加載字幕文件的方法及系統，為使本發明的目的、技術方案及效果更加清楚、明確，以下對本發明進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，並不用於限定本發明。
請參閱圖1，圖1為本發明一種播放視頻時加載字幕文件的方法較佳實施例的流程圖，如圖所示，其包括步驟：
S1、在WEB平臺通過瀏覽器播放視頻時，根據播放標籤獲取當前頁面的播放對象；
S2、調用用於顯示字幕的函數，加載並解析字幕文件，將其中各時間段的時間信息和對應的文字信息分別放入到時間數組和文字數組中；
S3、獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息。
本發明是基於JQuery框架，所以需引用JQuery.js。
在步驟S1中，由於HTML5 VIDEO和HBBTV OBJECT對象分別有著不同的屬性、方法和事件，所以加載字幕的兼容處理第一步便是頁面加載完成後，獲取當前頁面的播放對象類型。
具體來說，根據播放標籤獲取當前頁面的播放對象的步驟具體包括：
若當前頁面採用HTML5 VIDEO標籤，則設置播放對象為HTML5 VIDEO對象；
若當前頁面採用HBBTV OBJECT標籤，則設置播放對象為HBBTV OBJECT對象。
也即，若當前頁面採用HTML5 VIDEO標籤播放視頻，則設置播放對象為HTML5 VIDEO對象；若當前頁面採用HBBTV OBJECT標籤播放視頻，則設置播放對象為HBBTV OBJECT對象。
進一步，獲取當前頁面的播放對象之後還包括：
根據播放對象的屬性值判斷是否有設置字幕路徑，若有則調用用於顯示字幕的函數，若否則流程結束。
具體地，假如播放對象為HTML5 VIDEO對象，那麼需要獲取自定義屬性data-subtitle的值，通過該值來判斷是否有設置字幕路徑；假如播放對象為HBBTV OBJECT對象，那麼需要獲取子標籤track的屬性src的值，通過該值來判斷播放對象是否有設置字幕路徑。若有設置字幕路徑，那麼調用用於顯示字幕的函數，以便後續顯示字幕。
如果當前播放對象沒有設置字幕路徑，則不啟用字幕加載技術，那麼流程結束。
進一步，在步驟S2中，調用用於顯示字幕的函數的步驟具體包括：
判斷是否存在用於顯示字幕的函數，若存在，則直接調用所述函數；若不存在，則用創建一個DIV層，根據當前頁面的位置設置DIV層的層疊樣式表，再將所述DIV層插入到當前頁面中。
也就是說，如果用於顯示字幕的函數已經存在，則不用創建。
而如果用於顯示字幕的函數不存在，則用document.createElement(『div』)創建一個DIV層，根據當前頁面的位置設置好顯示字幕的css樣式（層疊樣式表），然後將這個DIV層插入到當前頁面（body中）。DIV是一個塊級元素，DIV的內容自動地開始一個新行，換行是 固有的唯一格式表現，可以通過 的 class 或 id 應用額外的樣式。
然後使用AJAX技術異步請求加載字幕文件（如SRT文件），解析得到的responseText數據，將每個時間段的時間和對應的文字分別放入到時間數組和文字數組中。其中，AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
進一步，在步驟S3中，獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息的步驟具體包括：
每隔預定時間獲取當前播放時間信息，並與時間數組裡的時間信息匹配；
獲取相匹配的時間數組的標識；
根據所述標識讀取並顯示文字數組中對應的文字信息。
具體地，使用setInterval函數每隔預定時間（如1秒）不斷去獲取當前播放時間信息，並與時間數組裡的時間信息匹配，獲得相匹配的時間數組的標識（如下標），用這個下標讀取文字數組裡對應的文字信息，並根據時長顯示文字信息，從而達到同步顯示字幕的目的。
基於上述方法，本發明還提供一種播放視頻時加載字幕文件的系統較佳實施例，如圖2所示，其包括：
播放對象獲取模塊100，用於在WEB平臺通過瀏覽器播放視頻時，根據播放標籤獲取當前頁面的播放對象；
字幕加載模塊200，用於調用用於顯示字幕的函數，加載並解析字幕文件，將其中各時間段的時間信息和對應的文字信息分別放入到時間數組和文字數組中；
字幕顯示模塊300，用於獲取當前播放時間信息，並與時間數組裡的時間信息匹配，根據匹配結果讀取並顯示文字數組中對應的文字信息。
進一步，所述播放對象獲取模塊100具體包括：
第一設置單元，用於若當前頁面採用HTML5 VIDEO標籤，則設置播放對象為HTML5 VIDEO對象；
第二設置單元，若當前頁面採用HBBTV OBJECT標籤，則設置播放對象為HBBTV OBJECT對象。
進一步，系統還包括：
字幕路徑判斷模塊，用於根據播放對象的屬性值判斷是否有設置字幕路徑，若有則調用用於顯示字幕的函數，若否則流程結束。
進一步，字幕加載模塊200具體包括：
函數判斷單元，用於判斷是否存在用於顯示字幕的函數；
直接調用單元，用於若存在用於顯示字幕的函數，則直接調用所述函數；
函數創建單元，用於若不存在用於顯示字幕的函數，則用創建一個DIV層，根據當前頁面的位置設置DIV層的層疊樣式表，再將所述DIV層插入到當前頁面中。
進一步，字幕顯示模塊300具體包括：
時間匹配單元，用於每隔預定時間獲取當前播放時間信息，並與時間數組裡的時間信息匹配；
標識獲取單元，用於獲取相匹配的時間數組的標識；
文字顯示單元，用於根據所述標識讀取並顯示文字數組中對應的文字信息。
關於上述模塊單元的技術細節在前面的方法中已有詳述，故不再贅述。
綜上所述，本發明實現了在WEB平臺通過瀏覽器播放視頻時也能加載外掛字幕的功能，可更靈活的編輯字幕內容，實現字幕和視頻分離的目的，本發明兼容HBBTV OBJECT對象和HTML5 VIDEO對象播放視頻時，加載並顯示字幕。
應當理解的是，本發明的應用不限於上述的舉例，對本領域普通技術人員來說，可以根據上述說明加以改進或變換，所有這些改進和變換都應屬於本發明所附權利要求的保護範圍。