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

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

【技术实现步骤摘要】
一种用于移动端的跨平台视频播放实现方法及装置
本专利技术涉及视频播放
,尤其涉及一种用于移动端的跨平台视频播放实现方法及装置。
技术介绍
视频播放广泛应用于各种web平台,微信H5,各大app的小程序比如微信小程序、支付宝小程序,尤其是近几年短视频的兴起,用户对视频播放的需求更是剧增。然而各种web浏览器内核的差异,尤其是安卓平台,浏览器内核更是五花八门,对video的兼容各不相同,微信内置X5内核更是禁止video写入canvas,导致移动端的视频播放表现各种各样,不符合预期的效果。目前市面上移动端视频播放的各种问题:有的机型能自动全屏,有的却无法全屏;有的机型不能旋转,有的机型自动旋转90度;有的机型能自动播放,有的机型不能自动播放;有的机型视频无法播放;有的机型视频第一帧是空白,有些微信版本H5播放视频,结尾会强行加入广告。现有技术中一般是根据各种平台进行适配,比如针对IOS平台进行修复,针对安卓具体各种版本进行修复,针对微信H5文档进行修复等等。为了一个视频播放功能的需求,最后为了兼容各个平台,要写出N套兼容代码;不利于之后的维护;甚至有的低端机型不能播放或者无法满足产品需求,为用户看视频带来了不便。因此,现有技术还有待于改进和发展。
技术实现思路
鉴于上述现有技术的不足,本专利技术的目的在于提供一种用于移动端的跨平台视频播放实现方法及装置,旨在解决现有技术移动端跨平台视频播放实现需要编写N套兼容代码,维护难度大,用户使用体验差的问题。本专利技术的技术方案如下:一种用于移动端的跨平台视频播放实现方法,所述方法包括:获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据;按照预设的参数对视频帧图像进行截取,生成若干张帧截图;对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵;将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟。可选地,所述获取视频内容,将视频内容写入浏览器中,包括:获取待处理的视频内容,将所述的视频内容写入浏览器的canvas中。可选地,所述获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据,包括:获取视频内容,通过编译器项目将视频处理库编译成Webassembly支持的视频文件,根据Webassembly将视频文件写入本地浏览器的canvas中。可选地,所述按照预设的参数对视频帧图像进行截取,生成帧截图,包括:通过WebWorker新建一个线程,所述线程用于按照预设的参数对视频帧图像进行截取,生成帧截图。可选地,所述按照预设的参数对视频帧图像进行截取,生成若干张帧截图,包括:按照预设的清晰度、每秒截取视频帧图像数量、图片转换格式,对视频帧图像进行截取操作后,生成若干张帧截图。可选地,所述对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵,包括:对所有的帧截图进行拼接生成一张目标图像,根据视频的参数信息、每帧图像的位置信息生成一个json配置文件和json配置表;根据目标图像、json配置文件和json配置表生成动画精灵。可选地,所述将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟,包括:封装视频播放参数函数,根据视频播放参数函数将生成的动画精灵与音频数据的匹配,实现动画和音频的同步播放,完成视频播放的模拟。本专利技术的另一实施例提供了一种用于移动端的跨平台视频播放实现装置,所述装置包括至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行上述的用于移动端的跨平台视频播放实现方法。本专利技术的另一实施例还提供了一种非易失性计算机可读存储介质,所述非易失性计算机可读存储介质存储有计算机可执行指令,该计算机可执行指令被一个或多个处理器执行时,可使得所述一个或多个处理器执行上述的用于移动端的跨平台视频播放实现方法。本专利技术的另一种实施例提供了一种计算机程序产品,所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被处理器执行时,使所述处理器执行上述的用于移动端的跨平台视频播放实现方法。有益效果:本专利技术公开了一种用于移动端的跨平台视频播放实现方法及装置,相比于现有技术,本专利技术实施例基于浏览器环境,采用纯web前端技术,可以方便实现移动端各种平台的视频播放兼容问题,一套代码各种移动端浏览器表现都一致,为用户在移动端的各个平台看视频提供了便利。附图说明下面将结合附图及实施例对本专利技术作进一步说明,附图中:图1为本专利技术一种用于移动端的跨平台视频播放实现方法较佳实施例的流程图;图2为本专利技术一种用于移动端的跨平台视频播放实现装置的较佳实施例的硬件结构示意图。具体实施方式为使本专利技术的目的、技术方案及效果更加清楚、明确,以下对本专利技术进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本专利技术,并不用于限定本专利技术。以下结合附图对本专利技术实施例进行详细的说明。本专利技术实施例提供了一种用于移动端的跨平台视频播放实现方法。请参阅图1,图1为本专利技术一种用于移动端的跨平台视频播放实现方法较佳实施例的流程图。如图1所示,其包括步骤:步骤S100、获取视频内容,将视频内容写入浏览器中,根据浏览器对视频内容进行解析,获取解析后的视频帧图像和音频数据;步骤S200、按照预设的参数对视频帧图像进行截取,生成若干张帧截图;步骤S300、对所有的帧截图进行拼接生成一张目标图像,对目标图像进行配置生成动画精灵;步骤S400、将生成的动画精灵与音频数据进行匹配,实现动画和音频的同步播放,完成视频播放的模拟。具体实施时,因为video标签各种被劫持和兼容性的问题,直接放弃使用video标签,视频流的底层是一帧一帧的图像和声音组成,考虑对视频文件进行自定义帧率和尺寸的截图处理,并获取声音,用动画+声音播放,模拟video的播放。本专利技术实施例基于浏览器环境,使用WEB前端技术栈进行开发,兼容了Android、iOS各种型号机型的移动端内置浏览器和各版本微信H5,将video写入canvas,使得视频播放效果在移动端各平台表现一致,而且可以像普通动画精灵一样进行层级调整-上下移层,旋转,缩放等各种复杂操作,可实现的交互功能比普通video的单纯播放功能要强大的多。在进一步地实施例中,获取视频内容,将视频内容写入浏览器中,包括:获取待处理的视频内容,将所述的视频内容写入浏览器的canvas中。进一步地,获取本文档来自技高网...

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

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


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


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


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


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


6...

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

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

1