CN110505511B - 一种在网页中播放视频的方法、装置、系统及计算设备 - Google Patents

Abstract

本发明公开了一种在网页中播放视频的方法、装置、系统及计算设备，方法包括：从网络服务器获取待播放的视频文件对应的元数据信息；根据序列帧图像加载地址前缀生成各序列帧图像的加载地址，向网络服务器请求对应的序列帧图像并保存在图像队列中；根据音频文件加载地址向网络服务器请求对应的音频文件；在网页中播放图像队列中的序列帧图像，并记录当前播放的序列帧图像的图像索引；根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

Description

一种在网页中播放视频的方法、装置、系统及计算设备

技术领域

本发明涉及互联网领域，特别涉及一种在网页中播放视频的方法、装置、系统及计算设备。

背景技术

随着近几年互联网技术的快速发展以及网络带宽的进一步拓展和提升，网络应用的内容和呈现形式也越来越丰富。现代主流浏览器(包括PC浏览器和手机浏览器)基本上都支持H5，不仅可以在网页中直接播放视频，还可以通过三维网页(Web-3D)相关技术(例如webGL、playCanvas等)在网页中构建复杂的三维虚拟现实场景，甚至是两者的结合。

通常要在网页中播放视频，需要借助一些可对视频数据进行解码和播放控制的应用程序，称之为视频播放器。当下主流的实现方式有两种，一种是通过用户安装的第三方浏览器插件(比如Flash Player)实现视频加载和播放；另一种就是借助H5<video>标签实现视频加载和播放。

在早期浏览器对HTML5的支持还不够好的情况下，基于Flash插件的网页视频播放几乎是唯一的选择。网页要采用这种办法播放视频，首先要确保用户浏览器中安装了Flash插件，如果没有，就要先引导用户下载安装Flash插件。然后在页面使用<object>或<embed>标签，通过参数指定要引入的视频源文件地址实现视频播放。Flash支持的视频格式通常有两种.flv和.swf。

基于Flash插件的网页视频播放方案的缺点主要包括：

一是浏览器兼容性不够好，在没有安装Flash插件或者Flash插件被禁用的情况下视频不能正常播放。由于存在较多安全和性能问题，苹果的Safari浏览器和谷歌的Chrome浏览器都已陆续禁用Flash插件。另外在移动互联网的时代，手机浏览器中支持Flash插件的非常少，这种技术方案在手机端基本是不可行的。

二是该方案支持的视频格式有限，如果视频原文件的编码格式不一，需要先将各类视频文件转换成Flash视频文件。

三是这种技术方案只能应用在2D普通网页中用，对于使用Web-3D构建的复杂网页应用，Flash视频无法融入3D场景中。

随着浏览器对H5支持的普及，使用H5<video>进行视频播放成了当前网页播放视频的主流首选。H5<video>不需要额外安装第三方浏览器插件，浏览器自身就实现了视频的解码功能，只需要在网页中嵌入<video>标签，通过参数指定视频源即可。H5<video>一共支持三种格式：Ogg、MPEG4、WebM。使用H5<video>播放视频存在如下缺点：

一是播放器的外展形式不统一，由于<video>是靠浏览器底层实现的播放，视频播放时其外观和控件行为往往会被浏览器托管，比如有可能会自动全屏、播放时出现播放边框和外观不一致的控件按钮等。且<video>没有预留更多的编程接口可以对播放器进行二次开发和自定义，完全依赖浏览器系统实现。

二是H5<video>加载的视频文件往往较大，音频和图像内容混合在一起，不能分离单独下载，需要整体下载后在浏览器端解码后才能播放，在网络质量较差的情况下用户等待时间较长，体验不佳。

三是H5<video>跟Flash插件一样只能应用在2D普通网页中用，无法融入web-3D场景中使用。

而且，在某些特殊的Web场景下，因为一些客观条件限制(兼容性或性能要求)，没法直接通过Flash插件或H5<video>来实现视频播放。

因此，需要一种针对新的网页视频播放方案。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在网页中播放视频的方法、装置及计算设备。

根据本发明的一个方面，提供了一种在网页中播放视频的方法，在客户端执行，所述方法包括：

从网络服务器获取待播放的视频文件对应的元数据信息，其中，所述视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址；

根据所述序列帧图像加载地址前缀生成各序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中；

根据所述音频文件加载地址向网络服务器请求对应的音频文件；

在网页中播放图像队列中的序列帧图像，并记录当前播放的序列帧图像的图像索引；

根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；

在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

可选地，根据本发明的在网页中播放视频的方法，其中，所述根据所述序列帧图像加载地址前缀生成各序列帧图像的加载地址，包括：对序列帧图像加载地址前缀、序列帧图像的序号和图片类型进行拼接，得到相应序列帧图像的加载地址。

可选地，根据本发明的在网页中播放视频的方法，其中，所述在网页中播放图像队列中的序列帧图像，包括：在网页中创建一画布对象，并获取所述画布对象的画笔；在rAF的回调周期，利用所述画笔将所述图像队列中的序列帧图像绘制到画布上。

可选地，根据本发明的在网页中播放视频的方法，其中，所述元数据信息中还包括播放刷新率fps，相应地，所述画笔绘制序列帧图像的频率与所述fps相对应。

可选地，根据本发明的在网页中播放视频的方法，其中，所述网页为三维网页，所述在网页中播放图像队列中的序列帧图像，还包括：获取所述画布对象；创建一纹理对象，设置所述纹理对象的数据来源是所述画布对象的画图；将所述纹理对象贴到所述三维网页中的三维建筑模型上。

可选地，根据本发明的在网页中播放视频的方法，其中，所述从音频偏移量处开始播放所述音频文件，包括：调用web audio api从所述音频偏移量处开始播放所述音频文件。

可选地，根据本发明的在网页中播放视频的方法，其中，所述元数据信息中还包括音频文件的总播放时长；若所述web audio api在解码音频文件时，不能从所述音频文件中获取总播放时长，则从所述元数据信息中获取所述总播放时长。

根据本发明的另一方面，提供一种在网页中播放视频的装置，驻留在客户端中，所述装置包括：

元数据获取单元，适于从网络服务器获取待播放的视频文件对应的元数据信息，其中，所述视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址；

图像加载单元，适于根据所述序列帧图像加载地址前缀生成各序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中；

音频加载单元，适于根据所述音频文件加载地址向网络服务器请求对应的音频文件；

图像播放单元，适于在网页中播放图像队列中的序列帧图像，并记录当前播放的序列帧图像的图像索引；

同步单元，适于根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；

音频播放单元，适于在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

根据本发明的又一个方面，提供一种视频播放系统，包括：

网络服务器，适于将视频文件处理为一组序列帧图像和一个音频文件，并生成与该视频文件关联的元数据信息，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址。

客户端，所述客户端中驻留有上述的在网页中播放视频的装置，所述客户端可以为浏览器或者网页应用，所述客户端经由互联网与网络服务器通信。

根据本发明的又一个方面，提供一种计算设备，包括：至少一个处理器；和存储有程序指令的存储器，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行上述方法的指令。

根据本发明的又一个方面，一种存储有程序指令的可读存储介质，当所述程序指令被计算设备读取并执行时，使得所述计算设备执行上述的方法。

本发明采用了一种新的图像序列帧+音频同步播报的方式来实现模拟视频播放，通过在服务端对视频文件(例如MP4格式)做离线抽帧处理，抽取出序列帧图像(例如JPG)和对应的音频资源(MP3)，然后在浏览器端分别独立播放序列帧动画和音频文件，并通过一定的实时同步算法保持序列帧动画和音频的进度同步，能满足特殊场景下的视频播放需求，并具有浏览器兼容性好、传输量小速度快、编程可控性强等优点。

这种方案绕开了传统网页视频播放对视频播放器的依赖，可以更精细化的控制播放过程及外展形式，不但能在2D网页中实现播放，也能很好的融入Web-3D的网页应用中，利用3D引擎的渲染和处理，给用户带来更立体，更丰富的感官体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例的应用场景100示意图；

图2示出了根据本发明一个实施例的计算设备200的结构图；

图3示出了根据本发明一个实施例的在网页中播放视频的方法300的流程图；

图4示出了根据本发明一个实施例的在网页中播放视频的装置400的结构图；

图5示出了根据本发明一个实施例的在网页中播放视频的系统500的结构图；

图6示出了本发明实施例中序列帧图像和音频的同步播放示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了本发明实施例的应用场景示意图。如图1所示，应用场景100包括一个或多个客户端110(图中示出了3个)以及服务器120，客户端110经由互联网与服务器120进行通信。客户端可以为浏览器或者网页应用(webapp)，并驻留在计算设备中，能够在计算设备的显示屏上呈现网页。通常情况下，可以通过Flash插件或H5<video>来实现网页视频播放。但是，这两种网页视频播放方式各有缺点，并且，在一些场景下，客户端中并不能使用Flash插件或H5<video>。

因此，本发明实施例提供了一种新的在网页中播放视频的方法，该方法在本发明实施例提供的客户端110中执行，且客户端110驻留例如如下所述的计算设备200中。

图2示出了根据本发明一个实施例的计算设备200的结构图。如图2所示，在基本的配置202中，计算设备200典型地包括系统存储器206和一个或者多个处理器204。存储器总线208可以用于在处理器204和系统存储器206之间的通信。

取决于期望的配置，处理器204可以是任何类型的处理，包括但不限于：微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器204可以包括诸如一级高速缓存210和二级高速缓存212之类的一个或者多个级别的高速缓存、处理器核心214和寄存器216。示例的处理器核心214可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器218可以与处理器204一起使用，或者在一些实现中，存储器控制器218可以是处理器204的一个内部部分。

取决于期望的配置，系统存储器206可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器206可以包括操作系统220、一个或者多个应用222以及程序数据224。应用222实际上是多条程序指令，其用于指示处理器204执行相应的操作。在一些实施方式中，应用222可以布置为在操作系统上使得处理器204利用程序数据224进行操作。

计算设备200还可以包括有助于从各种接口设备(例如，输出设备242、外设接口244和通信设备246)到基本配置202经由总线/接口控制器230的通信的接口总线240。示例的输出设备242包括图形处理单元248和音频处理单元250。它们可以被配置为有助于经由一个或者多个A/V端口252与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口244可以包括串行接口控制器254和并行接口控制器256，它们可以被配置为有助于经由一个或者多个I/O端口258和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备246可以包括网络控制器260，其可以被布置为便于经由一个或者多个通信端口264与一个或者多个其他计算设备262通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

在根据本发明的计算设备200中，应用222包括在网页中播放视频的装置400，装置400包括多条程序指令，这些程序指令可以指示处理器204执行在网页中播放视频的方法300。

图3示出了根据本发明一个实施例的在网页中播放视频的方法300的流程图，图5示出了根据本发明一个实施例的在网页中播放视频的系统500的结构图，图6示出了本发明实施例中序列帧图像和音频的同步播放示意图。以下结合图3、图5和图6介绍本发明实施例的在网页中播放视频的方法。

方法300在客户端执行，客户端可以是浏览器或者网页应用(webapp)等，客户端能够加载并显示网页，并在网页中加载和显示视频(包括序列帧图像和音频)。方法包括步骤S302～步骤S312。在步骤S302中，客户端从网络服务器获取待播放的视频文件对应的元数据信息。在本发明中，客户端所请求的视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件。

网络服务器可以包括web服务器和数据服务器。数据服务器可以预先对视频文件进行离线处理，例如，根据原始视频文件的格式，调用对应格式的解码库解码并按所需帧率抽取图像，例如20fps，并将抽取出的图像数据统一转换为jpg格式的图片，并按序列命名，例如0001.jpg,0002.jpg…1999.jpg。进一步，数据服务器还可以根据原始视频文件的格式，抽取对应的音频数据，把抽取出的音频数据转化为例如mp3格式的音频文件。之后，将抽取得到的将预处理后的jpg序列帧图像文件和mp3音频文件推送到web服务器。

数据服务器通过控制视频抽帧数，可以控制客户端视频播放速率fps不会过快或过慢。在抽帧处理完成后，还能够生成与原始视频文件关联的元数据信息(mata data)。这样，客户端需要在网页中播放视频时，就可以先从网络服务器中获取与待播放的视频文件对应的元数据信息。

在一种实现方式中，meta信息中可以包含以下信息中的一个或多个：

1)视频ID(videoid)，每个视频的唯一标识，用于区分多个视频。

2)播放刷新率(fps)，表示这个序列帧在播放时指定的播放频率，用于控制后续canvas的图片绘制过程。不同视频的质量和清晰度数据不同，要播放序列帧时fps也不同，通常可以取10～60，越大清晰度越高，传输的图像数据越多。

3)序列帧总数(imgsNum)，表示该视频文件被抽取成了多少张序列帧图像，是个整数，比如1000，代表该视频一共有1000张视频帧图像。

4)图像格式(imgType),序列帧图像类型，可以为jpg或png。

5)序列帧图像加载地址前缀(imgUrlPrefix),图像数据网络加载地址的前缀，例如https://example.com/imgs/加载图像数据时，通过拼接前缀、序号、图片类型加载每一帧图像数据。例如，如果图片类型是jpg，则第9帧的图片加载地址为https://example.com/imgs/9.jpg。

6)音频加载地址(audioUrl),加载音频数据的地址，例如https://example.com/audio/[videoid].mp3。

7)总播放时长(duration)，即原始视频的播放时长，也代表了音频播放时长。该参数是一个备用的参数，主要用于解决部分浏览器在使用webAudioApi解码音频数据后无法获取音频时长的问题。

在步骤S304中，根据序列帧图像加载地址前缀生成各序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中。图像队列中的序列帧图像是按照顺序(帧号或序号)存储的，以确保客户端对序列帧图像按照帧序播放。其中，对序列帧图像加载地址前缀、序列帧图像的序号和图片类型进行拼接，得到相应序列帧图像的加载地址。

在本发明实施例中，客户端向网络服务器请求序列帧图像的请求为批量图片请求，即一次可以请求多个序列帧图片文件，然后，网络服务器并行异步返回的图片数据要在序列帧管理模块所管理的图像队列中重新排队，加载出错的重试加载。

在步骤S306中，根据所述音频文件加载地址向网络服务器请求对应的音频文件。

需要说明的是，在本发明实施例中，序列帧图像和音频文件是分别下载的，二者之间没有先后的限制。也就是说，本发明对上述步骤S304和步骤S306的执行顺序不做限制。

在步骤S308中，在网页中播放图像队列中的序列帧图像，并记录当前播放的序列帧图像的图像索引。具体包括：在网页中创建一画布对象，并获取所述画布对象的画笔；在rAF的回调周期，利用所述画笔将所述图像队列中的序列帧图像绘制到画布上。其中，所述元数据信息中还包括播放刷新率fps，相应地，所述画笔绘制序列帧图像的频率与所述fps相对应。

根据本发明的一种实现方式，序列帧管理模块按序列帧图片对接的加载情况，在rAF的回调周期通过canvas按meta中指定的fps绘制图片。同时记录当前绘制索引值index。

rAF全称requestAnimationFrame，是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。rAF提供了浏览器UI刷新时的回调接口，通过rAF可以要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

Canvas是HTML5中重要的元素之一，canvas元素使用JavaScript在网页上绘制图像。

在本发明实施例中，序列帧图像通过rAF+Canvas实现，具体过程如下：

1)页面打开时先获取canvas画布对象，然后通过canvas画图的getContext(‘2d’)获取一个CanvasRenderingContext2D对象，可以理解为canvas的画笔，通过画笔可以将图像数据绘制到canvas画布上，刚开始是一个空白画布。

2)创建一个空的图像队列用于存放要播放的序列帧图像数据。

3)通过rAF注册浏览器UI刷新回调函数，浏览器每一帧刷新前，都会调用回调函数。调用的频率通常为60fps，既每1秒调用60次，约16.6毫秒调用一次。

4)通过rAF注册的回调函数被执行时，按照指定的频率(meta信息中的fps)，调用画笔的drawImg方法将图像队列中的某一帧图像绘制到画布上，并记录当前绘制的图像索引currentIndex。如果队列中当前要绘制的图像数据还未加载完，则忽略本次绘制。

按照指定的频率是指按照后台返回的meta信息中指定的fps绘制，例如后台返回的meta中的fps是20，那么就每隔4次回调执行一次绘制动作。

5)序列帧管理器根据meta信息从网络上并发的加载多张图像，在网络返回图像数据后按照序号插入图像数据列队，如果某一帧图像加载异常，则再次发起加载，并重试三次。

在步骤S310中，在所述音频文件加载完成后，根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量。

在步骤S312中，在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。具体地，可以调用web audio api从所述音频偏移量处开始播放所述音频文件。其中，若所述web audio api在解码音频文件时，不能从所述音频文件中获取总播放时长，则从所述元数据信息中获取所述总播放时长。

在本发明实施例中，同步控制模板同步offset到音频管理模块，音频管理模板在收到播放进度offset更新时，调用web audio api按总的进度播放对应的音频。播放到中间某一帧，如果对应的图片还未加载完毕，则暂停图像轮播，同时暂停命令给同步控制模块，同步控制模板同步暂停命令给音频管理模块，暂停音频播放。序列帧管理模板在图片播放完成后可选择继续从头播放或停止，同步对应命令给同步控制模块。

在本发明实施例中，客户端(例如浏览器)使用canvas和rAF技术控制序列帧播放、使用web audio api控制音频播放，并以图像序列帧播放进度为基准，同步控制序列帧和音频播报的过程。在音频数据加载完成后，同步播放控制模块通过序列帧管理模块获得当前播放进度，定义为偏移量offset。offset根据总播放时长和当前绘制的图片索引index计算得到。

通过分离的、异步并行的序列帧和音频来模拟视频播放，最重要的就要是确保音频播放的进度和序列帧当前画面的进度是同步的，否则就会出现“驴唇不对马嘴”的情况。

在本发明实施例中，实现同步策略最重要的因素有以下几点：

1)使用rAF而非setTimeout/setInterval来实现序列帧动画。setTimeout/setInterval是javascript中的一种定时器机制，而定时器任务是需要在任务队列中排队的，其并不能保证对应的定时器任务在指定的时间触发，是一种不可靠的刷新机制。在一些复杂应用场景中，通过定时器无法保证序列帧按照指定的fps刷新，从而出现音频和动画不同步的情况，而rAF是浏览器提供的可靠刷新回调接口，能很好的解决这一问题。

2)使用webAudioApi而非H5<audio>来播放音频。webAudioApi可以从指定的位置开始播放音频，而H5<audio>只能从头开始播放，webAudioApi更利于通过javascript编程控制同步播放。

3)以序列帧播放的进度为基准，同步音频的播报，而不是以音频播放进度反过来控制序列帧播放。

序列帧是多张图片，可以并行加载，在前几张序列帧图像返回后就可以开始动画播放，但音频数据只有一个，需要完整加载完整个音频数据后才能开始音频播放。这时，就需要根据动画播放的进度来同步控制音频的进度。如果反过来，首先无法获取当前音频播放的进度；其次，如果动画正在播或未播放，突然根据音频进度调整序列帧，会出现动画不连续、跳帧等问题。

4)不同场景下的同步策略如下：

41)音频先加载完成,序列帧后开始播放

音频不播，等待序列帧动画开始播放时从位置偏移0处开始播放。

42)序列帧动画先开始播放，音频后加载完成

a.通过序列帧动画当前在播放的图片索引curentIndex和序列帧中的图像总数，计算出播放进度比例：ratio＝(currentIndex+1)％imgsNum/imgsNum

b.根据序列帧播放进度比例和总播放时长，换算出时间维度的音频偏移量(单位是秒)：offset＝ratio*duration

c.调用webAudioApi音频对象AudioBufferSourceNode的start方法，传入offset，从指定的偏移位置(时间维度，距离播放开始往后推多少秒)开始播放音频

43)序列帧动画播放过程中某一帧图片未加载完(序列帧动画会暂停)，或序列帧动画播放结束

在本发明的另一个实施例中，客户端中呈现的网页为三维网页(wed3d)，所述在网页中播放图像队列中的序列帧图像，还包括：获取所述画布对象；创建一纹理对象，设置所述纹理对象的数据来源是所述画布对象的画图；将所述纹理对象贴到所述三维网页中的三维建筑模型上。

也就是说，本发明实施例的视频播放方法也适合应用在复杂的3D场景中。目前市面上支持在浏览器内渲染3D场景的引擎有很多，但底层的实现原理无外乎两种，一种通过Canvas,一种通过webGL。本发明实施例的的视频播放方案可以使用canvas做为底层实现的3D引擎。

以playCanvas这款3D引擎为例，应用流程说明如下：

1)首先获取用来播放序列帧图像的canvas画布对象；

2)通过调用playCanvas的new pc.Texture方法创建一个新的纹理对象；

3)调用这个纹理对象的setSource方法，设置纹理对象的数据来源是序列帧canvas画图；

4)将纹理对象添加到playCanvas应用的物料中，贴到对应的3D建筑模型上；

5)在3D引擎的渲染下，当物料更新时，纹理贴片的数据即更新，从而实现了序列帧动画到3D场景中的图像数据同步；

6)音频播放不依赖3D引擎，在浏览器后台播放，只需要保证音频和序列帧canvas动画进度保持同步即可，最终实现的效果就是视频贴到了3D建筑上。

综合以上步骤，本发明实施例提供了一种基于序列帧动画+同步音频控制的web视频播放方法，其视频播放过程可以通过脚本精细控制，适合web-3d等复杂的网页应用，具有以下特性：

较好的浏览器兼容性。序列帧动画本质上是以一定的速率轮播图片，而图片的轮播展示是浏览器的基本功能；音频部分依赖web audio api，这也是H5规范之一，主流浏览器对web audio api的支持度较高。

弱网络环境下加载更快，具备更好的用户体验。由于该方案将视频文件拆分为独立的序列帧图像和音频，可独立同时进行网络请求，两边不依赖，图片也可以批量并行下载，在音频没准备好的时候就可以播放动画，等音频加载完毕再同步播放音频。另外拆分后的序列帧+音频文件的数据大小比原视频的大小能缩小80％左右，极大减小了网络传输量，加载更快。

可支持更多格式的视频。由于需要在后台先将原始视频文件进行序列帧和音频抽取预处理，无论是哪种格式的视频，处理完后都可转化为.jpg和.mp3格式的序列帧和音频，无浏览器兼容问题。

复杂web场景的支持。通过序列帧动画和独立的音频播报，绕开了视频播放器的限制，使得这种方式可应用在更多复杂的web场景中，比如可以直接通过贴图的方式贴在3D场景中，通过3D引擎的处理，无缝支持在3D场景中以任意角度播放视频。

图4示出了根据本发明一个实施例的在网页中播放视频的装置400的结构图。装置400驻留于计算设备(例如前述计算设备200)中，以使计算设备执行本发明的在网页中播放视频的方法300。如图4所示，装置400包括：

元数据获取单元402，适于从网络服务器获取待播放的视频文件对应的元数据信息，其中，所述视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址；

图像加载单元404，适于根据所述序列帧图像加载地址前缀生成各序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中；

音频加载单元406，适于根据所述音频文件加载地址向网络服务器请求对应的音频文件；

图像播放单元408，适于在网页中播放图像队列中的序列帧图像，并记录当前播放的序列帧图像的图像索引；

同步单元410，适于根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；

音频播放单元412，适于在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

元数据获取单元402、图像加载单元404、音频加载单元406、图像播放单元408、同步单元410和音频播放单元412的功能以及具体执行逻辑可参照方法300所述，这里不做赘述。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

Claims (9)

1.一种在网页中播放视频的方法，在视频播放系统中执行，所述视频播放系统包括客户端和网络服务器，所述网络服务器包括web服务器和数据服务器，所述方法包括：

数据服务器对视频文件进行离线处理：根据原始视频文件的格式，调用对应格式的解码库解码并按所需帧率抽取图像，将抽取出的图像数据统一转换为jpg格式的图片，并按序列命名；根据原始视频文件的格式，抽取对应的音频数据，把抽取出的音频数据转化为音频文件；将jpg序列帧图像文件和音频文件推送到web服务器；生成与原始视频文件关联的元数据信息；

客户端执行如下处理：

从网络服务器获取待播放的视频文件对应的元数据信息，其中，所述视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址；

对序列帧图像加载地址前缀、序列帧图像的序号和图片类型进行拼接，得到相应序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中；

根据所述音频文件加载地址向网络服务器请求对应的音频文件；

在网页中创建一画布对象，并获取所述画布对象的画笔；

在rAF的回调周期，利用所述画笔将所述图像队列中的序列帧图像绘制到画布上，并记录当前播放的序列帧图像的图像索引；

根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；

在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

2.如权利要求1所述的方法，其中，所述元数据信息中还包括播放刷新率fps，相应地，所述画笔绘制序列帧图像的频率与所述fps相对应。

3.如权利要求1或2所述的方法，其中，所述网页为三维网页，所述在网页中播放图像队列中的序列帧图像，还包括：

获取所述画布对象；

创建一纹理对象，设置所述纹理对象的数据来源是所述画布对象的画图；

将所述纹理对象贴到所述三维网页中的三维建筑模型上。

4.如权利要求1所述的方法，其中，所述从音频偏移量处开始播放所述音频文件，包括：

调用web audio api从所述音频偏移量处开始播放所述音频文件。

5.如权利要求4所述的方法，其中，所述元数据信息中还包括音频文件的总播放时长；

若所述web audio api在解码音频文件时，不能从所述音频文件中获取总播放时长，则从所述元数据信息中获取所述总播放时长。

6.一种视频播放系统，包括：

网络服务器web服务器和数据服务器；

数据服务器，适于对视频文件进行离线处理：根据原始视频文件的格式，调用对应格式的解码库解码并按所需帧率抽取图像，将抽取出的图像数据统一转换为jpg格式的图片，并按序列命名；根据原始视频文件的格式，抽取对应的音频数据，把抽取出的音频数据转化为音频文件；将jpg序列帧图像文件和音频文件推送到web服务器；生成与原始视频文件关联的元数据信息；

客户端，适于从网络服务器获取待播放的视频文件对应的元数据信息，其中，所述视频文件在网络服务器中被处理为一组序列帧图像和一个音频文件，所述元数据信息中包括序列帧图像总数、序列帧图像加载地址前缀和音频文件加载地址；

对序列帧图像加载地址前缀、序列帧图像的序号和图片类型进行拼接，得到相应序列帧图像的加载地址，向网络服务器请求对应的序列帧图像，并将所述网络服务器返回的序列帧图像保存在图像队列中；

根据所述音频文件加载地址向网络服务器请求对应的音频文件；

在网页中创建一画布对象，并获取所述画布对象的画笔；

在rAF的回调周期，利用所述画笔将所述图像队列中的序列帧图像绘制到画布上，并记录当前播放的序列帧图像的图像索引；

根据当前图像索引和序列帧图像总数，计算播放进度比例，并根据所述播放进度比例和音频文件的总播放时长计算音频偏移量；

在所述音频文件加载完成后，从所述音频偏移量处开始播放所述音频文件。

7.如权利要求6所述的系统，其中，所述客户端为浏览器或者网页应用。

8.一种计算设备，包括：

至少一个处理器；和

存储有程序指令的存储器，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如权利要求1-5中任一项所述方法的指令。

9.一种存储有程序指令的可读存储介质，当所述程序指令被计算设备读取并执行时，使得所述计算设备执行如权利要求1-5中任一项所述的方法。

Images