[發明專利]基于canvas的視頻播放方法、裝置、系統及介質

在審

• 申請號: 202210744711.4
• 申請日: 2022-06-27
• 公開（公告）號: CN115086763A
• 公開（公告）日: 2022-09-20
• 發明（設計）人: 余明峰
• 申請（專利權）人: 平安銀行股份有限公司
• 主分類號: H04N21/44
• 分類號: H04N21/44;H04N21/845;H04N21/858;H04N21/431
• 代理公司: 廣東良馬律師事務所 44395
• 代理人: 馬戎

本發明公開了基于canvas的視頻播放方法、裝置、系統及介質，方法包括：創建video標簽，所述video標簽用于拉取并隱藏目標視頻；在所述video標簽上創建canvas標簽；當監聽到所述video標簽的播放事件時，從所述目標視頻中逐幀獲取視頻幀圖像；將所述視頻幀圖像與預設元素合成后填充至所述canvas標簽中進行顯示。通過在video標簽上覆蓋canvas圖層并監聽播放事件，在目標視頻開始播放后逐幀獲取視頻幀圖像將其與其它的預設元素進行合成后繪制到canvas中進行顯示播放，不會觸發系統播放器，在實現靈活的視頻播放的同時也確保了視頻播放的可靠性。

技術領域

本發明涉及視頻技術領域，尤其涉及基于canvas的視頻播放方法、裝置、系統及介質。

背景技術

隨著移動互聯網的迅速發展，移動終端上各類視頻播放需求也越來越多樣化，例如添加彈幕、蒙層等等，然而目前在移動終端上播放網頁視頻時，往往通過HTML5(HyperText Markup Language 5，第5代超文本標記語言)的原生video標簽進行播放，可能會觸發移動終端的系統播放器導致視頻播放不可控，也難以在video標簽中加入彈幕或自定義控件等其它元素，使得視頻播放的靈活性和可靠性均下降，無法滿足多樣化的視頻播放需求。

發明內容

鑒于上述現有技術的不足，本發明的目的在于提供基于canvas的視頻播放方法、裝置、系統及介質，旨在提高視頻播放的靈活性和可靠性。

本發明的技術方案如下：

一種基于canvas的視頻播放方法，包括：

創建video標簽，所述video標簽用于拉取并隱藏目標視頻；

在所述video標簽上創建canvas標簽；

當監聽到所述video標簽的播放事件時，從所述目標視頻中逐幀獲取視頻幀圖像；

將所述視頻幀圖像與預設元素合成后填充至所述canvas標簽中進行顯示。

在一個實施例中，所述創建video標簽之前，所述方法還包括：

接收視頻播放請求，確認所述視頻播放請求所請求播放的目標視頻。

在一個實施例中，所述創建video標簽，具體包括：

創建video標簽并設置標簽屬性，所述標簽屬性至少包括所述視頻播放請求中攜帶的目標視頻的URL地址。

在一個實施例中，所述當監聽到所述video標簽的播放事件時，從所述目標視頻中逐幀獲取視頻幀圖像，包括：

監聽所述video標簽的播放事件是否被觸發；

若被觸發，通過預設定時器每隔預設時間從所述目標視頻中逐幀獲取視頻幀圖像。

在一個實施例中，所述通過預設定時器每隔預設時間從所述目標視頻中逐幀獲取視頻幀圖像，包括：

獲取當前屏幕的刷新頻率；

調用預設定時器，根據所述刷新頻率在每次屏幕刷新時執行一次回調函數，以逐幀獲取所述目標視頻中的視頻幀圖像。

在一個實施例中，所述將所述視頻幀圖像與預設元素合成后填充至所述canvas標簽中進行顯示，包括：

獲取與各幀視頻幀圖像對應的預設元素，以及所述預設元素的元素屬性；

根據所述預設元素的元素屬性，將所述預設元素添加至對應視頻幀圖像中得到目標圖像；

將所述目標圖像逐幀繪制到canvas標簽中進行顯示播放。

在一個實施例中，所述預設元素包括文本、線條、圖像、蒙層和/或預設控件。