CN106303638A

CN106303638A - 一种基于html5播放器的音视频播放方法及装置

Info

Publication number: CN106303638A
Application number: CN201610772744.4A
Authority: CN
Inventors: 高艳
Original assignee: Beijing QIYI Century Science and Technology Co Ltd
Current assignee: Beijing QIYI Century Science and Technology Co Ltd
Priority date: 2016-08-30
Filing date: 2016-08-30
Publication date: 2017-01-04
Anticipated expiration: 2036-08-30
Also published as: CN106303638B

Abstract

本发明实施例公开了一种基于HTML5播放器的音视频播放方法及装置，方法包括：在当前音视频的码流未播放结束情况下，接收切换码流的指令；确定待播放音视频的地址；判断当前是否存在src属性值为空的音视频标签；如果存在，设置src属性值为该地址，并将待播放音视频设置为非自动播放；根据该地址加载待播放音视频的码流；如果不存在，创建src属性值为该地址的音视频标签，并将待播放音视频设置为非自动播放；根据该地址加载待播放音视频的码流；待播放音视频的码流满足播放条件时，将当前音视频对应的音视频标签的src属性值设置为空；并播放待播放音视频的码流。应用本发明实施例，可以避免视频播放中出现“黑屏”或“卡顿”现象。

Description

一种基于HTML5播放器的音视频播放方法及装置

技术领域

本发明涉及音视频播放技术领域，特别涉及一种基于HTML5播放器的音视频播放方法及装置。

背景技术

目前的音视频行业中，不同的音视频之间的音视频码流是不同的，随着多媒体行业的发展，对于同一音视频也存在满足不同网络播放环境的音视频码流，例如，针对不同网络环境的标清视频码流、高清视频码流、超清视频码流。为了最大程度的满足用户的使用要求，音视频播放过程中都允许用户切换音视频的码流。

现有技术中，常用HTML5播放器实现在线播放，HTML5播放器是通过<audio>标签、<video>标签来获取音视频内容及播放。通常一个HTML5播放器只对应一个音视频标签，通过调整音视频标签的属性值可实现音视频的播放、暂停、跳转等基础播放逻辑。触发进行切换音视频的码流的指令，HTML5播放器会暂停播放当前音视频的码流，并清空播放器对应的音视频标签所加载的当前音视频的码流，然后再用这个音视频标签去加载新的码流，播放这个新加载的音视频的码流，从而实现音视频码流的切换。播放器可能需要较长时间对数据进行加载，导致在暂停播放旧的码流到开始播放新的码流需要等待一段时间，这样就会造成视频播放过程中出现“黑屏”或“卡顿”等现象。

发明内容

本发明实施例的目的在于提供一种基于HTML5播放器的音视频播放方法及装置，以解决HTML5播放器在播放音视频过程中由于切换码流带来的“黑屏”或“卡顿”等问题。

为达到上述目的，本发明实施例公开了一种基于HTML5播放器的音视频播放方法及装置。技术方案如下：

第一方面，本发明实施例提供的一种基于HTML5播放器的音视频播放方法，所述方法包括：

在当前音视频的码流未播放结束情况下，接收切换播放音视频的码流的指令；

确定待播放音视频的地址；

判断当前是否存在src属性值为空的音视频标签；

如果存在，设置所述src属性值为待播放音视频的地址，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；

如果不存在，创建src属性值为所述待播放音视频地址的音视频标签，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；

检测所述待播放音视频的码流是否满足播放条件；

如果是，将所述当前音视频对应的音视频标签的src属性值设置为空；并播放所述待播放音视频的码流。

优选的，在所述指令为切换到与所述当前音视频不同的音视频的情况下，

所述检测所述待播放音视频的码流是否满足播放条件，包括：

检测所述待播放音视频的码流的加载速度是否不小于所述待播放音视频的码流的播放速度，如果是，表示待播放音视频的码流满足播放条件。

优选的，在所述指令为将所述当前音视频的清晰度切换到不同清晰度的情况下，

检测所述待播放音视频的码流的加载进度是否不小于所述当前音视频的播放进度，如果是，表示待播放音视频的码流满足播放条件；

所述播放所述待播放音视频的码流，包括：

根据当前音视频的播放进度，确定所述待播放音视频开始播放的码流的位置；

播放所确定的位置后的所述待播放音视频的码流。

优选的，所述方法还包括：

在所述待播放音视频的码流不满足播放条件的情况下，向用户提示切换播放音视频不成功的信息。

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

指令接收模块，用于在当前音视频的码流未播放结束情况下，接收切换播放音视频的码流的指令；

确定模块，用于确定待播放音视频的地址；

判断模块，用于判断当前是否存在src属性值为空的音视频标签；

第一加载模块，用于判断模块输出结果为是时，设置所述src属性值为待播放音视频的地址，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；

第二加载模块，用于创建src属性值为所述待播放音视频地址的音视频标签，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；

检测模块，用于检测所述待播放音视频的码流是否满足播放条件；

播放模块，用于将所述当前音视频对应的音视频标签的src属性值设置为空；并播放所述待播放音视频的码流。

所述播放所述待播放音视频的码流，包括：

播放所确定的位置后的所述待播放音视频的码流。

优选的，所述装置还包括：

提示模块，用于在所述待播放音视频的码流不满足播放条件的情况下，向用户提示切换播放音视频不成功的信息。

应用本发明实施例提供的技术方案，在当前音视频的码流未播放结束情况下，接收切换播放音视频的码流的指令；确定待播放音视频的地址；判断当前是否存在src属性值为空的音视频标签；如果存在，设置所述src属性值为待播放音视频的地址，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；如果不存在，创建src属性值为所述待播放音视频地址的音视频标签，并将所述待播放音视频设置为非自动播放；根据所述地址加载所述待播放音视频的码流；检测所述待播放音视频的码流是否满足播放条件；如果是，将所述当前音视频对应的音视频标签的src属性值设置为空；并播放所述待播放音视频的码流。通过上述方法的设置，切换音视频的码流时，待播放音视频的码流加载到满足播放条件后，才将当前音视频对应的音视频标签的src属性值设置为空即暂停当前音视频的码流播放，并播放待播放音视频的码流，在暂停播放旧的码流到开始播放新的码流之间不需要等待，因此，可以避免在视频播放过程中出现“黑屏”或“卡顿”等现象。

当然，实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种基于HTML5播放器的音视频播放方法的流程示意图；

图2为本发明实施例提供的一种基于HTML5播放器的音视频播放装置的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在HTML5播放器播放音视频过程中，为了防止在切换音视频的码流的过程中出现“卡顿”或“黑屏”等现象，给用户造成不好的体验，本发明实施例提出了一种基于HTML5播放器的音视频播放方法及装置。

下面首先对本发明实施例提供的一种基于HTML5播放器的音视频播放方法进行介绍。

需要说明的是，本发明实施例所提供的一种基于HTML5播放器的音视频播放方法可以应用于电子设备中，实际使用中，该电子设备可以是移动终端，如智能手机、平板电脑等，也可以是固定终端，如台式电脑、智能电视等，这些都是合理的，本发明实施例对此不作限定。

参照图1，图1为本发明实施例提供的一种基于HTML5播放器的音视频播放方法的流程示意图，该方法包括以下步骤：

S101、在当前音视频的码流未播放结束情况下，接收切换播放音视频的码流的指令；

本领域技术人员可以理解的是，不同的音视频对应不同的码流；相同的多个音视频对应的码流可能均不一样，但相同的多个音视频的时间长度是一致的。码流越大，音视频的质量相对越高，例如，如果是视频，在相同分辨率下，码流大，图画质量越好，画质也就越清晰，如果是音频，码流大，音质相对越好。

具体实施时，用于切换播放音视频的码流的指令包括两种情况：一种是切换到与当前音视频不同的音视频，比如，当前播放的是电视剧《欢乐颂》第一集，切换到《欢乐颂》第二集，或切换到《余罪》第一集；另一种是切换到相同音视频的不同清晰度，比如，当前播放的是高清模式下的电视剧《欢乐颂》第一集，切换到超清模式下的《欢乐颂》第一集或标清模式下的《欢乐颂》第一集。

需要说明的是，为了给用户更好的体验，切换到与当前音视频不同的音视频的指令一般应该是用户主动触发的；而切换到相同音视频的不同清晰度，可以是用户主动触发的，也可以是安装在电子设备中的HTML5播放器软件客户端根据当前的网络状况来触发的，比如，HTML5播放器在播放《欢乐颂》第一集，如果当前网络状况为优，HTML5播放器软件客户端主动触发切换到超清模式；如果当前网络状况为良好，HTML5播放器软件客户端主动触发切换到高清模式；如果当前网络状况为一般，HTML5播放器软件客户端主动触发切换到标清模式；网络状况的判断以及网络状况标准的设置属于现有技术，在此不做赘述。本发明对如何触发指令不做具体限定。

S102、确定待播放音视频的地址；

本步骤中，待播放音视频的地址实际也是待播放音视频的码流的地址。

S103、判断当前是否存在src属性值为空的音视频标签，如果存在，执行S104，如果不存在，执行S105；

需要说明的是，实际应用中，HTML5中规定的<audio>标签和<video>标签支持多种属性，其中src属性的值为该标签要播放的视频或音频的URL(Uniform Resource Locator，统一资源定位符)，即待播放音视频的地址。若某一音频或视频标签的src属性值为空，则表示该标签处于空闲状态，没有数据可播放。其中，具体如何判断属于现有技术，这里不再赘述。

当前的HTML5播放器可以对应一个音视频标签，也是预先为其创建多个空闲的音视频标签，通过判断当前是否存在src属性值为空的音视频标签，可以判断出是否存在空闲的音视频标签。

S104、设置该音视频标签的src属性值为待播放音视频的地址，并将待播放音视频设置为非自动播放；根据该地址加载待播放音视频的码流；

如果存在src属性值为空的音视频标签，则可以直接使用。本步骤具体实施时，本步骤中，可以只加载待播放音视频在预设时间点之后的码流，这个预设时间点可以是接到切换指令的时间点，这样可以一定程度地减少重复加载已观看视频的码流。

S105、创建src属性值为待播放音视频地址的音视频标签，并将待播放音视频设置为非自动播放；根据该地址加载待播放音视频的码流；

如果不存在src属性值为空的音视频标签，为了能够顺利加载待播放音视频的码流，需要创建新的src属性值为待播放音视频地址的音视频标签，当然也可以先创建src属性值为空的音视频标签，然后再设置该音视频标签的src属性值为待播放音视频的地址。

S106、检测待播放音视频的码流是否满足播放条件，如果是，执行S107；

在对待播放音视频码流的加载过程中，可以实时检测待播放音视频的码流是否满足播放条件，也可以每隔预设时间段检测一次，例如每隔10S检测一次。

需要说明的是，这个预设时间段可以是电子设备中的音视频客户端软件默认设置的，当然，也可以是用户在使用该音视频客户端软件时，自行设置的，本发明对此不做进一步限定。

本步骤具体实施时，在指令为切换到与当前音视频不同的音视频的情况下，检测待播放音视频的码流是否满足播放条件，可以包括：

检测待播放音视频的码流的加载速度是否不小于待播放音视频的码流的播放速度，如果是，表示待播放音视频的码流满足播放条件。比如，待播放音视频的码流的加载速度是10帧每秒，而待播放音视频的播放速度是20帧每秒，如果直接播放，播放中会导致新码流暂停播放的情况；待播放音视频的码流的加载速度是50帧每秒，而待播放音视频的播放速度是20帧每秒，可以满足播放。

在指令为将当前音视频的清晰度切换到不同清晰度的情况下，检测待播放音视频的码流是否满足播放条件，可以包括：

检测待播放音视频的码流的加载进度是否不小于当前音视频的播放进度，如果是，表示待播放音视频的码流满足播放条件。

比如，高清模式下播放《欢乐颂》第一集，需要切换到超清模式下播放，高清模式下的《欢乐颂》第一集的播放进度到第20分钟，超清模式下的《欢乐颂》第一集的码流才加载到第19分钟，此时，表示待播放音视频的码流不满足播放条件，而如果超清模式下的《欢乐颂》第一集的码流才加载到第35分钟，表示待播放音视频的码流满足播放条件。

S107、将当前音视频对应的音视频标签的src属性值设置为空；并播放待播放音视频的码流。

在步骤S106中的判断结果为是时，将当前音视频对应的音视频标签的src属性值设置为空，即暂停了当前音视频的播放，并开始播放待播放音视频的码流，从而实现切换音视频的码流。

具体实施时，在待播放音视频的码流的加载速度不小于待播放音视频的码流的播放速度的情况下，如果暂停播放当前音视频的码流，开始播放待播放音视频的码流，中间无需等待，也就不会出现“黑场”或“卡顿”的现象。

如果在指令为将当前音视频的清晰度切换到不同清晰度的情况下，检测待播放音视频的码流的加载进度是否不小于当前音视频的播放进度，如果是，表示待播放音视频的码流满足播放条件。本步骤中的播放待播放音视频的码流，具体步骤可以包括：

根据当前音视频的播放进度，确定待播放音视频开始播放的码流的位置；

播放所确定的位置后的待播放音视频的码流。

比如，高清模式下播放《欢乐颂》第一集，需要切换到超清模式下播放，高清模式下的《欢乐颂》第一集的播放进度到第20分钟，超清模式下的《欢乐颂》第一集的码流加载到第35分钟，待播放音视频的码流满足播放条件，根据当前高清模式下播放《欢乐颂》第一集的播放进度第20分钟，确定超清模式下的《欢乐颂》第一集从第20分钟开始播放。

这样设置使得，既可以实现切换过程中，不会出现“黑场”或“卡顿”的现象，还能使得音视频不会重复播放或跳跃播放。

本实施例中，该方法还包括：

在待播放音视频的码流不满足播放条件，且待播放音视频的码流的加载时间超过预设时间的情况下，向用户提示切换播放音视频不成功的信息。

在待播放音视频的码流不满足播放条件的情况下，如果待播放音视频的码流的加载时间超过预设时间，继续加载这个码流会造成网络带宽的浪费，甚至可能进一步导致音视频播放过程中出现“卡顿”、“黑屏”等现象。这个预设时间可以是考虑所处网络的平均带宽水平和用户所能忍受的时间长来设定的，本领域技术人员可以理解的是，这个预设时间可以是HTML5播放器自动设置的，也可以是用户自行设置的，在此不做限定。

应用图1所示的实施例，切换音视频的码流时，待播放音视频的码流加载到满足播放条件后，才将当前音视频对应的音视频标签的src属性值设置为空即暂停当前音视频的码流播放，并播放待播放音视频的码流，在暂停播放旧的码流到开始播放新的码流之间不需要等待，因此，可以避免在视频播放过程中出现“黑屏”或“卡顿”等现象。

相应于上述的方法实施例，本发明实施例还提供了一种基于HTML5播放器的音视频播放装置。

参照图2，图2为本发明实施例提供的一种基于HTML5播放器的音视频播放装置的结构示意图，该装置包括：

指令接收模块201，用于在当前音视频的码流未播放结束情况下，接收切换播放音视频的码流的指令；

确定模块202，用于确定待播放音视频的地址；

判断模块203，用于判断当前是否存在src属性值为空的音视频标签；

第一加载模块204，用于判断模块输出结果为是时，设置src属性值为待播放音视频的地址，并将待播放音视频设置为非自动播放；根据该地址加载待播放音视频的码流；

第二加载模块205，用于创建src属性值为待播放音视频地址的音视频标签，并将待播放音视频设置为非自动播放；根据该地址加载所述待播放音视频的码流；

检测模块206，用于检测待播放音视频的码流是否满足播放条件；

播放模块207，用于将当前音视频对应的音视频标签的src属性值设置为空；并播放待播放音视频的码流。

应用图2所示实施例，切换音视频的码流时，待播放音视频的码流加载到满足播放条件后，才将当前音视频对应的音视频标签的src属性值设置为空即暂停当前音视频的码流播放，并播放待播放音视频的码流，在暂停播放旧的码流到开始播放新的码流之间不需要等待，因此，可以避免在视频播放过程中出现“黑屏”或“卡顿”等现象。

本实施例中，在所述指令为切换到与当前音视频不同的音视频的情况下，检测待播放音视频的码流是否满足播放条件，可以包括：

检测待播放音视频的码流的加载速度是否不小于待播放音视频的码流的播放速度，如果是，表示待播放音视频的码流满足播放条件。

本实施例中，在指令为将所述当前音视频的清晰度切换到不同清晰度的情况下，检测待播放音视频的码流是否满足播放条件，可以包括：

检测待播放音视频的码流的加载进度是否不小于当前音视频的播放进度，如果是，表示待播放音视频的码流满足播放条件；

播放所述待播放音视频的码流，包括：

播放所确定的位置后的所述待播放音视频的码流。

本实施例中，该装置还包括：

提示模块(图中未示出)，用于在待播放音视频的码流不满足播放条件的情况下，向用户提示切换播放音视频不成功的信息。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本领域普通技术人员可以理解实现上述方法实施方式中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于计算机可读取存储介质中，这里所称得的存储介质，如：ROM/RAM、磁碟、光盘等。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.一种基于HTML5播放器的音视频播放方法，其特征在于，所述方法包括：

确定待播放音视频的地址；

判断当前是否存在src属性值为空的音视频标签；

检测所述待播放音视频的码流是否满足播放条件；

2.根据权利要求1所述的方法，其特征在于，在所述指令为切换到与所述当前音视频不同的音视频的情况下，

3.根据权利要求1所述的方法，其特征在于，在所述指令为将所述当前音视频的清晰度切换到不同清晰度的情况下，

所述播放所述待播放音视频的码流，包括：

播放所确定的位置后的所述待播放音视频的码流。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述待播放音视频的码流不满足播放条件，且待播放音视频的码流的加载时间超过预设时间的情况下，向用户提示切换播放音视频不成功的信息。

5.一种基于HTML5播放器的音视频播放装置，其特征在于，所述装置包括：

确定模块，用于确定待播放音视频的地址；

6.根据权利要求5所述的装置，其特征在于，在所述指令为切换到与所述当前音视频不同的音视频的情况下，

7.根据权利要求5所述的装置，其特征在于，在所述指令为将所述当前音视频的清晰度切换到不同清晰度的情况下，

所述播放所述待播放音视频的码流，包括：

播放所确定的位置后的所述待播放音视频的码流。

8.根据权利要求5所述的装置，其特征在于，所述装置还包括：

提示模块，用于在所述待播放音视频的码流不满足播放条件，且待播放音视频的码流的加载时间超过预设时间的情况下，向用户提示切换播放音视频不成功的信息。