一种用于移动端的跨平台视频播放实现方法及装置
技术领域
本发明涉及视频播放技术领域，尤其涉及一种用于移动端的跨平台视频播放实现方法及装置。
背景技术
视频播放广泛应用于各种web平台，微信H5，各大app的小程序比如微信小程序、支付宝小程序，尤其是近几年短视频的兴起，用户对视频播放的需求更是剧增。
然而各种web浏览器内核的差异，尤其是安卓平台，浏览器内核更是五花八门，对video的兼容各不相同，微信内置X5内核更是禁止video写入canvas，导致移动端的视频播放表现各种各样，不符合预期的效果。
目前市面上移动端视频播放的各种问题：有的机型能自动全屏，有的却无法全屏；有的机型不能旋转，有的机型自动旋转90度；有的机型能自动播放，有的机型不能自动播放；有的机型视频无法播放；有的机型视频第一帧是空白，有些微信版本H5播放视频，结尾会强行加入广告。
现有技术中一般是根据各种平台进行适配，比如针对IOS平台进行修复，针对安卓具体各种版本进行修复，针对微信H5文档进行修复等等。为了一个视频播放功能的需求，最后为了兼容各个平台，要写出N套兼容代码；不利于之后的维护；甚至有的低端机型不能播放或者无法满足产品需求，为用户看视频带来了不便。
因此，现有技术还有待于改进和发展。
发明内容
鉴于上述现有技术的不足，本发明的目的在于提供一种用于移动端的跨平台视频播放实现方法及装置，旨在解决现有技术移动端跨平台视频播放实现需要编写N套兼容代码，维护难度大，用户使用体验差的问题。
本发明的技术方案如下：
一种用于移动端的跨平台视频播放实现方法，所述方法包括：
获取视频内容，将视频内容写入浏览器中，根据浏览器对视频内容进行解析，获取解析后的视频帧图像和音频数据；
按照预设的参数对视频帧图像进行截取，生成若干张帧截图；
对所有的帧截图进行拼接生成一张目标图像，对目标图像进行配置生成动画精灵；
将生成的动画精灵与音频数据进行匹配，实现动画和音频的同步播放，完成视频播放的模拟。
可选地，所述获取视频内容，将视频内容写入浏览器中，包括：
获取待处理的视频内容，将所述的视频内容写入浏览器的canvas中。
可选地，所述获取视频内容，将视频内容写入浏览器中，根据浏览器对视频内容进行解析，获取解析后的视频帧图像和音频数据，包括：
获取视频内容，通过编译器项目将视频处理库编译成Webassembly支持的视频文件，根据Webassembly将视频文件写入本地浏览器的canvas中。
可选地，所述按照预设的参数对视频帧图像进行截取，生成帧截图，包括：
通过Web Worker新建一个线程，所述线程用于按照预设的参数对视频帧图像进行截取，生成帧截图。
可选地，所述按照预设的参数对视频帧图像进行截取，生成若干张帧截图，包括：
按照预设的清晰度、每秒截取视频帧图像数量、图片转换格式，对视频帧图像进行截取操作后，生成若干张帧截图。
可选地，所述对所有的帧截图进行拼接生成一张目标图像，对目标图像进行配置生成动画精灵，包括：
对所有的帧截图进行拼接生成一张目标图像，
根据视频的参数信息、每帧图像的位置信息生成一个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中。
进一步地，获取视频内容，将视频内容写入浏览器中，根据浏览器对视频内容进行解析，获取解析后的视频帧图像和音频数据，包括：
获取视频内容，通过编译器项目将视频处理库编译成Webassembly支持的视频文件，根据Webassembly将视频文件写入本地浏览器的canvas中。
具体实施时，使用Emscripten将“最强大”的视频处理库～FFmpeg编译成Webassembly，在用户本地浏览器进行视频处理。
FFmpeg是用于处理多媒体内容(例如音频，视频，字幕和相关元数据)的库和工具的集合。对音视频进行记录、转换和流传输的一套完整的跨平台解决方案。FFmpeg中具有以下函数：
libavcodec提供了各种音视频格式的编解码器。
libavformat实现流协议，容器格式转换，基本I/O访问。
libavutil提供了哈希，解压缩器和其他实用程序功能。
libavfilter提供了一种通过滤波器链更改解码的音频和视频的方法。
libavdevice提供访问捕获和回放设备的抽象。
libswresample实现音频混合和重采样例程。
libswscale实现颜色转换和缩放例程。
FFmpeg常用功能有视频转图片，图片转视频，视频提取声音，视频转gif，gif转视频；视频格式转换，码率控制，尺寸控制；视频剪辑，拼接，添加水印+去水印；压缩视频，压缩mp3，压缩gif等功能。
FFmpeg配置项包括便不限于decoder解码，encoder编码，demuxer分流器，muxer多工器，filter过滤器。
Webassembly被设计为一个可移植的目标，用于编译C/C++/Rust等高级语言，支持在Web上部署客户端和服务器应用程序。
Emscripten是一个LLVM-to-JavaScript Compiler，可以把c/c++、Rust等代码编译成wasm；wasm是基于堆栈的虚拟机的二进制指令格式。
本发明实施例使用Emscripten将FFmpeg库编译成.wasm和.js文件。对视频进行自定义截图和获取声音等处理
进一步地，按照预设的参数对视频帧图像进行截取，生成帧截图，包括：
通过Web Worker新建一个线程，所述线程用于按照预设的参数对视频帧图像进行截取，生成帧截图。
具体实施时，考虑到大图片压缩处理的时间可能较长，引入Web Worker单独开个线程，不影响用户的其他操作。
在一些其他的实施例中，考虑到用户可能有弱网的情况，使用Service Worder浏览器数据储存技术，将各种文件进行本地缓存，方便弱网或者断网情况下使用。
本发明实施例基于浏览器环境，采用纯web前端技术，可以方便实现移动端各种平台的视频播放兼容问题，一套代码各种移动端浏览器表现都一致，而且初始化完成后所有代码都会缓存到本地浏览器，用户可以在任何网络环境下使用。
进一步地，按照预设的参数对视频帧图像进行截取，生成若干张帧截图，包括：
按照预设的清晰度、每秒截取视频帧图像数量、图片转换格式，对视频帧图像进行截取操作后，生成若干张帧截图。
具体实施时，对视频帧截取的图像的参数自行定义。参数包括但不限于清晰度、每秒截取视频帧图像数量、图片转换格式。
本发明实例的视频帧图像为jpeg类型图片，对jpeg类型图片的压缩时，成功的时候返回ArrayBuffer，失败的时候返回Imagedata；
自定义帧截图的截取参数代码示例为-i/demo.mp4-qscale:v 5-r 25-fimage2/％d.jpg；其中-i后面是输入的视频文件；-qscale:v 5设置视频的质量清晰度；-r25每一秒截取25帧画面；image2/％d.jpg转成图片，文件名数字递增。
进一步的实施例中，对所有的帧截图进行拼接生成一张目标图像，对目标图像进行配置生成动画精灵，包括：
对所有的帧截图进行拼接生成一张目标图像，
根据视频的参数信息、每帧图像的位置信息生成一个json配置文件和json配置表；
根据目标图像、json配置文件和json配置表生成动画精灵。
具体实施时，所有的帧截图拼成一张大图，生成spritesheet_baseTexture；每个视频的参数信息，每帧图像的位置等信息生成一个json配置文件；json配置表和spritesheet_baseTexture生成spritesheet；由spritesheet生成texture数组；最后生成我们的动画精灵animated_sprite
const spritesheet＝new PIXI.Spritesheet(spritesheet_baseTexture,json_data)；
let texture_array＝await this.get_video_texture_array(spritesheet)；
const animated_sprite＝new PIXI.extras.AnimatedSprite(texture_array。
进一步地，将生成的动画精灵与音频数据进行匹配，实现动画和音频的同步播放，完成视频播放的模拟，包括：
封装视频播放参数函数，根据视频播放参数函数将生成的动画精灵与音频数据的匹配，实现动画和音频的同步播放，完成视频播放的模拟。
具体实施时，获取音频数据的代码格式为-i/demo.mp4-b:a 8k-f mp3/demo.mp3，其中-i输入的适配文件；-b:a 8k输出声音的品质；-f mp3/demo.mp3输出音频文件的格式和文件名。
封装播放、暂停、快进、快退等视频播放参数函数，保证动画精灵和音频播放同步，来模拟video的播放。
由以上方法实施例可知，本发明实施例提供了用于移动端的跨平台视频播放实现方法，可以适配各种版本的IOS、Android的各版本微信H5页面，所有的表现保持一致，没有video播放那样各种各样的问题。
而且因为把视频写入浏览器的canvas中，可以像普通动画精灵一样进行层级调整--上下移层，旋转，缩放等各种复杂操作，可实现的交互功能比普通video的单纯播放功能要强大很多；
因视频播放需求应用于各种web平台，具有强大的市场潜力。
需要说明的是，在上述各个实施例中，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，也可以交换执行等等。
本发明另一实施例提供一种用于移动端的跨平台视频播放实现装置，如图2所示，装置10包括：
一个或多个处理器110以及存储器120，图2中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图2中以通过总线连接为例。
处理器110用于完成装置10的各种控制逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。
存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的用于移动端的跨平台视频播放实现方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行装置10的各种功能应用以及数据处理，即实现上述方法实施例中的用于移动端的跨平台视频播放实现方法。
存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据装置10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至装置10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的用于移动端的跨平台视频播放实现方法，例如，执行以上描述的图1中的方法步骤S100至步骤S400。
本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S100至步骤S400。
作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明丽非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。
本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行上述方法实施例的用于移动端的跨平台视频播放实现方法。例如，执行以上描述的图1中的方法步骤S100至步骤S400。
以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。
通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。
除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。
已经在本文中在本说明书和附图中描述的内容包括能够提供用于移动端的跨平台视频播放实现方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。
