基于canvas的视频播放方法、装置、系统及介质.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN115086763A(43)申请公布日2022.09.20(21)申请号202210744711.4(22)申请日2022.06.27(71)申请人平安银行股份有限公司地址518000广东省深圳市罗湖区深南东路5047号(72)发明人余明峰(74)专利代理机构广东良马律师事务所44395专利代理师马戎(51)Int.Cl.H04N21/44(2011.01)H04N21/845(2011.01)H04N21/858(2011.01)H04N21/431(2011.01)权利要求书2页说明书8页附图2页(54)发明名称基于canvas的视频播放方法、装置、系统及介质(57)摘要本发明公开了基于canvas的视频播放方法、装置、系统及介质，方法包括：创建video标签，所述video标签用于拉取并隐藏目标视频；在所述video标签上创建canvas标签；当监听到所述video标签的播放事件时，从所述目标视频中逐帧获取视频帧图像；将所述视频帧图像与预设元素合成后填充至所述canvas标签中进行显示。通过在video标签上覆盖canvas图层并监听播放事件，在目标视频开始播放后逐帧获取视频帧图像将其与其它的预设元素进行合成后绘制到canvas中进行显示播放，不会触发系统播放器，在实现灵活的视频播放的同时也确保了视频播放的可靠性。CN115086763ACN115086763A权利要求书1/2页1.一种基于canvas的视频播放方法，其特征在于，包括：创建video标签，所述video标签用于拉取并隐藏目标视频；在所述video标签上创建canvas标签；当监听到所述video标签的播放事件时，从所述目标视频中逐帧获取视频帧图像；将所述视频帧图像与预设元素合成后填充至所述canvas标签中进行显示。2.根据权利要求1所述的基于canvas的视频播放方法，其特征在于，所述创建video标签之前，所述方法还包括：接收视频播放请求，确认所述视频播放请求所请求播放的目标视频。3.根据权利要求2所述的基于canvas的视频播放方法，其特征在于，所述创建video标签，具体包括：创建video标签并设置标签属性，所述标签属性至少包括所述视频播放请求中携带的目标视频的URL地址。4.根据权利要求1所述的基于canvas的视频播放方法，其特征在于，所述当监听到所述video标签的播放事件时，从所述目标视频中逐帧获取视频帧图像，包括：监听所述video标签的播放事件是否被触发；若被触发，通过预设定时器每隔预设时间从所述目标视频中逐帧获取视频帧图像。5.根据权利要求4所述的基于canvas的视频播放方法，其特征在于，所述通过预设定时器每隔预设时间从所述目标视频中逐帧获取视频帧图像，包括：获取当前屏幕的刷新频率；调用预设定时器，根据所述刷新频率在每次屏幕刷新时执行一次回调函数，以逐帧获取所述目标视频中的视频帧图像。6.根据权利要求1所述的基于canvas的视频播放方法，其特征在于，所述将所述视频帧图像与预设元素合成后填充至所述canvas标签中进行显示，包括：获取与各帧视频帧图像对应的预设元素，以及所述预设元素的元素属性；根据所述预设元素的元素属性，将所述预设元素添加至对应视频帧图像中得到目标图像；将所述目标图像逐帧绘制到canvas标签中进行显示播放。7.根据权利要求1‑6任意一项所述的基于canvas的视频播放方法，其特征在于，所述预设元素包括文本、线条、图像、蒙层和/或预设控件。8.一种基于canvas的视频播放装置，其特征在于，包括：第一创建模块，用于创建video标签，所述video标签用于拉取并隐藏目标视频；第二创建模块，用于在所述video标签上创建canvas标签；监听获取模块，用于当监听到所述video标签的播放事件时，从所述目标视频中逐帧获取视频帧图像；合成显示模块，用于将所述视频帧图像与预设元素合成后填充至所述canvas标签中进行显示。9.一种基于canvas的视频播放系统，其特征在于，所述系统包括至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，2CN115086763A权利要求书2/2页所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1‑7任一项所述的基于canvas的视频播放方法。10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1‑7任一项所述的基于canvas的视频播放方法。3CN115086763A说明书1/8页基于canvas的视频播放