一种基于HTML5播放TS视频的方法及系统技术方案

技术编号:29292082 阅读:18 留言:0更新日期:2021-07-17 00:33
本发明专利技术公开了一种基于HTML5播放TS视频的方法及系统,方法包括:检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于HTML5技术构建的;调用web端的TS解码模块,根据TS解码模块对TS文件进行解码;获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据;将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放。本发明专利技术实施例只要在播放的web页面第一次加载过程中,引入TS解码脚本模块,就可以实现播放TS文件,从而在web页面中不安装FLASH播放器也可实现TS格式视频的播放,提升用户体验。提升用户体验。提升用户体验。

A method and system of playing TS video based on HTML5

【技术实现步骤摘要】
一种基于HTML5播放TS视频的方法及系统


[0001]本专利技术涉及视频播放
,尤其涉及一种基于HTML5播放TS视频的方法及系统。

技术介绍

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

技术实现思路

[0005]针对上述技术问题,本专利技术实施例提供了一种基于HTML5播放TS视频的方法及系统,能够解决现有技术中若web中未安装Flash播放器,则无法播放TS视频,为用户带来了不便的技术问题。
[0006]本专利技术实施例的第一方面提供一种基于HTML5播放TS视频的方法,包括:
[0007]检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于HTML5技术构建的;
[0008]调用web端的TS解码模块,根据TS解码模块对TS文件进行解码;
[0009]获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据;
[0010]将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放。
[0011]可选地,所述检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件,包括:
[0012]检测到web端的TS视频播放请求,通过JS提供的请求方式,调用后台下发的API接口和参数,将TS视频播放请求发送至服务器;
[0013]获取服务器返回的TS视频对应的TS文件。
[0014]可选地,所述调用web端的TS解码模块,根据TS解码模块对TS文件进行解码,包括:
[0015]根据TS文件,提取出音频编码和视频编码;
[0016]将音频编码和视频编码按照标准的MP4协议,合并成MP4视频片断。
[0017]可选地,所述获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据,包括:
[0018]获取解码后生成的MP4视频片断,通过JS新建一个媒体源扩展的对象,所述对象为
媒体源数据。
[0019]可选地,所述将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放,包括:
[0020]将媒体源扩展作为ObjectURL附加至HTML5自带的播放器标签上;
[0021]监听媒体源扩展的sourceOpen事件,并设置一个接收TS文件的回调方法;
[0022]调用媒体源扩展的appendBuffer方法,动态向媒体源扩展中添加视频/音频片段;
[0023]将加载的视频片断通过HTM5自带的播放器进行播放,完成TS视频的播放。
[0024]本专利技术实施例第二方面提供了一种基于HTML5播放TS视频的系统,所述系统包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现以下步骤:
[0025]检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于HTML5技术构建的;
[0026]调用web端的TS解码模块,根据TS解码模块对TS文件进行解码;
[0027]获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据;
[0028]将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放。
[0029]可选地,所述计算机程序被所述处理器执行时还实现以下步骤:
[0030]检测到web端的TS视频播放请求,通过JS提供的请求方式,调用后台下发的API接口和参数,将TS视频播放请求发送至服务器;
[0031]获取服务器返回的TS视频对应的TS文件。
[0032]可选地,所述计算机程序被所述处理器执行时还实现以下步骤:
[0033]根据TS文件,提取出音频编码和视频编码;
[0034]将音频编码和视频编码按照标准的MP4协议,合并成MP4视频片断。
[0035]可选地,所述计算机程序被所述处理器执行时还实现以下步骤:
[0036]获取解码后生成的MP4视频片断,通过JS新建一个媒体源扩展的对象,所述对象为媒体源数据。
[0037]本专利技术实施例第三方面提供了一种非易失性计算机可读存储介质,其特征在于,所述非易失性计算机可读存储介质存储有计算机可执行指令,该计算机可执行指令被一个或多个处理器执行时,可使得所述一个或多个处理器执行上述的基于HTML5播放TS视频的方法。
[0038]本专利技术实施例提供的技术方案中,检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于HTML5技术构建的;调用web端的TS解码模块,根据TS解码模块对TS文件进行解码;获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据;将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放。因此相对于现有技术,本专利技术实施例只要在播放的web页面第一次加载过程中,引入TS解码脚本模块,就可以实现播放TS文件,从而在web页面中不安装FLASH播放器也可实现TS格式视频的播放,提升用户体验。
附图说明
[0039]图1为本专利技术实施例中一种基于HTML5播放TS视频的方法的一实施例的流程示意图;
[0040]图2为本专利技术实施例中一种基于HTML5播放TS视频的系统的另一实施例的硬件结构示意图。
具体实施方式
[0041]下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。
[0042]以下结合附图对本专利技术实施例进行详细的描述。
[0043]请参阅图1,图1为本专利技术实施例中一种基于HTML5播放TS视频的方法的一个实施例的流程示意图。如图1所示,包括:
[0044]步骤S100、检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种基于HTML5播放TS视频的方法,其特征在于,包括:检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件;其中所述web端是基于HTML5技术构建的;调用web端的TS解码模块,根据TS解码模块对TS文件进行解码;获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据;将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放。2.根据权利要求1所述的基于HTML5播放TS视频的方法,其特征在于,所述检测到web端的TS视频播放请求,获取服务器端返回的TS视频对应的TS文件,包括:检测到web端的TS视频播放请求,通过JS提供的请求方式,调用后台下发的API接口和参数,将TS视频播放请求发送至服务器;获取服务器返回的TS视频对应的TS文件。3.根据权利要求2所述的基于HTML5播放TS视频的方法,其特征在于,所述调用web端的TS解码模块,根据TS解码模块对TS文件进行解码,包括:根据TS文件,提取出音频编码和视频编码;将音频编码和视频编码按照标准的MP4协议,合并成MP4视频片断。4.根据权利要求3所述的基于HTML5播放TS视频的方法,其特征在于,所述获取解码后对应的TS视频数据,通过媒体源扩展技术对TS视频数据进行处理,生成媒体源数据,包括:获取解码后生成的MP4视频片断,通过JS新建一个媒体源扩展的对象,所述对象为媒体源数据。5.根据权利要求4所述的基于HTML5播放TS视频的方法,其特征在于,所述将媒体源数据发送至HTML5自带的播放器标签进行播放,完成TS视频的播放,包括:将媒体源扩展作为ObjectURL附加至HTML5自带的播放器标签上;监听媒体源扩展的sourceOpen事件,并设置一个接收TS文件的回调方法;调用媒体源扩展的appendBuffer方法,动态向媒体源扩展中添加视频/音频...

【专利技术属性】
技术研发人员:周志文王剑纪向晴
申请(专利权)人:深圳市麦谷科技有限公司
类型:发明
国别省市:

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

1