[發明專利]一種在網頁中播放視頻的方法、裝置、系統及計算設備

有效

• 申請號: 201910766977.7
• 申請日: 2019-08-20
• 公開（公告）號: CN110505511B
• 公開（公告）日: 2022-03-18
• 發明（設計）人: 丁國龍
• 申請（專利權）人: 海南車智易通信息技術有限公司
• 主分類號: H04N21/43
• 分類號: H04N21/43;H04N21/472;H04N21/4782;H04N21/854;H04N21/8543
• 代理公司: 北京思睿峰知識產權代理有限公司 11396
• 代理人: 謝建云;趙愛軍

1.一種在網頁中播放視頻的方法，在視頻播放系統中執行，所述視頻播放系統包括客戶端和網絡服務器，所述網絡服務器包括web服務器和數據服務器，所述方法包括：

數據服務器對視頻文件進行離線處理：根據原始視頻文件的格式，調用對應格式的解碼庫解碼并按所需幀率抽取圖像，將抽取出的圖像數據統一轉換為jpg格式的圖片，并按序列命名；根據原始視頻文件的格式，抽取對應的音頻數據，把抽取出的音頻數據轉化為音頻文件；將jpg序列幀圖像文件和音頻文件推送到web服務器；生成與原始視頻文件關聯的元數據信息；

客戶端執行如下處理：

從網絡服務器獲取待播放的視頻文件對應的元數據信息，其中，所述視頻文件在網絡服務器中被處理為一組序列幀圖像和一個音頻文件，所述元數據信息中包括序列幀圖像總數、序列幀圖像加載地址前綴和音頻文件加載地址；

對序列幀圖像加載地址前綴、序列幀圖像的序號和圖片類型進行拼接，得到相應序列幀圖像的加載地址，向網絡服務器請求對應的序列幀圖像，并將所述網絡服務器返回的序列幀圖像保存在圖像隊列中；

根據所述音頻文件加載地址向網絡服務器請求對應的音頻文件；

在網頁中創建一畫布對象，并獲取所述畫布對象的畫筆；

在rAF的回調周期，利用所述畫筆將所述圖像隊列中的序列幀圖像繪制到畫布上，并記錄當前播放的序列幀圖像的圖像索引；

根據當前圖像索引和序列幀圖像總數，計算播放進度比例，并根據所述播放進度比例和音頻文件的總播放時長計算音頻偏移量；

在所述音頻文件加載完成后，從所述音頻偏移量處開始播放所述音頻文件。

2.如權利要求1所述的方法，其中，所述元數據信息中還包括播放刷新率fps，相應地，所述畫筆繪制序列幀圖像的頻率與所述fps相對應。

3.如權利要求1或2所述的方法，其中，所述網頁為三維網頁，所述在網頁中播放圖像隊列中的序列幀圖像，還包括：

獲取所述畫布對象；

創建一紋理對象，設置所述紋理對象的數據來源是所述畫布對象的畫圖；

將所述紋理對象貼到所述三維網頁中的三維建筑模型上。

4.如權利要求1所述的方法，其中，所述從音頻偏移量處開始播放所述音頻文件，包括：

調用web audio api從所述音頻偏移量處開始播放所述音頻文件。

5.如權利要求4所述的方法，其中，所述元數據信息中還包括音頻文件的總播放時長；

若所述web audio api在解碼音頻文件時，不能從所述音頻文件中獲取總播放時長，則從所述元數據信息中獲取所述總播放時長。

6.一種視頻播放系統，包括：

網絡服務器web服務器和數據服務器；

數據服務器，適于對視頻文件進行離線處理：根據原始視頻文件的格式，調用對應格式的解碼庫解碼并按所需幀率抽取圖像，將抽取出的圖像數據統一轉換為jpg格式的圖片，并按序列命名；根據原始視頻文件的格式，抽取對應的音頻數據，把抽取出的音頻數據轉化為音頻文件；將jpg序列幀圖像文件和音頻文件推送到web服務器；生成與原始視頻文件關聯的元數據信息；

客戶端，適于從網絡服務器獲取待播放的視頻文件對應的元數據信息，其中，所述視頻文件在網絡服務器中被處理為一組序列幀圖像和一個音頻文件，所述元數據信息中包括序列幀圖像總數、序列幀圖像加載地址前綴和音頻文件加載地址；

對序列幀圖像加載地址前綴、序列幀圖像的序號和圖片類型進行拼接，得到相應序列幀圖像的加載地址，向網絡服務器請求對應的序列幀圖像，并將所述網絡服務器返回的序列幀圖像保存在圖像隊列中；

根據所述音頻文件加載地址向網絡服務器請求對應的音頻文件；

在網頁中創建一畫布對象，并獲取所述畫布對象的畫筆；

在rAF的回調周期，利用所述畫筆將所述圖像隊列中的序列幀圖像繪制到畫布上，并記錄當前播放的序列幀圖像的圖像索引；

根據當前圖像索引和序列幀圖像總數，計算播放進度比例，并根據所述播放進度比例和音頻文件的總播放時長計算音頻偏移量；

在所述音頻文件加載完成后，從所述音頻偏移量處開始播放所述音頻文件。