一种用于移动端的跨平台视频播放实现方法及装置制造方法及图纸

技术编号:26386112 阅读:35 留言:0更新日期:2020-11-19 23:55
本发明专利技术公开了一种用于移动端的跨平台视频播放实现方法及装置,方法包括:获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据;按照预设的参数对视频帧图像进行截取,生成若干张帧截图;对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵;将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟。本发明专利技术实施例基于浏览器环境,采用纯web前端技术,可以方便实现移动端各种平台的视频播放兼容问题,一套代码各种移动端浏览器表现都一致,为用户在移动端的各个平台看视频提供了便利。

【技术实现步骤摘要】
一种用于移动端的跨平台视频播放实现方法及装置
本专利技术涉及视频播放
,尤其涉及一种用于移动端的跨平台视频播放实现方法及装置。
技术介绍
视频播放广泛应用于各种web平台,微信H5,各大app的小程序比如微信小程序、支付宝小程序,尤其是近几年短视频的兴起,用户对视频播放的需求更是剧增。然而各种web浏览器内核的差异,尤其是安卓平台,浏览器内核更是五花八门,对video的兼容各不相同,微信内置X5内核更是禁止video写入canvas,导致移动端的视频播放表现各种各样,不符合预期的效果。目前市面上移动端视频播放的各种问题:有的机型能自动全屏,有的却无法全屏;有的机型不能旋转,有的机型自动旋转90度;有的机型能自动播放,有的机型不能自动播放;有的机型视频无法播放;有的机型视频第一帧是空白,有些微信版本H5播放视频,结尾会强行加入广告。现有技术中一般是根据各种平台进行适配,比如针对IOS平台进行修复,针对安卓具体各种版本进行修复,针对微信H5文档进行修复等等。为了一个视频播放功能的需求,最后为了兼容各个平台,要写本文档来自技高网...

【技术保护点】
1.一种用于移动端的跨平台视频播放实现方法,其特征在于,所述方法包括:/n获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据;/n按照预设的参数对视频帧图像进行截取,生成若干张帧截图;/n对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵;/n将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟。/n

【技术特征摘要】
1.一种用于移动端的跨平台视频播放实现方法,其特征在于,所述方法包括:
获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据;
按照预设的参数对视频帧图像进行截取,生成若干张帧截图;
对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵;
将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟。


2.根据权利要求1所述的用于移动端的跨平台视频播放实现方法,其特征在于,所述获取视频内容,将视频内容写入浏览器中,包括:
获取待处理的视频内容,将所述的视频内容写入浏览器的canvas中。


3.根据权利要求2所述的用于移动端的跨平台视频播放实现方法,其特征在于,所述获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据,包括:
获取视频内容,通过编译器项目将视频处理库编译成Webassembly支持的视频文件,根据Webassembly将视频文件写入本地浏览器的canvas中。


4.根据权利要求3所述的用于移动端的跨平台视频播放实现方法,其特征在于,所述按照预设的参数对视频帧图像进行截取,生成帧截图,包括:
通过WebWorker新建一个线程,所述线程用于按照预设的参数对视频帧图像进行截取,生成帧截图。


5.根据权利要求4所述的用于移动端的跨平台视频播放实现方法,其特征在于,所述按照预设的参数对视频帧图像进行截取,生成若干张帧截图,包括:
按照预设的清晰度、每秒截取视频帧图像数量、图片转换格式,对视频帧图像进行截取操作后,生成若干张帧截图。


6...

【专利技术属性】
技术研发人员:孙悦李天驰李晶
申请(专利权)人:深圳点猫科技有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1