CN111064979A - 一种网页直播方法、装置、网页终端和存储介质 - Google Patents

一种网页直播方法、装置、网页终端和存储介质 Download PDF

Info

Publication number
CN111064979A
CN111064979A CN201911405296.4A CN201911405296A CN111064979A CN 111064979 A CN111064979 A CN 111064979A CN 201911405296 A CN201911405296 A CN 201911405296A CN 111064979 A CN111064979 A CN 111064979A
Authority
CN
China
Prior art keywords
live broadcast
webpage
live
video
broadcast
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201911405296.4A
Other languages
English (en)
Other versions
CN111064979B (zh
Inventor
黄泽鹏
袁青松
钟星斗
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Bigo Technology Pte Ltd
Original Assignee
Guangzhou Baiguoyuan Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Baiguoyuan Network Technology Co Ltd filed Critical Guangzhou Baiguoyuan Network Technology Co Ltd
Priority to CN201911405296.4A priority Critical patent/CN111064979B/zh
Publication of CN111064979A publication Critical patent/CN111064979A/zh
Application granted granted Critical
Publication of CN111064979B publication Critical patent/CN111064979B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/239—Interfacing the upstream path of the transmission network, e.g. prioritizing client content requests
    • H04N21/2393—Interfacing the upstream path of the transmission network, e.g. prioritizing client content requests involving handling client requests
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/433—Content storage operation, e.g. storage operation in response to a pause request, caching operations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/437—Interfacing the upstream path of the transmission network, e.g. for transmitting client requests to a VOD server
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client 
    • H04N21/63—Control signaling related to video distribution between client, server and network components; Network processes for video distribution between server and clients or between remote clients, e.g. transmitting basic layer and enhancement layers over different transmission paths, setting up a peer-to-peer communication via Internet between remote STB's; Communication protocols; Addressing
    • H04N21/643—Communication protocols
    • H04N21/6437—Real-time Transport Protocol [RTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/83—Generation or processing of protective or descriptive data associated with content; Content structuring
    • H04N21/845—Structuring of content, e.g. decomposing content into time segments
    • H04N21/8456—Structuring of content, e.g. decomposing content into time segments by decomposing the content in the time domain, e.g. in time segments
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/858—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例公开了一种网页直播方法、装置、网页终端和存储介质。其中，该方法包括：在进入直播网页后，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频；将所述视频元素渲染到所述直播网页预设的直播窗口中，在所述直播窗口中播放所述直播分段视频。本发明实施例提供的技术方案，无需在直播网页渲染完成后再请求直播视频进行播放，从而实现直播分段视频的预先获取，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。

Description

一种网页直播方法、装置、网页终端和存储介质
技术领域
本发明实施例涉及视频处理领域，尤其涉及一种网页直播方法、装置、网页终端和存储介质。
背景技术
随着移动直播市场在互联网行业的迅速发展，面向大量用户的视频直播已经普遍成为人们沟通和娱乐的重要方式。目前通常采用实时消息传输协议(Real Time MessagingProtocol，RTMP)在直播客户端与媒体服务器之间传输相应的直播视频，保证视频直播的实时性，避免直播延时，但是RTMP协议需要搭建专门的RTMP流媒体服务来执行，而且在浏览器中只能通过Flash插件实现视频直播，不支持浏览器中通过网页的视频直播。
针对通过网页的视频直播，现有技术一般以Vue开发框架构建对应的单页应用，并采用当前流行的基于超文本传输协议(Hyper Text Transfer Protocol，HTTP)的流媒体网络传输协议(HTTP Live Streaming，HLS)播放直播视频；此时在用户进入直播网页后，首先请求该直播网页下的超文本标记语言(Hyper Text Markup Language，HTML)文件，对该HTML文件解析后加载其下的JavaScript代码(JS代码)和层叠样式表(Cascading StyleSheets，CSS)伪类，通过执行JS代码和CSS伪类来渲染该直播网页中文档对象模型(Document Object Model，DOM)下的各类网页元素，从而实现直播网页的初始化显示，并向媒体服务器请求相应的直播视频，在该直播网页中进行播放。
现有的网页直播方式从用户进入直播网页到请求直播视频之间存在较长的网页渲染流程，使得用户进入直播网页后，无法即时请求待播放的直播视频，而导致直播网页出现在一定延时下黑屏的情况。
发明内容
本发明实施例提供了一种网页直播方法、装置、网页终端和存储介质，保证直播视频请求的即时性，避免直播网页出现黑屏的情况。
第一方面，本发明实施例提供了一种网页直播方法，该方法包括：
在进入直播网页后，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频；
将所述视频元素渲染到所述直播网页预设的直播窗口中，在所述直播窗口中播放所述直播分段视频。
第二方面，本发明实施例提供了一种网页直播装置，该装置包括：
直播分段请求模块，用于在进入直播网页后，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频；
网页直播模块，用于将所述视频元素渲染到所述直播网页预设的直播窗口中，在所述直播窗口中播放所述直播分段视频。
第三方面，本发明实施例提供了一种网页终端，该网页终端包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明任意实施例所述的网页直播方法。
第四方面，本发明实施例提供了一种网页直播系统，该系统包括：本发明第三方面中所述的网页终端和与所述网页终端通信的直播源服务集群，所述直播源服务集群根据所述网页终端对当前直播的分段视频请求，向所述网页终端下发预设帧数的直播视频帧，所述网页终端合并所述预设帧数的直播视频帧，得到对应的直播分段视频。
第五方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明任意实施例所述的网页直播方法。
本发明实施例提供的一种网页直播方法、装置、网页终端和存储介质，在进入直播网页后，首先通过直播网页中预创建的视频元素请求当前直播下的直播分段视频，同时将该视频元素渲染到直播网页预设的直播窗口中，进而在该直播窗口直接播放请求到的直播分段视频，无需在直播网页渲染完成后再请求直播视频进行播放，从而实现直播分段视频的预先获取，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
图1为本发明实施例提供的一种网页直播系统的原理示意图；
图2A为本发明实施例一提供的一种网页直播方法的流程图；
图2B为本发明实施例一提供的网页直播过程的原理示意图；
图3A为本发明实施例二提供的一种网页直播方法的流程图；
图3B为本发明实施例二提供的网页直播过程的原理示意图；
图4A为本发明实施例三提供的一种网页直播方法的流程图；
图4B为本发明实施例三提供的网页直播过程的原理示意图；
图5为本发明实施例四提供的一种网页直播装置的结构示意图；
图6为本发明实施例五提供的一种网页终端的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。此外，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
本发明实施例主要针对在进入直播网页后，通常先渲染直播网页再请求直播视频进行播放而存在由于直播视频请求延迟，导致直播网页存在黑屏的情况，提供一种新的在网页中播放直播视频的方案，在进入直播网页后，首先在内存中预先创建对应的视频元素，并根据该视频元素即时请求当前直播的直播分段视频，同时对直播网页进行渲染，以使直播网页在渲染完成后直接播放预先请求到的直播分段视频，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
图1为本发明实施例提供的一种网页直播系统的原理示意图。具体的，参考图1，该网页直播系统中可以包括网页终端10和与网页终端10通信的直播源服务集群20。
其中，网页终端10为用户选择通过浏览器中的网页观看直播视频时，该浏览器所在的终端设备，此时用户通过触发网页终端10上浏览器内的直播控件，进入对应的直播网页，进而向直播源服务集群20请求下载当前直播下的直播分段视频；直播源服务集群20为存储有各个直播间内主播端的直播视频源数据、主播开播信息以及开播档位等各项直播数据的文件服务器，该直播源服务集群20上的直播视频源数据为按照直播时间顺序排列的多个直播视频帧，后续直接将直播视频帧下发给网页终端10，由网页终端10合并多个直播视频帧，得到对应的直播分段视频进行播放。
具体的，由于网页终端10上的直播页面需要通过预设的视频元素支持直播视频的播放，而在请求当前直播的视频数据时，无需等到该视频元素在直播网页上渲染完成，只要该视频元素存在于网页终端10的浏览器内存上也可实现直播视频的获取，因此本实施例可以在网页终端10上浏览器内的直播网页对应的HTML文件中预先对该直播网页内的视频元素编写对应的定义代码；此时在进入直播网页后，首先会根据HTML文件中对视频元素预编写的定义代码在浏览器内存中创建出对应的视频元素，并通过该视频元素向直播源服务集群20上传对应的当前直播的分段视频请求，同时将该视频元素渲染到直播网页预设的直播窗口中，此时直播源服务集群20会根据该分段视频请求将当前直播在当前时刻下的预设帧数的直播视频帧下发给该网页终端10，由网页终端10合并预设帧数的直播视频帧，得到对应的直播分段视频，并在渲染后的直播窗口中播放该直播分段视频，此时在进入直播网页后，本发明实施例对于请求当前直播的直播分段视频和渲染直播网页这两个步骤，可以同时执行，从而减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
同时，本发明实施例通过自定义的私有视频直播协议，设置网页终端10与直播源服务集群20之间直接采用长连接方式进行直播视频数据交互，无需通过HTTP服务集群在网页终端10和直播源服务集群20之间对当前直播的直播视频数据进行转发，与现有的共有HLS视频协议中，通过HTTP服务集群接收网页终端10的分段视频请求，从而对直播源服务集群20上预设帧数的直播视频帧进行合并后，转发给网页终端10相比，极大简化了网页直播的视频数据交互流程，保证直播视频数据的传输稳定性；同时网页终端10与直播源服务集群20之间采用的长连接方式扩展性较强，能够适应性添加对应的直播新功能。
本发明实施例对于在网页终端10上执行网页直播的具体操作可以在下述网页直播方法中进行详细的解释说明，在此不作具体介绍。
实施例一
图2A为本发明实施例一提供的一种网页直播方法的流程图，本实施例可应用于任一种通过浏览器内的直播网页观看直播视频的情况中。本实施例提供的一种网页直播方法可以由本发明实施例提供的网页直播装置来执行，该装置可以通过软件和/或硬件的方式来实现，并集成在执行本方法的网页终端中，该网页终端可以是配置有任一种浏览器的手机、平板电脑或笔记本等任一种用户设备。
具体的，参考图2A，该方法可以包括如下步骤：
S210，在进入直播网页后，通过直播网页中预创建的视频元素请求当前直播下的直播分段视频。
具体的，直播网页为网页终端内配置的浏览器中用于显示直播视频的页面，其上存在各类不同的网页元素，用于支持该直播网页内所设置的不同特征功能的正常实现，其中视频元素用于支持在直播网页中持续播放直播视频，此时由于网页终端上的直播页面需要通过预设的视频元素支持直播视频的播放，而对于当前直播的视频数据的请求，无需等到该视频元素在直播网页上渲染完成，只要该视频元素存在于网页终端的浏览器内存上也可实现直播视频的获取，因此本实施例在进入直播页面后，首先会在对应的浏览器内存中优先创建出该直播页面内用于播放直播视频的视频元素，进而通过该视频元素向直播源服务集群请求该直播网页内默认播放的当前直播的直播分段视频，此时该直播分段视频为在进入直播网页后网页终端对当前直播发起分段视频请求的当前时刻下对应的分段视频，从而在进入直播网页后，即时请求当前直播的直播分段视频，无需等到直播网页渲染完成后才开始请求，从而减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求的即时性。
此时，对于当前直播下的直播分段视频，可以由HTTP服务集群对直播源服务集群中在当前时刻下的多个直播视频帧合并，并转发给网页终端得到，也可以是直接由网页终端对直播源服务集群中在当前时刻下的多个直播视频帧合并得到，本实施例中对此不作限定。
示例性的，如图2B所示，本实施例中通过直播网页中预创建的视频元素请求当前直播下的直播分段视频，具体可以包括：通过直播网页中预创建的视频元素获取当前直播中预设帧数的直播视频帧，并合并预设帧数的直播视频帧，得到该直播分段视频。
具体的，在进入直播网页后，网页终端首先通过直播网页中预先在浏览器内存中创建的视频元素向直播源服务集群发起针对当前直播的分段视频请求，直播源服务集群根据该分段视频请求查找出当前直播在当前时刻下预设帧数的直播视频帧，并下发给网页终端，网页终端通过合并该预设帧数的直播视频帧，得到对应的直播分段视频，从而简化直播视频的请求流程。
S220，将视频元素渲染到直播网页预设的直播窗口中，在直播窗口中播放直播分段视频。
具体的，在进入直播网页后，需要按照预先为各个网页元素所定义的元素样式和元素位置等元素显示信息，在该直播网页中加载各个网页元素，此时网页终端在浏览器内存中预先构建出该直播网页的视频元素后，在通过该视频元素请求当前直播下的直播分段视频的同时，还会按照直播网页中预先对该视频元素设置的显示样式，将该视频元素渲染到该直播网页内预设的直播窗口中，进而在该直播窗口中直接播放请求到的当前直播在当前时刻下的直播分段视频，此时通过预先请求当前直播的直播分段视频，并在直播网页渲染完成后直接播放该直播分段视频，无需在直播网页渲染完成后请求直播视频，保证网页直播的实时性，避免网页直播的延时。
此外，由于直播网页中可能存在多个直播间，如果用户在该直播网页内选择不同的直播间播放，由于直播网页构建为单页应用，此时在直播窗口中播放当前直播下的直播分段视频之后，本实施例还可以包括：如果在直播网页内执行直播跳转，则标记直播网页中渲染的视频元素，并在直播跳转完成后，根据标记后的视频元素在直播窗口中播放下一直播下的直播分段视频。
具体的，如果在直播网页内执行直播跳转，也就是在直播网页内将当前直播切换为下一直播进行播放，表示在直播网页内执行单页路由跳转，此时自动标记出在该直播网页预设的直播窗口中渲染后的视频元素，并存入浏览器内存中，同时向直播源服务集群请求下一直播下的直播分段视频，进而在直播跳转完成后，将标记后的视频元素渲染到直播窗口，并在该直播窗口播放下一直播下的直播分段视频，保证直播窗口在直播跳转下的不断流持续播放；同时在保证网页直播实时性的基础上，不改动直播网页的单页应用框架，降低网页直播的开发工作量。
本实施例提供的技术方案，在进入直播网页后，首先通过直播网页中预创建的视频元素请求当前直播下的直播分段视频，同时将该视频元素渲染到直播网页预设的直播窗口中，进而在该直播窗口直接播放请求到的直播分段视频，无需在直播网页渲染完成后再请求直播视频进行播放，从而实现直播分段视频的预先获取，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
实施例二
图3A为本发明实施例二提供的一种网页直播方法的流程图，图3B为本发明实施例二提供的网页直播过程的原理示意图。本实施例是在上述实施例的基础上进行优化，本实施例主要对于直播网页渲染和视频元素创建的具体过程进行详细的解释说明。
可选的，如图3A所示，本实施例可以包括如下步骤：
S310，在进入直播网页后，根据直播网页下的HTML文件中预编写的视频元素代码，创建直播网页下的视频元素。
可选的，网页终端通过采用HTML文件描述对应网页的结构化显示信息，以对网页中各个元素添加字体、间距和颜色等样式结构，通过HTML标签和脚本来诠释网页中的具体内容，其中HTML文件通常包括Javascript动态脚本和层叠样式表(Cascading StyleSheets，CSS)伪类两部分，该Javascript动态脚本可以定义直播网页中的不同功能开发以及动态控制网页内容，如修改网页文字、图片、各种效果和功能等，该CSS伪类可以通过设置对应的样式属性来修改html文件内定义的直播网页内各类元素的显示和位置等样式，如修改网页颜色、字体、字号、宽高、位置和背景等；此时本实施例为了在浏览器内存中预先构建直播网页下的视频元素，会预先采用Javascript动态脚本语言在该直播网页下的HTML文件中编写针对该视频元素的定义代码，也就是本实施例中的视频元素代码。
本实施例中，在进入直播网页后，为了展示该直播网页，首先查找出该直播网页下的HTML文件并解析，得到对应的Javascript动态脚本代码的存储地址，进而查找出该存储地址下在HTML文件中预编写的视频元素代码，如图3B所示，通过执行该视频元素代码，在浏览器内容中优先创建出该直播网页下的视频元素，以便后续直接根据该浏览器内存中的视频元素请求当前直播下的直播分段视频，无需等到直播网页渲染完成，保证直播视频请求的即时性。
S320，通过直播网页中预创建的视频元素请求当前直播下的直播分段视频。
S330，加载直播网页下的HTML文件中预定义的网页渲染结构，并在网页渲染结构中确定视频元素对应的直播窗口。
可选的，在解析直播网页下的HTML文件时，还会得到其下包含的CSS伪类的存储地址，进而查找出该存储地址下的CSS伪类，此时本实施例中的网页渲染结构可以由该CSS伪类表示，以描述直播网页中各个元素的显示样式和位置结构等，此时通过查找该直播网页下HTML文件中的CSS伪类，即可加载直播网页下的HTML文件中预定义的网页渲染结构，并通过该CSS伪类中对于视频元素的显示样式和位置等渲染信息，确定视频元素在直播网页中对应的直播窗口，以便后续根据该CSS伪类将视频元素渲染到该直播窗口。
S340，将视频元素渲染到直播网页预设的直播窗口中，并在直播网页中按照网页渲染结构渲染除视频元素外的其余网页元素，在直播窗口中播放直播分段视频。
可选的，在解析直播网页下的HTML文件，得到对应的Javascript动态脚本代码和CSS伪类的存储地址后，可以获取到该直播网页内针对全部网页元素编写的执行代码和渲染样式，此时本实施例中的网页渲染结构(CSS伪类)中会包含全部网页元素的渲染样式，因此在将视频元素渲染到直播网页预设的直播窗口中时，还会按照该网页渲染结构中对出视频元素外的其余网页元素的渲染样式描述，在直播网页中渲染其余网页元素，同时在直播窗口中播放预先请求到的当前直播下的直播分段视频，保证直播网页的展示全面性。
本实施例提供的技术方案，在进入直播网页后，首先通过直播网页中预创建的视频元素请求当前直播下的直播分段视频，同时将该视频元素渲染到直播网页预设的直播窗口中，进而在该直播窗口直接播放请求到的直播分段视频，无需在直播网页渲染完成后再请求直播视频进行播放，从而实现直播分段视频的预先获取，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
实施例三
图4A为本发明实施例三提供的一种网页直播方法的流程图，图4B为本发明实施例三提供的网页直播过程的原理示意图。本实施例是在上述实施例的基础上进行优化，本实施例主要对当前直播下的直播分段视频的自适应码率的具体确定过程进行详细的解释说明。
可选的，如图4A所示，本实施例可以包括如下步骤：
S410，在进入直播网页后，通过直播网页中预创建的视频元素请求当前直播在默认码率挡位下的直播分段视频。
具体的，由于现有请求直播视频的流程较长，通常需要先请求直播分段视频的全部码率挡位，并根据当前网络状态在全部码率挡位中自适应选取出最优的码率挡位，进而向直播源服务集群拉取该码率挡位下的直播分段视频，此时需要等到全部码率挡位的返回，增加了直播视频的请求时长，因此为了降低进入直播网页后，直播视频的请求时长，本实施例会在直播源服务集群中预先定义一个默认码率挡位，进而在进入直播网页后首次请求直播视频时，可以通过直播网页中预创建的视频元素直接请求当前直播在默认码率挡位下的直播分段视频，无需等待获取全部码率挡位，使得直播源服务集群在网页终端进入直播网页后首次请求时，直接将当前视频在当前时刻下通过默认码率挡位进行编码的预设帧数的直播视频帧下发给该网页终端，由该网页终端对在默认码率挡位下的预设帧数的直播视频帧进行合并，得到在默认码率挡位下的直播分段视频，加快直播网页内播放的首帧的获取时长，后续再根据网络状态自适应调整之后的直播视频的码率挡位，保证网页直播的流畅性。
S420，将视频元素渲染到直播网页预设的直播窗口中，在直播窗口中播放直播分段视频。
S430，在当前直播的码率挡位中选取出最符合当前网络状态的目标码率挡位，并通过渲染后的视频元素请求当前直播在目标码率挡位下未播放的直播分段视频。
可选的，在直播网页的直播窗口播放进入该直播网页初次请求的当前直播在默认码率挡位下的直播分段视频后，再请求获取当前直播的全部码率挡位，并实时判断当前网络状态，在之后的网页直播过程中每次请求当前直播未播放的直播分段视频时，均在当前直播的全部码率挡位中选取出最符合当前网络状态的目标码率挡位，并向直播源服务集群请求当前直播在目标码率挡位下未播放的直播分段视频，从而提高后续网页直播的清晰度，避免下载不及时造成的播放卡顿，保证视频播放的流畅性。
同时，本实施例在请求当前直播下的直播分段视频时，均会生成对应的分段视频请求，本实施例中可以包括：利用服务工作(service worker，SW)线程自定义直播网页下的分段视频请求。具体的，本实施例采用网页终端上配置的SW线程自定义各个分段视频请求，无需改动HLS直播协议，降低网页直播的开发工作量。
本实施例提供的技术方案，在进入直播网页后，通过直播网页中预创建的视频元素首次请求直播视频时，直接请求当前直播在默认码率挡位下的直播分段视频，无需等待当前直播的全部码率挡位确定，加快直播网页中首帧的获取速率，同时在之后的网页直播过程中根据网络状态自适应调整各直播分段视频的码率挡位，保证各直播分段视频在自适应码率下的分段下载，提高直播分段视频的清晰度，避免下载不及时造成的播放卡顿，保证视频播放的流畅性。
实施例四
图5为本发明实施例四提供的一种网页直播装置的结构示意图，具体的，如图5所示，该装置可以包括：
直播分段请求模块510，用于在进入直播网页后，通过直播网页中预创建的视频元素请求当前直播下的直播分段视频；
网页直播模块520，用于将视频元素渲染到直播网页预设的直播窗口中，在直播窗口中播放所述直播分段视频。
本实施例提供的技术方案，在进入直播网页后，首先通过直播网页中预创建的视频元素请求当前直播下的直播分段视频，同时将该视频元素渲染到直播网页预设的直播窗口中，进而在该直播窗口直接播放请求到的直播分段视频，无需在直播网页渲染完成后再请求直播视频进行播放，从而实现直播分段视频的预先获取，减少从进入直播网页到请求直播视频之间的时间损耗，保证直播视频请求和播放的即时性，避免直播网页出现黑屏的情况。
进一步的，上述网页直播装置，还可以包括：
视频元素创建模块，用于根据直播网页下的HTML文件中预编写的视频元素代码，创建直播网页下的视频元素。
进一步的，上述网页直播装置，还可以包括：
渲染结构加载模块，用于加载直播网页下的HTML文件中预定义的网页渲染结构，并在网页渲染结构中确定视频元素对应的直播窗口。
进一步的，上述网页直播装置，还可以包括：
网页元素渲染模块，用于在直播网页中按照网页渲染结构渲染除视频元素外的其余网页元素。
进一步的，上述网页直播装置，还可以包括：
直播跳转模块，用于如果在直播网页内执行直播跳转，则标记直播网页中渲染的视频元素，并在直播跳转完成后，根据标记后的视频元素在直播窗口中播放下一直播下的直播分段视频。
进一步的，上述直播分段请求模块510，可以具体用于：
通过直播网页中预创建的视频元素请求当前直播在默认码率挡位下的直播分段视频。
进一步的，上述网页直播装置，还可以包括：
自适应码率确定模块，用于在当前直播的码率挡位中选取出最符合当前网络状态的目标码率挡位，并通过渲染后的视频元素请求当前直播在目标码率挡位下未播放的直播分段视频。
进一步的，上述网页直播装置，还可以包括：
请求定义模块，用于利用SW线程自定义直播网页下的分段视频请求。
进一步的，上述直播分段请求模块510，可以具体用于：
通过直播网页中预创建的视频元素获取当前直播中预设帧数的直播视频帧，并合并预设帧数的直播视频帧，得到直播分段视频。
本实施例提供的网页直播装置可适用于上述任意实施例提供的网页直播方法，具备相应的功能和有益效果。
实施例五
图6为本发明实施例五提供的一种网页终端的结构示意图，如图6所示，该网页终端包括处理器60、存储装置61和通信装置62；网页终端中处理器60的数量可以是一个或多个，图6中以一个处理器60为例；网页终端中的处理器60、存储装置61和通信装置62可以通过总线或其他方式连接，图6中以通过总线连接为例。
存储装置61作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中提供的网页直播方法对应的程序指令/模块。处理器60通过运行存储在存储装置61中的软件程序、指令以及模块，从而执行网页终端的各种功能应用以及数据处理，即实现上述网页直播方法。
存储装置61可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置61可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置61可进一步包括相对于处理器60远程设置的存储器，这些远程存储器可以通过网络连接至网页终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
通信装置62可用于实现网页终端与直播源服务集群之间的网络连接或者移动数据连接。
本实施例提供的一种网页终端可用于执行上述任意实施例提供的网页直播方法，具备相应的功能和有益效果。
实施例六
本发明实施例六还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时可实现上述任意实施例中的网页直播方法。该方法具体可以包括：
在进入直播网页后，通过直播网页中预创建的视频元素请求当前直播下的直播分段视频；
将视频元素渲染到直播网页预设的直播窗口中，在直播窗口中播放直播分段视频。
当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的网页直播方法中的相关操作。
通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是，上述网页直播装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
以上所述仅为本发明的优选实施例，并不用于限制本发明，对于本领域技术人员而言，本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (13)

1.一种网页直播方法，其特征在于，包括：
在进入直播网页后，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频；
将所述视频元素渲染到所述直播网页预设的直播窗口中，在所述直播窗口中播放所述直播分段视频。
2.根据权利要求1所述的方法，其特征在于，在通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频之前，还包括：
根据所述直播网页下的超文本标记语言HTML文件中预编写的视频元素代码，创建所述直播网页下的视频元素。
3.根据权利要求1所述的方法，其特征在于，在将所述视频元素渲染到所述直播网页预设的直播窗口中之前，还包括：
加载所述直播网页下的HTML文件中预定义的网页渲染结构，并在所述网页渲染结构中确定所述视频元素对应的直播窗口。
4.根据权利要求3所述的方法，其特征在于，在将所述视频元素渲染到所述直播网页预设的直播窗口中之时，还包括：
在所述直播网页中按照所述网页渲染结构渲染除所述视频元素外的其余网页元素。
5.根据权利要求1-4任一项所述的方法，其特征在于，还包括：
如果在所述直播网页内执行直播跳转，则标记所述直播网页中渲染的视频元素，并在直播跳转完成后，根据标记后的视频元素在所述直播窗口中播放下一直播下的直播分段视频。
6.根据权利要求1-4任一项所述的方法，其特征在于，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频，包括：
通过所述直播网页中预创建的视频元素请求当前直播在默认码率挡位下的直播分段视频。
7.根据权利要求6所述的方法，其特征在于，在所述直播窗口中播放所述直播分段视频之后，还包括：
在当前直播的码率挡位中选取出最符合当前网络状态的目标码率挡位，并通过渲染后的视频元素请求当前直播在所述目标码率挡位下未播放的直播分段视频。
8.根据权利要求7所述的方法，其特征在于，还包括：
利用服务工作SW线程自定义所述直播网页下的分段视频请求。
9.根据权利要求1-4任一项所述的方法，其特征在于，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频，包括：
通过所述直播网页中预创建的视频元素获取当前直播中预设帧数的直播视频帧，并合并所述预设帧数的直播视频帧，得到所述直播分段视频。
10.一种网页直播装置，其特征在于，包括：
直播分段请求模块，用于在进入直播网页后，通过所述直播网页中预创建的视频元素请求当前直播下的直播分段视频；
网页直播模块，用于将所述视频元素渲染到所述直播网页预设的直播窗口中，在所述直播窗口中播放所述直播分段视频。
11.一种网页终端，其特征在于，所述网页终端包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9中任一所述的网页直播方法。
12.一种网页直播系统，其特征在于，包括权利要求11所述的网页终端和与所述网页终端通信的直播源服务集群，所述直播源服务集群根据所述网页终端对当前直播的分段视频请求，向所述网页终端下发预设帧数的直播视频帧，所述网页终端合并所述预设帧数的直播视频帧，得到对应的直播分段视频。
13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一所述的网页直播方法。
CN201911405296.4A 2019-12-30 2019-12-30 一种网页直播方法、装置、网页终端和存储介质 Active CN111064979B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911405296.4A CN111064979B (zh) 2019-12-30 2019-12-30 一种网页直播方法、装置、网页终端和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911405296.4A CN111064979B (zh) 2019-12-30 2019-12-30 一种网页直播方法、装置、网页终端和存储介质

Publications (2)

Publication Number Publication Date
CN111064979A true CN111064979A (zh) 2020-04-24
CN111064979B CN111064979B (zh) 2023-02-28

Family

ID=70305106

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911405296.4A Active CN111064979B (zh) 2019-12-30 2019-12-30 一种网页直播方法、装置、网页终端和存储介质

Country Status (1)

Country Link
CN (1) CN111064979B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113099260A (zh) * 2021-04-21 2021-07-09 北京沃东天骏信息技术有限公司 直播处理方法、直播平台、系统、介质及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080235588A1 (en) * 2007-03-20 2008-09-25 Yahoo! Inc. Media player playlist creation and editing within a browser interpretable document
CN102929971A (zh) * 2012-10-15 2013-02-13 长春指南针科技有限公司 一种多媒体信息播放方法和系统
CN105828208A (zh) * 2016-03-29 2016-08-03 青岛海信电器股份有限公司 播放音视频的方法、装置与智能终端
CN110149560A (zh) * 2019-06-05 2019-08-20 亦非云互联网技术（上海）有限公司 基于hls协议的播放器优化方法及系统、存储介质及终端
CN110309461A (zh) * 2019-07-04 2019-10-08 郑州悉知信息科技股份有限公司 页面展现方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080235588A1 (en) * 2007-03-20 2008-09-25 Yahoo! Inc. Media player playlist creation and editing within a browser interpretable document
CN102929971A (zh) * 2012-10-15 2013-02-13 长春指南针科技有限公司 一种多媒体信息播放方法和系统
CN105828208A (zh) * 2016-03-29 2016-08-03 青岛海信电器股份有限公司 播放音视频的方法、装置与智能终端
CN110149560A (zh) * 2019-06-05 2019-08-20 亦非云互联网技术（上海）有限公司 基于hls协议的播放器优化方法及系统、存储介质及终端
CN110309461A (zh) * 2019-07-04 2019-10-08 郑州悉知信息科技股份有限公司 页面展现方法和装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113099260A (zh) * 2021-04-21 2021-07-09 北京沃东天骏信息技术有限公司 直播处理方法、直播平台、系统、介质及电子设备
CN113099260B (zh) * 2021-04-21 2022-02-01 北京沃东天骏信息技术有限公司 直播处理方法、直播平台、系统、介质及电子设备

Also Published As

Publication number Publication date
CN111064979B (zh) 2023-02-28

Similar Documents

Publication Publication Date Title
CN109032738B (zh) 多媒体播放控制方法、装置、终端及存储介质
CN112770188B (zh) 一种视频播放方法及装置
KR101240997B1 (ko) 네트워크 프로그램을 재생하기 위해 소프트웨어 자원을구성하는 방법 및 장치
CN106331345B (zh) 一种交互消息展示方法、装置及系统
CN107105336B (zh) 数据处理方法及数据处理装置
US11924503B2 (en) Bullet comment presentation method and system
CN112087665B (zh) 视频直播的预览方法、计算设备及计算机存储介质
US9141724B2 (en) Transcoder hinting
US11503347B2 (en) Method of playing video, computing device, and computer program product
WO2017028722A1 (zh) 显示应用程序闪屏图像的方法和装置
US20170171277A1 (en) Method and electronic device for multimedia recommendation based on android platform
US10282172B2 (en) Authoring and deploying television apps and pages in a content management system
JP5680188B2 (ja) キャッシュメモリ管理を最適化する方法、およびそれに対応する装置
CN104899212B (zh) 网页展示方法、服务器及系统
CN111381749A (zh) 一种图像显示和处理方法、装置、设备和存储介质
US20220408160A1 (en) Live commenting processing method and system
CN111064979B (zh) 一种网页直播方法、装置、网页终端和存储介质
KR101958662B1 (ko) 웹페이지 자바 스크립트 객체 공유 방법 및 장치
CN113315982A (zh) 一种直播方法、计算机存储介质及设备
CN112307385A (zh) 网页数据加载和处理方法、装置、电子设备及存储介质
CN116578795A (zh) 网页页面的生成方法及装置、存储介质、电子设备
CN112559034A (zh) 骨架屏文件的生成方法及系统
CN114880613B (zh) 一种图像播放处理方法
US10402477B2 (en) Method for real-time automatic modification on the server side of a web page to visualize a content superposed to the web page
CN115329225B (zh) 基于服务端浏览器的页面预渲染方法、系统及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20231012

Address after: 31a, 15 / F, building 30, maple mall, bangrang Road, Brazil, Singapore

Patentee after: Baiguoyuan Technology (Singapore) Co.,Ltd.

Address before: Floor 4, 5, 6, 13, 14, 15, 16, Jisheng business center, 278 Xingtai Road, Shiqiao street, Panyu District, Guangzhou, Guangdong 510000

Patentee before: GUANGZHOU BAIGUOYUAN NETWORK TECHNOLOGY Co.,Ltd.