【技术实现步骤摘要】
基于HTML5的视频播放方法、装置、系统、介质及浏览器
本专利技术涉及视频播放
,具体涉及一种基于HTML5的视频播放方法、装置、系统、介质及浏览器。
技术介绍
在安防应用场景中,需要在各安防系统的前端预览实时监控视频、以及录像回放视频,行业中通常使用浏览器来实现这一功能。目前的浏览器采用ActiveX插件技术实现相应视频的播放,但ActiveX技术具有非常大局限性,只能应用于WindowsIE浏览器,而其他浏览器则无法观看。并且,ActiveX插件在IE浏览器中始终于最顶层显示,导致监控界面设计集成验证难度非常大,实际使用效果并不理想。随着HTML5(HyperTextMarkupLanguage,超文本标记语言)的推出,这种情况得到了一定的改善。支持HTML5框架的浏览器可以在不依赖外部插件的情况下实现对音频和视频的播放。但另一方面,在安防领域中,视频预览过程中需要做到高质量低延迟,视频的传输通常采用GB/T28181、RTSP、厂家私有流等协议,视频的编码格式也通常有H264、H265、MPEG、MJPE ...
【技术保护点】
1.一种基于HTML5的视频播放方法,其特征在于,所述视频播放方法包括:/n根据指定传输协议获取任意编码格式的媒体数据,并从所述媒体数据中拆分出视频数据;/n对所述视频数据进行解码以获得多个第一图像格式的视频帧;/n对所述多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包;/n将所述多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道;/n所述前端HTML5组件从所述数据传输通道中获取所述多个数据包并进行拆包,将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上。/n
【技术特征摘要】
1.一种基于HTML5的视频播放方法,其特征在于,所述视频播放方法包括:
根据指定传输协议获取任意编码格式的媒体数据,并从所述媒体数据中拆分出视频数据;
对所述视频数据进行解码以获得多个第一图像格式的视频帧;
对所述多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包;
将所述多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道;
所述前端HTML5组件从所述数据传输通道中获取所述多个数据包并进行拆包,将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上。
2.根据权利要求1中所述的基于HTML5的视频播放方法,其特征在于,“对所述视频数据进行解码以获得多个第一图像格式的视频帧”的步骤进一步包括:
当所述视频数据能够直接被解码为所述第一图像格式的视频帧时,对所述视频数据直接进行解码以获得所述多个第一图像格式的视频帧;
当所述视频数据无法直接被解码为所述第一图像格式的视频帧时,先对所述视频数据进行解码以获得多个第二图像格式的视频帧,然后对所述多个第二图像格式的视频帧进行格式转换以获得多个所述第一图像格式的视频帧。
3.根据权利要求1中所述的基于HTML5的视频播放方法,其特征在于,“对所述视频数据进行解码”的步骤进一步包括:
先采用GPU对所述视频数据进行解码;
当采用GPU解码成功时,输出解码后的多个视频帧;
当采用GPU无法解码时,采用CPU对所述视频数据进行解码,并获得解码后的多个视频帧。
4.根据权利要求1中所述的基于HTML5的视频播放方法,其特征在于,“对所述多个第一图像格式的视频帧进行自定义协议封装”的步骤进一步包括:
结合时间戳和视频宽度信息对所述多个第一图像格式的视频帧采用二进制格式进行封装。
5.根据权利要求1中所述的基于HTML5的视频播放方法,其特征在于,“将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上”的步骤进一步包括:
调用WebGL接口,逐帧将拆包后获得的多个第一图像格式的视频帧渲染在所述浏览器中网页页面的画布上。
6.根据权利要求1中所述的基于HTML5的视频播放方法,其特征在于,所述第一图像格式为YUV420格式;所述第二图像格式为YUV格式或RGB格式。
7.一种基于HTML5的视频播放装置,其特征在于,所述视频播放装置包括:
数据拆封模块,用于根据指定传输协议获取任意编码格式的媒体数据,并从所述媒体数据中拆分出视频数据;
解码模块,用于对所述视频数据进行解码以获得多个第一图像格式的视频帧;
封装模块,用于对所述多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包,并将所述多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道;
HTML5组件,用于建立所述数据传输通道、从所述数据传输通道中获取所述多个数据包并进行拆包,将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网...
【专利技术属性】
技术研发人员:周前龙,
申请(专利权)人:四川云从天府人工智能科技有限公司,
类型:发明
国别省市:四川;51
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。