一种基于HTML5播放TS视频的方法及系统与流程

一种基于html5播放ts视频的方法及系统
技术领域
1.本发明涉及视频播放技术领域，尤其涉及一种基于html5播放ts视频的方法及系统。


背景技术：

2.随着互联网的发展，基于b/s架构的web应用逐渐多起来。在这些应用中，音视频播放的应用场景越来越多，在web上进行点播与直播已经成为互联网的主流方式，用户可以轻松在网页上点击播放各种各样的视频。h5的video标签支持播放文件格式有限，可以播放mp4/ogg/webm三种，其中ts文件格式的视频比较清晰，有很多还是保留着ts格式的文件，需要用web端去播放，所以需要寻找一种方法能在web端播放ts文件格式是必要的。
3.现有技术中在web中播放ts格式音视频的方法是通过flash播放器，需要依赖flash播放器，若web中未安装flash播放器，则无法播放ts视频，为用户带来了不便。
4.因此现有技术还有待于进一步发展。


技术实现要素：

5.针对上述技术问题，本发明实施例提供了一种基于html5播放ts视频的方法及系统，能够解决现有技术中若web中未安装flash播放器，则无法播放ts视频，为用户带来了不便的技术问题。
6.本发明实施例的第一方面提供一种基于html5播放ts视频的方法，包括：
7.检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件；其中所述web端是基于html5技术构建的；
8.调用web端的ts解码模块，根据ts解码模块对ts文件进行解码；
9.获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据；
10.将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放。
11.可选地，所述检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件，包括：
12.检测到web端的ts视频播放请求，通过js提供的请求方式，调用后台下发的api接口和参数，将ts视频播放请求发送至服务器；
13.获取服务器返回的ts视频对应的ts文件。
14.可选地，所述调用web端的ts解码模块，根据ts解码模块对ts文件进行解码，包括：
15.根据ts文件，提取出音频编码和视频编码；
16.将音频编码和视频编码按照标准的mp4协议，合并成mp4视频片断。
17.可选地，所述获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据，包括：
18.获取解码后生成的mp4视频片断，通过js新建一个媒体源扩展的对象，所述对象为
媒体源数据。
19.可选地，所述将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放，包括：
20.将媒体源扩展作为objecturl附加至html5自带的播放器标签上；
21.监听媒体源扩展的sourceopen事件，并设置一个接收ts文件的回调方法；
22.调用媒体源扩展的appendbuffer方法，动态向媒体源扩展中添加视频/音频片段；
23.将加载的视频片断通过htm5自带的播放器进行播放，完成ts视频的播放。
24.本发明实施例第二方面提供了一种基于html5播放ts视频的系统，所述系统包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现以下步骤：
25.检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件；其中所述web端是基于html5技术构建的；
26.调用web端的ts解码模块，根据ts解码模块对ts文件进行解码；
27.获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据；
28.将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放。
29.可选地，所述计算机程序被所述处理器执行时还实现以下步骤：
30.检测到web端的ts视频播放请求，通过js提供的请求方式，调用后台下发的api接口和参数，将ts视频播放请求发送至服务器；
31.获取服务器返回的ts视频对应的ts文件。
32.可选地，所述计算机程序被所述处理器执行时还实现以下步骤：
33.根据ts文件，提取出音频编码和视频编码；
34.将音频编码和视频编码按照标准的mp4协议，合并成mp4视频片断。
35.可选地，所述计算机程序被所述处理器执行时还实现以下步骤：
36.获取解码后生成的mp4视频片断，通过js新建一个媒体源扩展的对象，所述对象为媒体源数据。
37.本发明实施例第三方面提供了一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的基于html5播放ts视频的方法。
38.本发明实施例提供的技术方案中，检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件；其中所述web端是基于html5技术构建的；调用web端的ts解码模块，根据ts解码模块对ts文件进行解码；获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据；将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放。因此相对于现有技术，本发明实施例只要在播放的web页面第一次加载过程中，引入ts解码脚本模块，就可以实现播放ts文件，从而在web页面中不安装flash播放器也可实现ts格式视频的播放，提升用户体验。
附图说明
39.图1为本发明实施例中一种基于html5播放ts视频的方法的一实施例的流程示意图；
40.图2为本发明实施例中一种基于html5播放ts视频的系统的另一实施例的硬件结构示意图。
具体实施方式
41.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
42.以下结合附图对本发明实施例进行详细的描述。
43.请参阅图1，图1为本发明实施例中一种基于html5播放ts视频的方法的一个实施例的流程示意图。如图1所示，包括：
44.步骤s100、检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件；其中所述web端是基于html5技术构建的；
45.步骤s200、调用web端的ts解码模块，根据ts解码模块对ts文件进行解码；
46.步骤s300、获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据；
47.步骤s400、将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放。
48.具体实施时，首先用户通过前端web页面发起接口请求ts文件，通过http接口提交参数至服务器，服务器接收到请求后，做参数校验，若校验成功，将服务端的ts文件的链接返回到前端；前端即web页面，前端接收到ts文件后，调用ts解码模块进行解码；解码完后的数据，通过media source extensions媒体源扩展(以下简称mse)处理数据，将数据交给video标签进行播放。从而实现只要在播放的web页面第一次加载的过程中，引入ts解码脚本模块就可以实现播放ts文件。在web端不再依赖flash播放器；通过html5直接播放ts文件。
49.本发明实施例的ts是高指清格式，全称为mpeg2
‑
ts。ts即"transport stream"的缩写。mpeg2
‑
ts格式的特点就是要求从视频流的任一片段开始都是可以独立解码的。
50.mpeg
‑
ts则主要应用于实时传送的节目，比如实时广播的电视节目。电视节目是要求任何时候打开电视机都能解码(收看)的，所以，mpeg2
‑
ts格式的特点就是要求从视频流的任一片段开始都是可以独立解码的。
51.ts格式是一种新兴的高清封装格式，对ts格式解码，即将ts格式解码再编码成其他格式，常见的转换模式有：ts转rmvb，ts转mp4、ts转avi、ts转wmv；对ts格式编码，即指将其他格式转换成ts格式。
52.值得注意的是，由于ts是一种高清封装格式，对ts格式编码或封装，其狭义的解释指将其解码再编码成ts格式，而其广义并是更常见的解释是，将其他高清视频不进行重新编解码，封装成为符合蓝光或ps3等高清播放机播放标准的ts格式，常见的转换或封装模式
包括：tp转ts，mts转ts，mkv转ts，mov转ts。
53.在一些其他的实施例中，ts视频的文件格式有可能会改变，内容的ts结构变不会改变。
54.ts视频的传输和接收的方式可能会不一样，比如可以通过websocket来进行数据传输。
55.其中html5是hypertext markup language 5的缩写，html5是web中核心语言html的规范，用户使用任何手段进行网页浏览时看到的内容原本都是html格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
56.进一步地，检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件，包括：
57.检测到web端的ts视频播放请求，通过js提供的请求方式，调用后台下发的api接口和参数，将ts视频播放请求发送至服务器；
58.获取服务器返回的ts视频对应的ts文件。
59.具体地，用户在web端点击开始播放视频，通过js提供的ajax或者websocket请求方式，调用后台给的api接口和参数发送给服务器。服务器接收到调用的指令后，返回相对应的ts文件，ts文件为ts视频对应的ts数据二进制流。
60.进一步地，调用web端的ts解码模块，根据ts解码模块对ts文件进行解码，包括：
61.根据ts文件，提取出音频编码和视频编码；
62.将音频编码和视频编码按照标准的mp4协议，合并成mp4视频片断。
63.具体实施时，前端收到返回的ts二进制数据流，通过ts的解码模块将ts二进制数据流进行解码，解码流程如下：接收ts二进制数据流；从源数据提取出音频和视频的编码(其中视频的标准编码为h264,音频编码为aac)；将提取出的音频和视频按照标准的mp4合并成mp4片断。
64.进一步地，获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据，包括：
65.获取解码后生成的mp4视频片断，通过js新建一个媒体源扩展的对象，所述对象为媒体源数据。
66.具体实施时，获取解码后生成的mp4视频片断，通过媒体源扩展mediasource处理数据，通过js新建一个mediasource的对象。
67.进一步地，将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放，包括：
68.将媒体源扩展作为objecturl附加至html5自带的播放器标签上；
69.监听媒体源扩展的sourceopen事件，并设置一个接收ts文件的回调方法；
70.调用媒体源扩展的appendbuffer方法，动态向媒体源扩展中添加视频/音频片段；
71.将加载的视频片断通过htm5自带的播放器进行播放，完成ts视频的播放。
72.具体实施时，把mediasource作为objecturl附加到html5自带的播放器标签上；监听mediasource上的sourceopen事件，并且设置一个回调的方法来接收二进制数据；调用mediasource的appendbuffer方法，可以动态地向mediasource中添加视频/音频片段；将加载的视频片断通过html5自带的播放器进行播放。
73.需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。
74.上面对本发明实施例中的基于html5播放ts视频的方法进行了描述，下面对本发明实施例中的基于html5播放ts视频的系统进行描述，请参阅图2，图2是本发明实施例中一种基于html5播放ts视频的系统的另一实施例的硬件结构示意图，如图2所示，系统10包括：存储器101、处理器102及存储在存储器上并可在处理器上运行的计算机程序，计算机程序被处理器101执行时实现以下步骤：
75.检测到web端的ts视频播放请求，获取服务器端返回的ts视频对应的ts文件；其中所述web端是基于html5技术构建的；
76.调用web端的ts解码模块，根据ts解码模块对ts文件进行解码；
77.获取解码后对应的ts视频数据，通过媒体源扩展技术对ts视频数据进行处理，生成媒体源数据；
78.将媒体源数据发送至html5自带的播放器标签进行播放，完成ts视频的播放。
79.具体的实施步骤与方法实施例相同，此处不再赘述。
80.可选地，计算机程序被处理器101执行时还实现以下步骤：
81.检测到web端的ts视频播放请求，通过js提供的请求方式，调用后台下发的api接口和参数，将ts视频播放请求发送至服务器；
82.获取服务器返回的ts视频对应的ts文件。
83.具体的实施步骤与方法实施例相同，此处不再赘述。
84.可选地，计算机程序被处理器101执行时还实现以下步骤：
85.根据ts文件，提取出音频编码和视频编码；
86.将音频编码和视频编码按照标准的mp4协议，合并成mp4视频片断。
87.具体的实施步骤与方法实施例相同，此处不再赘述。
88.可选地，计算机程序被处理器101执行时还实现以下步骤：
89.获取解码后生成的mp4视频片断，通过js新建一个媒体源扩展的对象，所述对象为媒体源数据。
90.具体的实施步骤与方法实施例相同，此处不再赘述。
91.可选地，计算机程序被处理器101执行时还实现以下步骤：
92.将媒体源扩展作为objecturl附加至html5自带的播放器标签上；
93.监听媒体源扩展的sourceopen事件，并设置一个接收ts文件的回调方法；
94.调用媒体源扩展的appendbuffer方法，动态向媒体源扩展中添加视频/音频片段；
95.将加载的视频片断通过htm5自带的播放器进行播放，完成ts视频的播放。
96.具体的实施步骤与方法实施例相同，此处不再赘述。
97.本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤s100至步骤s400。
98.作为示例，非易失性存储介质能够包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦rom(eeprom)或闪速存储器。易失性存储器能够包括作为外部高速
缓存存储器的随机存取存储器(ram)。通过说明并非限制，ram可以以诸如同步ram(sram)、动态ram、(dram)、同步dram(sdram)、双数据速率sdram(ddr sdram)、增强型sdram(esdram)、synchlink dram(sldram)以及直接rambus(兰巴斯)ram(drram)之类的许多形式得到。本发明实施例中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。
99.以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。