基于HTML5的视频播放方法、装置、系统、介质及浏览器

技术领域

本发明涉及视频播放技术领域，具体涉及一种基于HTML5的视频播放方法、装置、系统、介质及浏览器。

背景技术

在安防应用场景中，需要在各安防系统的前端预览实时监控视频、以及录像回放视频，行业中通常使用浏览器来实现这一功能。目前的浏览器采用ActiveX插件技术实现相应视频的播放，但ActiveX技术具有非常大局限性，只能应用于Windows IE浏览器，而其他浏览器则无法观看。并且，ActiveX插件在IE浏览器中始终于最顶层显示，导致监控界面设计集成验证难度非常大，实际使用效果并不理想。

随着HTML5(Hyper Text Markup Language，超文本标记语言)的推出，这种情况得到了一定的改善。支持HTML5框架的浏览器可以在不依赖外部插件的情况下实现对音频和视频的播放。但另一方面，在安防领域中，视频预览过程中需要做到高质量低延迟，视频的传输通常采用GB/T 28181、RTSP、厂家私有流等协议，视频的编码格式也通常有H264、H265、MPEG、MJPEG等多种。而支持HTML5框架的浏览器目前能够解码的音视频编码格式非常有限，导致除极个别编码格式外，支持HTML5框架的浏览器无法对其余编码格式的音视频进行解码处理，因此也无法实现视频播放。

相应地，本领域需要一种新的基于HTML5的视频播放方法来解决上述问题。

发明内容

为了解决现有技术中的上述至少一个问题，即为了解决如何在支持HTML5框架的浏览器上实现更多编码格式的媒体数据简单高效地播放的技术问题，本发明的第一方面，提供了一种基于HTML5的视频播放方法，所述视频播放方法包括：

根据指定传输协议获取任意编码格式的媒体数据，并从所述媒体数据中拆分出视频数据；

对所述视频数据进行解码以获得多个第一图像格式的视频帧；

对所述多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包；

将所述多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道；

所述前端HTML5组件从所述数据传输通道中获取所述多个数据包并进行拆包，将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上。

在上述基于HTML5的视频播放方法的优选技术方案中，“对所述视频数据进行解码以获得多个第一图像格式的视频帧”的步骤进一步包括：

当所述视频数据能够直接被解码为所述第一图像格式的视频帧时，对所述视频数据直接进行解码以获得所述多个第一图像格式的视频帧；

当所述视频数据无法直接被解码为所述第一图像格式的视频帧时，先对所述视频数据进行解码以获得多个第二图像格式的视频帧，然后对所述多个第二图像格式的视频帧进行格式转换以获得多个所述第一图像格式的视频帧。

在上述基于HTML5的视频播放方法的优选技术方案中，“对所述视频数据进行解码”的步骤进一步包括：

先采用GPU对所述视频数据进行解码；

当采用GPU解码成功时，输出解码后的多个视频帧；

当采用GPU解码不成功时，采用CPU对所述视频数据进行解码，并获得解码后的多个视频帧。

在上述基于HTML5的视频播放方法的优选技术方案中，“对所述多个第一图像格式的视频帧进行自定义协议封装”的步骤进一步包括：

结合时间戳和视频宽度信息对所述多个第一图像格式的视频帧采用二进制格式进行封装。

在上述基于HTML5的视频播放方法的优选技术方案中，“将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上”的步骤进一步包括：

调用WebGL接口，逐帧将拆包后获得的多个第一图像格式的视频帧渲染在所述浏览器中网页页面的画布上。

在上述基于HTML5的视频播放方法的优选技术方案中，所述第一图像格式为YUV420格式；所述第二图像格式为YUV格式或RGB格式。

本发明的第二方面，提供了一种基于HTML5的视频播放装置，所述视频播放装置包括：

数据拆封模块，用于根据指定传输协议获取任意编码格式的媒体数据，并从所述媒体数据中拆分出视频数据；

解码模块，用于对所述视频数据进行解码以获得多个第一图像格式的视频帧；

封装模块，用于对所述多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包，并将所述多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道；

HTML5组件，用于建立所述数据传输通道、从所述数据传输通道中获取所述多个数据包并进行拆包，将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上。

在上述基于HTML5的视频播放装置的优选技术方案中，所述视频播放装置还包括转换模块，所述解码模块和所述转换模块通过下列方式来对所述视频数据进行解码以获得多个第一图像格式的视频帧：

当所述视频数据能够直接被解码为所述第一图像格式的视频帧时，所述解码模块对所述视频数据直接进行解码以获得所述多个第一图像格式的视频帧；

当所述视频数据无法直接被解码为所述第一图像格式的视频帧时，所述解码模块先对所述视频数据进行解码以获得多个第二图像格式的视频帧，然后所述转换模块对所述多个第二图像格式的视频帧进行格式转换以获得多个所述第一图像格式的视频帧。

在上述基于HTML5的视频播放装置的优选技术方案中，所述解码模块通过下列方式来对所述视频数据进行解码：

先采用GPU对所述视频数据进行解码；

当采用GPU解码成功时，输出解码后的多个视频帧；

当采用GPU解码不成功时，采用CPU对所述视频数据进行解码，并获得解码后的多个视频帧。

在上述基于HTML5的视频播放装置的优选技术方案中，所述封装模块通过下列方式来对所述多个第一图像格式的视频帧进行自定义协议封装：

结合时间戳和视频宽度信息对所述多个第一图像格式的视频帧采用二进制格式进行封装。

在上述基于HTML5的视频播放装置的优选技术方案中，所述视频播放模块通过下列方式来将拆包后的所述多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上：

调用WebGL接口，逐帧将拆包后获得的多个第一图像格式的视频帧渲染在所述浏览器中网页页面的画布上。

在上述基于HTML5的视频播放装置的优选技术方案中，所述第一图像格式为YUV420格式；所述第二图像格式为YUV格式或RGB格式。

本发明的第三方面，提供了一种基于HTML5的视频播放装置，该视频播放装置包括处理器和存储器，存储器适于存储多条程序代码，程序代码适于由处理器加载并运行以执行前述优选技术方案中任一项所述的基于HTML5的视频播放方法；或者一种计算机可读存储介质，其中存储有多条程序代码，其特征在于，所述程序代码适于由处理器加载并运行以执行上述优选技术方案中任一项所述的基于HTML5的视频播放方法。

本发明的第四方面，提供了一种基于HTML5的视频播放系统，所述视频播放系统包括：监控设备、服务器以及上述优选技术方案中任一项所述的基于HTML5的视频播放装置；所述监控设备被配置成采集目标区域附近的媒体数据并且将采集结果发送至所述服务器；所述服务器被配置为将所述媒体数据编码封装后发送至所述视频播放装置。

本发明的第五方面，提供了一种浏览器，所述浏览器包括上述优选技术方案中任一项所述的基于HTML5的视频播放方法；或者一种浏览器装置，所述浏览器装置包括上述优选技术方案中任一项所述的基于HTML5的视频播放装置。

本发明上述一个或多个技术方案，至少具有如下一种或多种有益效果：

本申请的基于HTML5的视频播放的技术方案，通过预先在浏览器外对不同编码格式的媒体数据进行解码处理以获得浏览器支持的第一图像格式的视频帧，然后对多个视频帧进行自定义协议封装并送入与浏览器的前端HTML5组件建立的数据传输通道，最后利用HTML5组件从数据传输通道中获取封装好的数据包并拆包后直接绘制在浏览器的网页页面上，使得支持HTML5框架的浏览器在无需额外安装插件进行解码的情况下，即可对预先解码后的不同编码格式的媒体数据进行播放，解决了如何在支持HTML5框架的浏览器上实现更多编码格式的媒体数据简单高效地播放的技术问题。并且由于视频的取流、解码、封装等过程均独立于浏览器之外，因此本申请的技术方案还可以非常方便的集成在安装有支持HTML5框架的浏览器的客户机中，不但兼容多种传输协议和编码格式，而且支持跨平台应用，覆盖了目前安防行业中绝大部分的视频播放的需求。此外，通过对视频帧进行自定义协议封装，避免了采用公共协议封装需要进行兼容处理的缺陷，能够提升数据传输效率，实现简单高效地播放。

进一步地，通过采用GPU解码，在解码不成功时再使用CPU解码，本申请还能够实现硬件解码/软件解码的动态切换，充分利用客户机的进行视频的解码及显示，具有非常高的转码性能。

进一步地，通过采用二进制格式对第一图像格式的视频帧进行封装，使得视频数据在程序内部传输时避免了像其他公共协议一样需要进行兼容处理，因此传输效率高。并且采用二进制格式进行封装和拆包，还使得数据包的封装和拆包速度大幅提升，在实现视频的高质量预览的同时，还能够降低延迟，实现媒体数据简单高效地播放。

附图说明

下面参照附图来描述本发明的基于HTML5的视频播放方法、装置、系统、介质及浏览器。附图中：

图1为本发明的基于HTML5的视频播放方法的一个实施例的主要流程图；

图2为本发明的基于HTML5的视频播放方法的一个实施例的逻辑图；

图3为本发明的基于HTML5的视频播放装置的一个实施例的结构框图；

图4为本发明的基于HTML5的视频播放系统的一个实施例的结构框图。

具体实施方式

为了便于理解发明,下文将结合说明书附图和实施例对本发明作更全面、细致地描述，但本领域技术人员应当理解的是，这些实施方式仅仅用于解释本发明的技术原理，并非旨在限制本发明的保护范围。

在本发明的描述中，“模块”、“处理器”可以包括硬件、软件或者两者的组合。一个模块可以包括硬件电路，各种合适的感应器，通信端口，存储器，也可以包括软件部分，比如程序代码，也可以是软件和硬件的组合。处理器可以是中央处理器、微处理器、图像处理器、数字信号处理器或者其他任何合适的处理器。处理器具有数据和/或信号处理功能。处理器可以以软件方式实现、硬件方式实现或者二者结合方式实现。非暂时性的计算机可读存储介质包括任何合适的可存储程序代码的介质，比如磁碟、硬盘、光碟、闪存、只读存储器、随机存取存储器等等。术语“A和/或B”表示所有可能的A与B的组合，比如只是A、只是B或者A和B。术语“至少一个A或B”或者“A和B中的至少一个”含义与“A和/或B”类似，可以包括只是A、只是B或者A和B。单数形式的术语“一个”、“这个”也可以包含复数形式。

如背景技术所述，在诸如安防监控的应用场景中，需要在各安防系统的前端预览实时监控视频、以及录像回放视频，行业中通常使用浏览器来实现这一功能。但目前采用ActiveX插件的浏览器对浏览器的选择局限性大，仅支持Windows IE浏览器，并且ActiveX插件还导致监控截面设计集成验证工作非常大。而支持HTML5框架的浏览器虽然选择面更广，而且也可以在不依赖外部插件的情况下实现对音视频的播放，但是支持HTML5框架的浏览器能够解码的视频编码和音频编码格式有限，无法满足安防行业内多种编码格式的音视频播放需求。

为此，本申请提出了一种基于HTML5的视频播放方法，该方法通过预先在浏览器外对不同编码格式的媒体数据进行解码处理以获得浏览器支持的第一图像格式的视频帧，然后对多个视频帧进行自定义协议封装并送入与浏览器的前端HTML5组件建立的数据传输通道，最后利用HTML5组件从数据传输通道中获取封装好的数据包并拆包后逐帧绘制在支持HTML5框架的浏览器中的网页页面上，使得支持HTML5框架的浏览器无需额外安装插件，即可对解码后的媒体数据进行简单高效地播放。并且由于视频的取流、解码、转码过程等均独立于浏览器之外，因此本申请的技术方案还可以非常方便的集成在安装有支持HTML5框架的浏览器的客户机中，不但兼容多种传输协议和编码格式，而且支持跨平台应用，覆盖了目前安防行业中绝大部分的视频播放的需求。此外，通过对视频帧进行自定义协议封装，避免了采用公共协议封装需要进行兼容处理的缺陷，能够提升数据传输效率，实现简单高效地播放。

下面参照附图1和图2，对本发明的基于HTML5的视频播放方法进行详细描述。其中，图1为本发明的基于HTML5的视频播放方法的一个实施例的主要流程图；图2为本发明的基于HTML5的视频播放方法的一个实施例的逻辑图。

如图1所示，为解决如何让采用HTML5框架的浏览器支持更多视频编码格式的技术问题，本申请的基于HTML5的视频播放方法主要包括如下步骤：

S101、根据指定传输协议获取任意编码格式的媒体数据，并从媒体数据中拆分出视频数据。

在一种可能的实施方式中，编码后的媒体数据可以是视频数据，也可以是音视频数据，该数据由安防系统的监控设备获取，并通过指定的传输协议传输给客户机。其中，监控设备可以为网络视频录像机(NVR)、监控摄像头等，客户机可以为用户的台式电脑、手机、平板电脑等，监控设备与客户机之间通过服务器连接，监控设备将采集到的监控区域的媒体数据上传到服务器，服务器对媒体数据进行编码后通过指定的流媒体传输协议发送到客户机，供客户机解码播放。在客户机中安装有多个应用程序，包括支持HTML5框架的浏览器、解码程序以及HTML5组件，在解码程序中可以预先设置有多种解码器，多种解码器可以用于对采用不同类型的编解码格式编码的视频数据进行解码处理。HTML5组件可以基于Shader编写，编写后将该程序嵌入在支持HTML5框架的浏览器中，以对解码程序解码处理后的视频帧绘制在浏览器上进行播放。其中，流媒体传输协议可以为GB/T 28181、RTSP或其他厂家私有协议等，本申请对此不作限制。对于服务器和解码器支持的视频编解码，有很多算法和标准，常见的有国际电联的H.264、H.265视频编解码标准，运动静止图像专家组提出的M-JPEG视频编解码标准和国际标准化组织运动图像专家组提出的MPEG系列视频编解码标准等，本申请对此不作具体限制。当然，在其他一些实施方式中，也可以将服务器的功能集成到监控设备中，而使监控设备与客户机直接连接。

在一种实施方式中，监控摄像头拍摄的原始图像格式为YUV图像格式，服务器对接收到YUV图像格式的的媒体数据进行编码后，通过指定的流媒体传输协议RTSP发送到客户机的解码程序中，解码程序接收到编码后的媒体数据后，首先对该媒体数据进行校验并从该媒体数据中拆分出视频数据。其中，校验过程主要是跟据流媒体协议检查收到的媒体数据的正确性，如果收到的数据不正确或不全的情况下将丢弃。拆分过程主要通过流媒体协议中的数据类型判断是否为视频数据，如果为视频数据则将视频数据放入视频解码队列等待解码。

S103、对视频数据进行解码以获得多个第一图像格式的视频帧。

在一种可能的实施方式中，在将视频数据放入视频解码队列后，解码程序中与视频数据的编码格式相对应的解码器对视频数据进行解码操作，获得多个第一图像格式的视频帧。解码后的多个第一图像格式的视频帧放入封装和发送队列，等待封装和发送。

在一种可能的实施方式中，第一图像格式可以为YUV420格式。YUV420格式为YUV图像格式的一种采样方式。YUV图像格式有三种采样方式，分别是YUV444、YUV422、YUV420，其中YUV444为通常意义上的YUV。在YUV中，“Y”表示明亮度(Luminance或Luma)，即灰阶值；而“U”和“V”表示色度(Chrominance或Chroma)。YUV是被欧洲电视系统所采用的一种颜色编码方法，是PAL和SECAM模拟彩色电视制式采用的颜色空间。在现代彩色电视系统中，通常采用三管彩色摄影机或彩色CCD摄影机进行取像，然后把取得的彩色图像信号经分色、分别放大校正后得到RGB，再经过矩阵变换电路得到亮度信号Y和两个色差信号B－Y(即U)、R－Y(即V)，最后发送端将亮度和色差三个信号分别进行编码，用同一信道发送出去。这种色彩的表示方法就是所谓的YUV色彩空间表示。采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。当然，除了YUV420格式外，本领域技术人员也可以采用其他图像格式，如YUV422格式、RGB格式等。

一种优选地实施方式中，解码过程可以采用硬件解码和软件解码动态切换的方式进行。具体地，优先采用GPU对所述视频数据进行解码(即硬件解码)；当采用GPU解码成功时，输出解码后的多个视频帧；当采用GPU解码不成功时，则采用CPU对所述视频数据进行解码(即软件解码)，并获得解码后的多个视频帧。需要说明的是，判断是否GPU能够对视频数据进行解码处理，通常在GPU获得视频数据的时候就能确定，如果存在硬件不兼容的情况，即GPU无法解码当前编码格式下的视频数据，GPU会给出无法解码的反馈信息，此时采用CPU对视频数据进行解码。其中，GPU(Graphic Processing Unit)为客户机上的图形处理器，CPU(Central Processing Unit)为客户机上的中央处理器。由于GPU解码的兼容性不够强，因此有可能会出现无法解码的情况。此时解码程序内部判断如果GPU解码不成功，则自动转换使用CPU解码。

在一种可能的实施方式中，上述步骤S103进一步包括：当视频数据能够直接被解码为第一图像格式的视频帧时，对视频数据直接进行解码以获得多个第一图像格式的视频帧；当视频数据无法直接被解码为第一图像格式的视频帧时，先对视频数据进行解码以获得多个第二图像格式的视频帧，然后对多个第二图像格式的视频帧进行格式转换以获得多个第一图像格式的视频帧。

当GPU能够解码当前视频数据的编码格式时，并非所有的GPU都能够一次性将视频数据解码为第一图像格式(即YUV420格式)。而对于采用CPU对视频数据进行解码时，一般都能够直接解码为第一图像格式。因此，在解码过程中，如果GPU能够将视频数据一次性解码为第一图像格式，则直接将视频数据解码为第一图像格式即可；否则，如果GPU无法将视频数据一次性解码为第一图像格式，则可以先对视频数据解码以获得多个第二图像格式，然后再将第二图像格式转换为第一图像格式。

例如，在一种可能的实施方式中，第二图像格式为视频数据的原始图像格式，即YUV格式，当然在其他实施方式中也可以为RGB等格式。当GPU无法将视频数据一次性解码为YUV420时，通常GPU可以将视频数据解码为原始图像格式(如YUV格式等)，此时只需对原始图像格式进行一次格式转换即可转换为第一图像格式。

示例性地，在一种可能的实施方式中，解码程序中还设置有编码器，在解码程序通过解码器对视频数据解码获得多个第二图像格式的视频帧后，紧接着再通过编码器对多个第二图像格式的视频帧进行编码获得多个第一图像格式的视频帧。例如，编码器通过libyuv库完成将YUV格式的视频帧编码成YUV420的视频帧。其中，libyuv库是Google开源的对YUV数据进行缩放、旋转和转换的跨平台库，可在Windows、Linux、Mac、Android等操作系统，以及x86、x64、arm架构上进行编译运行。

S105、对多个第一图像格式的视频帧进行自定义协议封装，获得封装好的多个数据包。

在一种可能的实施方式中，可以通过二进制格式将每个YUV420格式的视频帧封装为多个数据包。具体地，可以将解码后的第一图像格式的多个视频帧中每一个视频帧连同视频宽度、视频调试、时间戳等信息按照设定的顺序封装为一个数据包。其中，设定的顺序本申请中不作限制，例如视频帧与时间戳、视频宽度和视频调试中的一个或多个以任意的顺序封装为数据包。当然，除二进制格式外，本领域技术人员还可以采用其他自定义协议对视频帧进行封装，如八进制、十六进制、三十二进制等。

S107、将多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道。

在一种可能的实施方式中，HTML5组件在加载视频时，会通过Web Socket协议连接解码程序的端口，从而建立数据传输通道，并且在HTML5组件使用过程中，会保持此连接作为两端的数据传输通道。其中，Web Socket协议是一种在单个TCP连接上进行全双工通信的协议。Web Socket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。

在将多个视频帧逐一封装为数据包后，将多个数据包发送到建立的数据传输通道上，以便HTML5组件加载。

S109、从数据传输通道中获取多个数据包并进行拆包，将拆包后的多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面上。

在一种可能的实施方式中，将封装好的数据包发送到数据传输通道后，HTML5组件从数据传输通道中获取数据包并进行拆包，其中，拆包顺序与视频帧封装时的顺序相同。将拆包后的多个第一图像格式的视频绘制在支持HTML5框架的浏览器的网页页面的画布上。其中，画布也可以称为canvas，其具有宽和高的属性，用于描述在网页页面中所占的显示区域的大小。当逐帧将第二图像格式的视频帧绘制在浏览器中网页页面的画布上，可以实现播放视频帧的效果，这样就可以在网页页面中正常观看视频数据。

一种可能的实施方式中，可以通过软件或者硬件的方式在网页页面的画布上绘制视频帧。通过硬件的方式在网页页面的画布上绘制视频帧的绘制速度更快。HTML5组件可以可以调用webGL接口，对第二图像格式的视频帧进行渲染后显示在浏览器的画布上。其中，WebGL(Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。

在一种可能的实施方式中，视频播放方法还包括：从所述媒体数据中拆分出音频数据；对所述音频数据进行解码；播放解码后的所述音频数据；其中，所述音频数据的解码过程独立于所述浏览器。

解码程序接收到编码后的媒体数据后，除了从媒体数据中拆分出视频数据外，如果该媒体数据还包括音频数据，则解码程序对该媒体数据进行校验并通过流媒体协议中的数据类型判断是否为音频数据，如果为音频数据则将音频数据放入音频解码队列等待解码。解码程序中还预先设置有用于音频的解码器，在将音频数据放入音频解码队列后，解码程序中与音频数据的编码格式相对应的解码器对音频数据进行解码操作，获得多个第一音频格式的音频帧。解码后的多个第一音频格式的音频帧放入音频播放队列，等待播放。

在一种可能的实施方式中，第一音频格式可以为PCM(Pulse code modulation，脉冲编码调制)原始音频格式。播放时，可以通过调用系统默认的音频输出设备播放解码后的音频帧，音频播放前会控制播放平滑度、与视频帧同步等。其中，音频与视频的平滑度和同步方法为本领域的常规技术手段，在此只作简要介绍：每一帧的音频或者视频都携带有编码时的时间戳，程序中模拟一个时钟作为主时钟，主时钟按正常时间步进，在播放过程中主时钟作为同步基准，将解码后的音频、视频数据的时间戳分别模拟出音频、视频两个从时钟。然后判断从时钟与主时钟的差异，并基于差异调节两个从时钟，使两个从时钟追赶(落后时)或等待(超前时)主时钟，当从时钟对应的时间戳与主时钟对应时间戳相差比较小时就播放此音频/视频帧。

本申请的基于HTML5的视频播放的技术方案，通过预先在浏览器外对不同编码格式的媒体数据进行解码处理以获得浏览器支持的第一图像格式的视频帧，然后对多个视频帧进行自定义协议封装并送入数据传输通道，再利用HTML5组件从数据传输通道中获取数据包并拆包后将多个第一图像格式的视频帧逐帧绘制在支持HTML5框架的浏览器上，使得支持HTML5框架的浏览器无需额外安装插件，即可实现对解码后的媒体数据进行的播放。并且由于视频的取流、解码、转码过程等均独立于浏览器之外，因此本申请的技术方案还可以非常方便的集成在安装有支持HTML5框架的浏览器的客户机中，不但可以实现跨平台应用，支持主流Windows、Linux、Mac、Android等操作系统，而且还兼容多种传输协议和编码格式，覆盖行业中绝大多数音、视频编码格式，满足了目前安防行业中绝大部分的视频播放的需求。

进一步地，通过将音频的拆分、解码和播放过程独立于浏览器，还使得本申请的视频播放方法能够支持多种音频编码格式，扩大了本申请的应用范围。

进一步地，通过采用GPU解码，在解码不成功时再使用CPU解码，本申请还能够实现硬件解码/软件解码的动态切换，充分利用客户机进行视频的解码及显示，具有非常高的转码性能。

进一步地，通过采用二进制格式对第二图像格式的视频帧进行封装，使得视频数据在程序内部传输时避免了像其他公共协议一样需要进行兼容处理，因此传输效率高。并且采用二进制格式进行封装和拆包，还使得数据包的封装和拆包速度大幅提升，在实现视频的高质量预览的同时，还能够降低延迟，实现媒体数据简单高效地播放。

需要指出的是，上述实施例中虽然将各个步骤按照上述先后次序的方式进行了描述，但是本领域技术人员可以理解，为了实现本实施例的效果，不同的步骤之间不必按照这样的次序执行，其可以同时(并行)执行或以颠倒的次序执行，这些简单的变化都在本发明的保护范围之内。例如，HTML5组件建立数据传输通道的步骤可以在本方法一开始时执行，也可以在将第一图像格式按照自定义协议封装为数据包送入数据传输通道之前的任意时机执行。

下面结合图2，对本申请的一种可能的实施流程进行简要介绍。

如图2所示，在一种可能的实施流程中，当需要预览安防设备拍摄的视频时：

(1)首先执行步骤S201，HTML5组件通过Web Socket协议连接解码程序的端口从而建立数据传输通道；

(2)接下来执行步骤S203，解码程序依据RTSP传输协议从服务器中获取编码后的媒体数据，并对媒体数据进行效验，拆分音频数据、视频数据并分别送入音频解码队列和视频解码队列进行缓存等待解码。

(3)接下来执行步骤S205，使用解码器将音频数据解码为PCM原始音频格式，并放入待播放队列通知系统的音频播放器对其进行播放；

(4)在执行步骤S205的同时执行步骤S209-S213，具体地：

步骤S209，将视频数据通过GPU解码为YUV原始图像格式的多个视频帧，解码后的多个视频帧放入转换发送队列；

步骤S211，将统一将解码后的YUV原始图像格式的视频帧通过libyuv库转换为YUV420图像格式的视频帧；

步骤S213，采用二进制格式将YUV420格式的视频帧连同时间戳、视频宽度、视频调试等信息按照上述先后顺序封装为数据包，然后将数据包发送到数据传输通道中；

(5)接下来执行步骤S207和步骤S215，同时执行音频播放和视频播放，具体地：

步骤S207，通过系统默认音频播放设备播放解码后的音频数据，并且在音频播放前控制播放平滑度、与视频帧同步等。

步骤S215，HTML5组件从数据通道中获得数据包并拆包后得到多个YUV420格式的视频帧，使用WebGL技术对每个YUV420格式的视频帧进行自动转换渲染，最终在支持HTML5框架的浏览器的画布中显示出图像的画面。

下面参照图3，对本申请的基于HTML5的视频播放装置进行介绍。其中，图3为本发明的基于HTML5的视频播放装置的一个实施例的结构框图。

如图3所示，本申请的基于HTML5的视频播放装置主要包括数据拆封模块11、解码模块12、封装模块14和HTML5组件15。其中，数据拆封模块11用于根据指定传输协议获取任意编码格式的媒体数据，并从媒体数据中拆分出视频数据；解码模块12用于对视频数据进行解码以获得多个第一图像格式的视频帧；封装模块14用于对多个第一图像格式的视频帧进行自定义协议封装获得封装好的多个数据包，并将多个数据包送入预先与浏览器的前端HTML5组件建立的数据传输通道；HTML5组件15用于建立数据传输通道、从数据传输通道中获取多个数据包并进行拆包，将拆包后的多个第一图像格式的视频帧逐帧绘制在支持HTML5框架的浏览器中网页页面上。在一种实施方式中，具体实现功能的描述可以参见步骤S101-步骤S109所述。

在一种实施方式中，视频播放装置还包括转换模块，解码模块和转换模块通过下列方式来对视频数据进行解码以获得多个第一图像格式的视频帧：当视频数据能够直接被解码为第一图像格式的视频帧时，解码模块对视频数据直接进行解码以获得多个第一图像格式的视频帧；当视频数据无法直接被解码为第一图像格式的视频帧时，解码模块先对视频数据进行解码以获得多个第二图像格式的视频帧，然后转换模块对多个第二图像格式的视频帧进行格式转换以获得多个第一图像格式的视频帧。具体实现功能的描述可参见上述步骤S103所述。

在一种实施方中，数据拆封模块11还用于从媒体数据中拆分出音频数据；解码模块12还用于对音频数据进行解码；视频播放装置还包括：音频播放模块，用于播放解码后的音频数据；其中，音频数据的解码过程独立于浏览器。具体实现功能的描述可以参见本申请第[0088]-[0090]段所述。

在一种实施方式中，解码模块12通过下列方式来对视频数据进行解码获得多个视频帧：先采用GPU对视频数据进行解码；当采用GPU解码成功时，输出解码后的多个视频帧；当采用GPU解码不成功时，采用CPU对视频数据进行解码，并获得解码后的多个视频帧。具体实现功能的描述可以参见步骤S103所述。

在一种实施方式中，封装模块14通过下列方式来对多个第一图像格式的视频帧进行自定义协议封装：对多个第一图像格式的视频帧采用二进制格式进行封装。具体实现功能的描述可以参见步骤S105所述。

在一种实施方式中，HTML5组件15通过下列方式来将拆包后的多个第一图像格式的视频帧逐帧绘制在浏览器中网页页面的画布上：调用WebGL接口，逐帧将拆包后获得的多个第一图像格式的视频帧渲染在浏览器中网页页面的画布上。具体实现功能的描述可以参见步骤S109所述。

在一种实施方式中，第一图像格式为YUV420格式；第二图像格式为YUV或RGB格式。具体描述可以参见步骤S103所述。

上述基于HTML5的视频播放装置以用于执行图2所示的基于HTML5的视频播放方法实施例，两者的技术原理、所解决的技术问题及产生的技术效果相似，本技术领域技术人员可以清楚地了解到，为了描述的方便和简洁，基于HTML5的视频播放装置的具体工作过程及有关说明，可以参考基于HTML5的视频播放方法的实施例所描述的内容，此处不再赘述。

要说明的是，上述实施例提供的视频播放装置，仅以上述各功能模块(如数据拆封模块11、解码模块12、转换模块13、封装模块14、HTML5组件15等)的划分进行举例说明，在实际应用中，可以根据需要而将上述功能单元由不同的功能单元来完成，即将本发明实施例中的功能单元再分解或者组合，例如，上述实施例的功能单元可以合并为一个功能单元，也可以进一步拆分成多个子单元，以完成以上描述的全部或者部分功能。对于本发明实施例中涉及的功能单元名称，仅仅是为了进行区分，不视为对本发明的不当限定。

下面参照图4，对本申请的基于HTML5的视频播放系统进行介绍。其中，图4为本发明的基于HTML5的视频播放系统的一个实施例的结构框图。

如图4所示，本申请的基于HTML5的视频播放系统包括监控设备2、服务器3以及基于HTML5的视频播放装置1。监控设备2被配置成采集目标区域附近的媒体数据并且将采集结果发送至服务器3，服务器3被配置为将媒体数据编码封装后发送至视频播放装置1，视频播放装置1被配置为能够对编码封装后的媒体数据进行音、视频数据拆分、解码、转换、封装和音视频播放。其中，监控设备2包括但不限于图像采集器，如：摄像机、红外摄像头、激光摄像头、可见光摄像头等。监控设备2采集被监控环境下的一个或多个视频，进而传输到服务器3。这些图像采集器均是图像采集技术领域中常规的采集装置，为了描述简洁，在此不再对这些采集装置的具体工作原理进行赘述。

本领域技术人员能够理解的是，本发明实现上述一实施例的方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器、随机存取存储器、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的服务器、客户机中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，PC程序和PC程序产品)。这样的实现本发明的程序可以存储在PC可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

本发明还提供了一种计算机可读存储介质。在根据本发明的一个计算机可读存储介质实施例中，计算机可读存储介质可以被配置成存储执行上述方法实施例的基于HTML5的视频播放方法的程序代码，该程序代码可以由处理器加载并运行以实现上述基于HTML5的视频播放方法。为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明实施例方法部分。该计算机可读存储介质可以是包括各种电子设备形成的存储装置设备，可选的，本发明实施例中计算机可读存储介质是非暂时性的计算机可读存储介质。

本发明还提供了一种基于HTML5的视频播装置。在根据本发明的一个实施例中，基于HTML5的视频播放装置包括处理器和存储器，存储器可以被配置成存储执行上述方法实施例的基于HTML5的视频播放方法的程序代码，处理器可以被配置成用于执行存储器中的程序代码，该程序代码包括但不限于执行上述方法实施例的基于HTML5的视频播放方法的程序代码。为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明实施例方法部分。该基于HTML5的视频播放装置可以是包括各种电子设备形成的装置设备。

本申请还提供了一种浏览器，该浏览器支持HTML5框架并包括上述实施例的基于HTML5的视频播放方法，或者本申请还提供了一种浏览器装置，该浏览器装置包括上述实施例的基于HTML5的视频播放装置。一种可能的实施方式中，本申请的浏览器可以但不限于Windows IE、Chrome、Firefox、Safari、Edge Browser。

应该理解的是，由于各个模块的设定仅仅是为了说明本发明的系统的功能单元，这些模块对应的物理器件可以是处理器本身，或者处理器中软件的一部分，硬件的一部分，或者软件和硬件结合的一部分。因此，图中的各个模块的数量仅仅是示意性的。

本领域技术人员能够理解的是，可以对系统中的各个模块进行适应性地拆分或合并。对具体模块的这种拆分或合并并不会导致技术方案偏离本发明的原理，因此，拆分或合并之后的技术方案都将落入本发明的保护范围内。

至此，已经结合附图所示的优选实施方式描述了本发明的技术方案，但是，本领域技术人员容易理解的是，本发明的保护范围显然不局限于这些具体实施方式。在不偏离本发明的原理的前提下，本领域技术人员可以对相关技术特征作出等同的更改或替换，这些更改或替换之后的技术方案都将落入本发明的保护范围之内。