CN115278330A - 网页端进行视频播放的方法及装置 - Google Patents

网页端进行视频播放的方法及装置 Download PDF

Info

Publication number
CN115278330A
CN115278330A CN202210724577.1A CN202210724577A CN115278330A CN 115278330 A CN115278330 A CN 115278330A CN 202210724577 A CN202210724577 A CN 202210724577A CN 115278330 A CN115278330 A CN 115278330A
Authority
CN
China
Prior art keywords
video
playing
picture
focus
display area
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.)
Pending
Application number
CN202210724577.1A
Other languages
English (en)
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.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili 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 Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202210724577.1A priority Critical patent/CN115278330A/zh
Publication of CN115278330A publication Critical patent/CN115278330A/zh
Pending legal-status Critical Current

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/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/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • 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/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4318—Generation of visual interfaces for content selection or interaction; Content or additional data rendering by altering the content in the rendering process, e.g. blanking, blurring or masking an image region
    • 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/438—Interfacing the downstream path of the transmission network originating from a server, e.g. retrieving encoded video stream packets from an IP network
    • H04N21/4383—Accessing a communication channel
    • 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/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/4722—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for requesting additional data associated with the content
    • H04N21/4725—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for requesting additional data associated with the content using interactive regions of the image, e.g. hot spots
    • 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)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例提供一种网页端进行视频播放的方法，所述网页端包括焦点展示区域，所述焦点展示区域包括若干张轮换展示的图片，至少一张所述图片对应有视频，所述方法包括：在当前展示图片对应有第一视频的情况下，获取所述第一视频；在所述当前展示图片的展示时长达到第一预设时长的情况下，在所述焦点展示区域中播放所述第一视频；在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示。本申请实施例提供的网页端进行视频播放的方法，可以较好地提高用户点击焦点图的兴趣，提高焦点图的点击转化率。

Description

网页端进行视频播放的方法及装置
技术领域
本申请涉及计算机技术领域，特别涉及一种网页端进行视频播放的方法、装置、计算机设备及存储介质。
背景技术
在网站上，通常会以焦点图形式集中展现网站中的焦点，用户可以根据需要点击焦点图中的图片来切换至相应的详细页面；也可以根据需要点击来切换焦点图来浏览不同的焦点；还可以等待焦点图自动切换，在感兴趣时再点击焦点图中的图片来切换至详细页面。
然而，目前焦点图均是通过图片的形式来实现，而图片承载的信息较为有限，难以提高用户点击焦点图的兴趣，焦点图的点击转化率较低。
发明内容
本申请的目的在于提供一种网页端进行视频播放的方法、装置、计算机设备及存储介质，用于解决目前通过图片形式实现的焦点图难以提高用户点击的兴趣、焦点图的点击转化率较低的技术问题。
本申请实施例的一个方面提供了一种网页端进行视频播放的方法，所述网页端包括焦点展示区域，所述焦点展示区域包括若干张轮换展示的图片，至少一张所述图片对应有视频，所述方法包括：在当前展示图片对应有第一视频的情况下，获取所述第一视频；在所述当前展示图片的展示时长达到第一预设时长的情况下，在所述焦点展示区域中播放所述第一视频；在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示。
可选地，获取所述第一视频，包括：获取与所述当前展示图片对应的标识；从服务端中获取与所述标识对应的视频作为所述第一视频。
可选地，所述在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示，包括：在所述第一视频在预设时间内未起播，且所述当前展示图片的展示时长达到第二预设时长的情况下，切换至所述焦点展示区域的下一图片进行展示。
可选地，所述焦点展示区域包括若干个切换控件，所述切换控件用于切换所述图片且与一张所述图片对应，所述方法还包括：在所述第一视频正在播放的情况下，将所述当前展示图片对应的切换控件的形式设置为进度条，所述进度条用于展示所述第一视频的播放进度。
可选地，所述焦点展示区域还包括底部，所述方法还包括：获取所述当前展示图片的色彩；在所述当前展示图片无对应视频的情况下，根据所述当前展示图片的色彩设置所述底部的色彩，否则将所述底部的色彩设置为预设色彩。
可选地，网页端进行视频播放的方法还包括：在所述焦点展示区域在可视区域外且所述第一视频正在播放的情况下，暂停所述第一视频的播放；在所述焦点展示区域中的至少部分重新进入所述可视区域的情况下，继续所述第一视频的播放。
可选地，所述在所述焦点展示区域中播放所述第一视频，包括：获取所述视频对应的弹幕；在所述焦点展示区域中播放所述第一视频，并展示与所述第一视频对应的弹幕。
可选地，所述在所述焦点展示区域中播放所述第一视频，包括：在所述第一视频正在播放的情况下，在所述焦点展示区域中显示用于控制所述第一视频声音的开关。
本申请实施例的一个方面又提供了一种网页端进行视频播放的装置，所述网页端包括焦点展示区域，所述焦点展示区域包括若干张轮换展示的图片，至少一张所述图片对应有视频，所述装置包括：获取模块，用于在当前展示图片对应有第一视频的情况下，获取所述第一视频；播放模块，用于在所述当前展示图片的展示时长达到第一预设时长的情况下，在所述焦点展示区域中播放所述第一视频；切换模块，用于在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示。
本申请实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时用于实现上述的网页端进行视频播放的方法的步骤。
本申请实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行上述的网页端进行视频播放的方法的步骤。
本申请实施例提供的网页端进行视频播放的方法、装置、计算机设备及存储介质，包括以下优点：
通过获取与焦点展示区域中图片对应的视频，在当前展示图片的展示时长达到第一预设时长且当前展示的图片对应有视频的情况下，在焦点展示区域中播放第一视频；在达到预设切换条件的情况下，切换至焦点展示区域中的另一图片进行展示，可以将视频显示在焦点展示区域(对应焦点图)中并实现视频的自动播放，由于视频相对图片具有更为丰富的信息，因此可以有效地提高用户点击焦点图的兴趣，从而提高焦点图的点击转化率。
附图说明
图1示意性示出了本申请实施例的环境架构图；
图2示意性示出了本申请实施例一的网页端进行视频播放的方法的流程图；
图3为图2中步骤S410子步骤的流程图；
图4为焦点展示区域的示意图；
图5为图2中新增步骤的流程图；
图6为图2中新增步骤的另一流程图；
图7为图2中步骤S420子步骤的流程图；
图8示意性示出了本申请实施例二的网页端进行视频播放的装置的框图；
图9示意性示出了本申请实施例三的计算机设备的硬件架构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。
下面为本申请涉及的术语解释：
焦点图：在网站中较为显眼的位置显示的一组图片，在没有点击的情况下自动进行图片的切换，也可以根据用户的点击切换至相应的图片，在点击图片时，会跳转到与图片对应的详细页面。
inline视频：在网页中以非全屏方式播放的视频。
控件：是一种图形用户界面元素，其显示的信息排列可由用户改变，例如视窗或文本框，是为给定数据的直接操作提供单独的互动点；是一种基本的可视构件块，包含在应用程序中，控制着该程序处理的所有数据以及关于这些数据的交互操作。
图1示意性示出了本申请实施例的环境架构图，如图1所示：
服务端100通过网络200将包含有焦点展示区域的网页端显示在客户端300，该焦点展示区域包括若干张轮换展示的图片，至少一张图片对应有视频，客户端300在确定当前展示图片对应有视频的情况下，通过网络200从服务端100获取与当前展示图片对应的视频，在当前展示图片的展示时长达到第一预设时长情况下，在焦点展示区域播放当前展示图片对应的视频，在达到预设切换条件的情况下，切换至焦点展示区域的另一图片进行展示。
在示例性的实施例中，服务端100可以指数据中心，例如单个房屋，或者分布在不同的地理位置(例如，在几个房屋)。服务端100可以通过一个或多个网络200提供服务。
网络200包括各种网络设备，例如路由器、交换机、多路复用器、集线器、调制解调器、网桥、中继器、防火墙、代理设备和/或类似。网络200可以包括物理链路，例如同轴电缆链路、双绞线电缆链路、光纤链路、它们的组合和/或类似物。网络200可以包括无线链路，例如蜂窝链路、卫星链路、Wi-Fi链路和/或类似物。
客户端300可以包括诸如移动设备、平板设备、膝上型计算机、智能设备(例如智能服装、智能手表、智能眼镜)、虚拟现实耳机、游戏设备、机顶盒、数字流设备、机器人、车载终端、智能电视、电视盒或电子书阅读器。
相关技术中，焦点图都是通过图片的形式来实现，但是图片承载的信息较为有限，难以提高用户点击的兴趣，焦点图的点击转化率较低。
本申请实施例提供的网页端进行视频播放的方案，可以较好地提高用户点击焦点图的兴趣，提高焦点图的点击转化率。
以下将通过若干个实施例介绍网页端进行视频播放的方案，为便于理解，下面将以图1中的客户端300为执行主体进行示例性描述。
实施例一
图2示意性示出了本申请实施例一的网页端进行视频播放的方法的流程图，该网页端包括焦点展示区域，焦点展示区域包括若干张轮换展示的图片，至少一张图片对应有视频，网页端进行视频播放的方法包括步骤S410～步骤S430，具体说明如下：
步骤S410，在当前展示图片对应有第一视频的情况下，获取第一视频。
轮换展示图片，是指焦点展示区域中的图片自动展示并进行切换，例如用户在刚打开某个网站时，客户端300按照预先设置的规则自动展示焦点展示区域中的图片并进行切换。
第一视频可以是原始视频，也可以是根据原始视频另外制作的视频，还可以是从原始视频中的一个视频片段，具体可以根据实际需要进行设置，此处不做限制。
焦点展示区域中的图片可以与视频对应，也可以与除视频外其它形式的内容相对应。可选地，焦点展示区域的每一张图片均对应有视频。在一些场景下，虽然可以根据图片获取到对应的视频，但相应的视频因特殊原因无法在焦点展示区域中播放时，则可以认为该图片无对应的视频；实际应用中，可以对这些图片和/或相应的视频设置特定标识，从而使客户端300根据特定标识确定不在焦点展示区域中播放相应的视频。
在示例性的实施例中，如图3所示，步骤S410可以包括步骤S411～步骤S412，其中，步骤S411，获取与当前展示图片对应的标识；步骤S412，从服务端中获取与标识对应的视频作为第一视频。
服务端100可以预先对焦点展示区域中的图片和图片对应的视频设置相关联的标识，从而使客户端300在获取到图片对应的标识后，可以根据标识到服务端100中获取到相应的视频。例如，若焦点展示区域中的a图片标识为1，服务端100中存储在标识为1的视频，则客户端300可以从服务端100中获取与标识为1的视频作为a图片对应的视频。与之相应地，客户端300可以根据焦点展示区域中的图片是否具有相应的标识来判断其是否对应有视频，若有相应的标识，则确定图片对应有视频，否则确定图片无对应的视频。
本实施例中，通过获取与当前展示图片对应的标识，再从服务端中获取与标识对应的视频作为第一视频，可以有效地获取焦点展示区域中图片对应的视频。
步骤S420，在当前展示图片的展示时长达到第一预设时长的情况下，在焦点展示区域中播放第一视频。
可以理解的是，由于图片对应的视频在焦点展示区域中播放，并非全屏播放，因此图片对应的视频属于inline视频。
第一预设时长可以为0.5秒、1秒或2秒等，具体根据实际需要进行设置，此处不做限制。例如，若第一预设时长为1秒，则步骤S420可以为：在当前展示图片的展示时长达到1秒的情况下，在焦点展示区域中播放第一视频。
示例性地，在当前展示图片的展示时长未达到第一预设时长时，继续展示当前展示图片；或者，当前展示图片无对应的视频的情况下，则继续展示当前展示图片一定时间后切换至焦点展示区域中的下一图片进行展示。
步骤S430，在达到预设切换条件的情况下，切换至焦点展示区域的另一图片进行展示。
预设切换条件可以为：第一视频播放时长达到预定时长、接收到用户的切换指令和/或第一视频播放失败等，具体可以根据实际需要进行设置，此处不做限制。例如，预设切换条件为第一视频播放时长达到10秒，则客户端300在第一视频播放时长达到10秒时，切换至焦点展示区域的下一图片进行展示；在切换之后，若下一图片对应有视频的情况下，获取下一图片对应的视频，在下一图片展示时长达到第一预设时长的情况下，则在焦点展示区域中播放下一图片对应的视频，以此类推。
本实施例提供的网页端进行视频播放的方法，通过获取与焦点展示区域中图片对应的视频，在当前展示图片的展示时长达到第一预设时长且当前展示的图片对应有视频的情况下，在焦点展示区域中播放第一视频；在达到预设切换条件的情况下，切换至焦点展示区域中的另一图片进行展示，可以将视频显示在焦点展示区域(对应焦点图)中并实现视频的自动播放，由于视频相对图片具有更为丰富的信息，因此可以有效地提高用户点击焦点图的兴趣，从而提高焦点图的点击转化率。
在示例性的实施例中，在步骤S430中，在达到预设切换条件的情况下，切换至焦点展示区域中的另一图片进行展示，可以包括：在第一视频在预设时间内未起播，且当前展示图片的展示时长达到第二预设时长的情况下，切换至焦点展示区域的下一图片进行展示。
预设时间可以为1秒、2秒等，具体可以根据实际需要设置，此处不做限制。可以理解的是，由于第一视频在展示时长达到第一预设时长才开始播放，且还需要等待预设时间后才确定第一视频是否成功起播，因此第二预设时长应大于第一时设时长加上预设时间对应的总时间，例如若第一预设时长为0.5秒，而预设时间为1秒，则第二预设时长应大于1.5秒，具体数值可以根据实际需要进行设置，此处也不做限制。
实际应用中，可能存在网络卡顿、返回错误等因素导致第一视频在预设时间内未起播的情况，而及时切换至焦点展示区域的下一图片进行展示，可以保证焦点展示区域的切换效果，从而保证用户的观看体验。
本实施例中，在第一视频在预设时间内未起播，且当前展示图片的展示时长达到第二预设时长的情况下，切换至焦点展示区域的下一图片进行展示，可以避免第一视频未起播对焦点展示区域的切换造成影响，保证焦点展示区域的自动切换效果和用户的观看体验。
在示例性的实施例中，焦点展示区域包括若干个切换控件，切换控件用于切换焦点展示区域中的图片且与一张图片对应，网页端进行视频播放的方法还可以包括：在第一视频正在播放的情况下，将当前展示图片对应的切换控件的形式设置为进度条，该进度条用于展示第一视频的播放进度。
切换控件在变为进度条之前的形状可以根据实际需要设置，例如圆点，而为了区分当前展示图片与焦点展示区域的其它图片，当前展示图片对应的切换控件可以为其它形状或不同大小(如相对较大的圆点)。
请参考图4，其为焦点展示区域的示意图。图中左侧框内的为焦点展示区域，箭头所指为切换控件，在第一视频正在播放的情况下，相应的切换控件的形式则会变为进度条形式，从而使用户可以根据进度条确定视频的播放进度。可选地，进度条可以点击，可以拖动，从而使用户可以根据需要控制视频的播放进度。不过，由于焦点展示区域的区域一般不大，观看效果较差，而且在进度条可以操作时，可能会占用客户端300过多的带宽资源，影响当前网页其它元素的显示，因此进度条可以设置为可见但用户不可操作(如点击或拖动等)。
本实施例中，在第一视频正在播放的情况下，将当前展示图片对应的切换控件的形式设置为展示播放进度的进度条，可以使切换控件与视频播放相适应，也使用户可以有效地确定第一视频的播放进度。
在示例性的实施例中，焦点展示区域包括底部(具体如图4中左边白色虚线框所示)，如图5所示，网页端进行视频播放的方法还可以包括步骤S510～步骤S520，其中，步骤S510，获取当前展示图片的色彩；步骤S520，在当前展示图片无对应视频的情况下，根据当前展示图片的色彩设置底部的色彩，否则将底部的色彩设置为预设色彩。
例如，若当前展示图片的色彩为蓝色，当前展示图片无对应视频，则将底部的色彩也设置为蓝色，从而使底部与图片的显示更为融洽；又例如，若当前展示图片的色彩为绿色，但当前展示图片有对应视频，而预设色彩为黑色，则将底部的色彩设置为黑色。
在获取当前展示图片的色彩时，可以是获取当前展示图片的主色调或背景色等，具体可以根据实际需要设置。另外，由于视频播放时，底部色彩为黑色会使视频显示更加自然，因此预设色彩优选为黑色，当然也可以为其它色彩，此处不做限制。
可选地，由于在当前展示图片对应有视频的情况下，当前展示图片会先展示一定时间再切换至视频进行播放，因此也可以将底部的色彩先设置为当前展示图片的色彩，在视频开始播放时再设置为预设色彩；然而，这样会使底部存在色彩的变换，容易使用户注意力分散，难以集中在图片和视频上，因此在当前展示图片对应有视频的情况下，底部直接设置为预设色彩更好。
另外，可以理解的是，由于焦点展示区域中包括多张图片，因此当焦点展示区域切换图片时，底部的色彩会根据图片或有无对应视频的不同而不同。
本实施例中，通过获取当前展示图片的色彩，在当前展示图片无对应视频的情况下，根据当前展示图片的色彩设置底部的色彩，否则将底部的色彩设置为预设色彩，可以提高焦点展示区域的视觉效果和用户的体验；另外，焦点展示区域包括底部，底部也可以根据需要设置相应的大小，从而使焦点展示区域的整体与网页其它元素实现对齐等效果，提高网页整体的美观度。
在示例性的实施例中，如图6所示，网页端进行视频播放的方法还可以包括步骤S610～步骤S620，其中，步骤S610，在焦点展示区域在可视区域外且第一视频正在播放的情况下，暂停第一视频的播放；步骤S620，在焦点展示区域中的至少部分重新进入可视区域的情况下，继续第一视频的播放。
焦点展示区域在可视区域外可能由以下几种原因导致：用户向下滑动当前页面、当前页面被最小化或用户转到另外一个网页标签等。相应地，焦点展示区域重新进入可视区域则可能由以下几种原因导致：用户向上滑动当前页面、当前页面被重新最大化或用户回到当前网页标签等。
本实施例中，在焦点展示区域在可视区域外且第一视频正在播放的情况下，暂停第一视频的播放；在焦点展示区域中的至少部分重新进入可视区域的情况下，继续第一视频的播放，可以保证用户观看焦点展示区域中的视频的连贯性，提高用户体验。
在示例性的实施例中，如图7所示，步骤S420中，在焦点展示区域中播放第一视频，可以包括步骤S421～步骤S422，其中，步骤S421，获取第一视频对应的弹幕；步骤S422，在焦点展示区域中播放第一视频，并展示与第一视频对应的弹幕。
在获取第一视频对应的弹幕时，可以根据图片的标识获取，例如可以是：客户端300根据图片的标识从服务端100获取相应的视频时，同时获取视频对应的弹幕。
弹幕的类型可以包括滚动弹幕、指令弹幕、高级弹幕等。由于焦点展示区域为当前网页中的其中一部分，特殊样式弹幕可能会占用较多的带宽资源，因此为了使当前页面的显示更加稳定，可以只接入普通的滚动弹幕。另外，弹幕的样式：弹幕屏占比、弹幕滚动速度、弹展展示大小、弹幕透明度等参数可以根据实际需要设置，此处不做具体限制。
本实施例中，通过获取第一视频对应的弹幕，在焦点展示区域中播放第一视频，并展示与第一视频对应的弹幕，可以在使用户在焦点展示区域中也能观看到相应的弹幕，满足用户观看弹幕的需求。
在示例性的实施例中，步骤S420还可以包括：在第一视频正在播放的情况下，在焦点展示区域中显示用于控制第一视频声音的开关。
示例性地，在第一视频播放结束或用户点击切换焦点展示区域时，隐藏音量开关。由于用户在打开焦点展示区域对应的网页时，可能并不准备观看焦点展示区域的内容，因此开关可以默认设置为关闭，在接收到用户的点击操作后再打开开关。而在打开开关时，客户端300可以获取当前系统对应的音量，将对应的音量设置为焦点展示区域对应的音量，从而使焦点展示区域中的视频音量大小继承系统的音量大小。可选地，开关可以分别控制对应的视频声音，也可以是统一控制焦点展示区域中所有视频的声音，具体可以根据实际需要设置，此处不做限制。
本实施例中，在第一视频正在播放的情况下，在焦点展示区域中显示用于控制第一视频声音的开关，可以使用户根据需要控制焦点展示区域中播放视频的声音及音量。
实施例二
图8示意性示出了根据本申请实施例二的网页端进行视频播放的装置700的框图，该网页端进行视频播放的装置700可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
如图8所示，该网页端包括焦点展示区域，焦点展示区域包括若干张轮换展示的图片，至少一张图片对应有视频，该网页端进行视频播放的装置700可以包括：获取模块710、播放模块720和切换模块730。
获取模块710，用于在当前展示图片对应有第一视频的情况下，获取第一视频；
播放模块720，用于在当前展示图片的展示时长达到第一预设时长的情况下，在焦点展示区域中播放第一视频；
切换模块730，用于在达到预设切换条件的情况下，切换至焦点展示区域的另一图片进行展示。
在示例性的实施例中，获取模块710还用于：获取与当前展示图片对应的标识；从服务端中获取与标识对应的视频作为第一视频。
在示例性的实施例中，切换模块730还用于：在第一视频在预设时间内未起播，且当前展示图片的展示时长达到第二预设时长的情况下，切换至焦点展示区域的下一图片进行展示。
在示例性的实施例中，焦点展示区域包括若干个切换控件，切换控件用于切换焦点展示区域中的图片且与一张图片对应，网页端进行视频播放的装置700还包括变换模块(图中未示出)，变换模块用于：在第一视频正在播放的情况下，将当前展示图片对应的切换控件的形式设置为进度条，进度条用于展示第一视频的播放进度。
在示例性的实施例中，焦点展示区域还包括底部，网页端进行视频播放的装置700还可以包括吸色模块(图中未示出)，其中，吸色模块用于：获取当前展示图片的色彩；在当前展示图片无对应视频的情况下，根据当前展示图片的色彩设置底部的色彩，否则将底部的色彩设置为预设色彩。
在示例性的实施例中，网页端进行视频播放的装置700还包括控制模块(图中未示出)，控制模块用于：在焦点展示区域在可视区域外且第一视频正在播放的情况下，暂停第一视频的播放；在焦点展示区域中的至少部分重新进入可视区域的情况下，继续第一视频的播放。
在示例性的实施例中，播放模块720还用于：获取第一视频对应的弹幕；在焦点展示区域中播放第一视频，并展示与第一视频对应的弹幕。
在示例性的实施例中，播放模块720还用于：在第一视频正在播放的情况下，在焦点展示区域中显示用于控制第一视频声音的开关。
实施例三
图9示意性示出了根据本申请实施例三的适于网页端进行视频播放的方法的计算机设备800的硬件架构图。计算机设备800可以是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或数据处理的设备。例如，可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)、网关等。如图9所示，计算机设备800至少包括但不限于：可通过系统总线相互通信链接存储器810、处理器820、网络接口830。其中：
存储器810至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器810可以是计算机设备800的内部存储模块，例如该计算机设备800的硬盘或内存。在另一些实施例中，存储器810也可以是计算机设备800的外部存储设备，例如该计算机设备800上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器810还可以既包括计算机设备800的内部存储模块也包括其外部存储设备。本实施例中，存储器810通常用于存储安装于计算机设备800的操作系统和各类应用软件，例如网页端进行视频播放的方法的程序代码等。此外，存储器810还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器820在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器820通常用于控制计算机设备800的总体操作，例如执行与计算机设备800进行数据交互或者通信相关的控制和处理等。本实施例中，处理器820用于运行存储器810中存储的程序代码或者处理数据。
网络接口830可包括无线网络接口或有线网络接口，该网络接口830通常用于在计算机设备800与其他计算机设备之间建立通信链接。例如，网络接口830用于通过网络将计算机设备800与外部终端相连，在计算机设备800与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通信系统(Global System of Mobile communication，简称为GSM)、宽带码分多址(Wideband CodeDivision Multiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图9仅示出了具有部件810-830的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器810中的网页端进行视频播放的方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器820)所执行，以完成本申请实施例。
实施例四
本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的网页端进行视频播放的方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中网页端进行视频播放的方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (11)

1.一种网页端进行视频播放的方法，其特征在于，所述网页端包括焦点展示区域，所述焦点展示区域包括若干张轮换展示的图片，至少一张所述图片对应有视频，所述方法包括：
在当前展示图片对应有第一视频的情况下，获取所述第一视频；
在所述当前展示图片的展示时长达到第一预设时长的情况下，在所述焦点展示区域中播放所述第一视频；
在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示。
2.根据权利要求1所述的网页端进行视频播放的方法，其特征在于，所述获取所述第一视频，包括：
获取与所述当前展示图片对应的标识；
从服务端中获取与所述标识对应的视频作为所述第一视频。
3.根据权利要求1所述的网页端进行视频播放的方法，其特征在于，所述在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示，包括：
在所述第一视频在预设时间内未起播，且所述当前展示图片的展示时长达到第二预设时长的情况下，切换至所述焦点展示区域的下一图片进行展示。
4.根据权利要求1所述的网页端进行视频播放的方法，其特征在于，所述焦点展示区域包括若干个切换控件，所述切换控件用于切换所述图片且与一张所述图片对应，所述方法还包括：
在所述第一视频正在播放的情况下，将所述当前展示图片对应的切换控件的形式设置为进度条，所述进度条用于展示所述第一视频的播放进度。
5.根据权利要求4所述的网页端进行视频播放的方法，其特征在于，所述焦点展示区域还包括底部，所述方法还包括：
获取所述当前展示图片的色彩；
在所述当前展示图片无对应视频的情况下，根据所述当前展示图片的色彩设置所述底部的色彩，否则将所述底部的色彩设置为预设色彩。
6.根据权利要求1-5任一项所述的网页端进行视频播放的方法，其特征在于，还包括：
在所述焦点展示区域在可视区域外且所述第一视频正在播放的情况下，暂停所述第一视频的播放；
在所述焦点展示区域中的至少部分重新进入所述可视区域的情况下，继续所述第一视频的播放。
7.根据权利要求1-5任一项所述的网页端进行视频播放的方法，其特征在于，所述在所述焦点展示区域中播放所述第一视频，包括：
获取所述第一视频对应的弹幕；
在所述焦点展示区域中播放所述第一视频，并展示与所述第一视频对应的弹幕。
8.根据权利要求1-5任一项所述的网页端进行视频播放的方法，其特征在于，所述在所述焦点展示区域中播放所述第一视频，包括：
在所述第一视频正在播放的情况下，在所述焦点展示区域中显示用于控制所述第一视频声音的开关。
9.一种网页端进行视频播放的装置，其特征在于，所述网页端包括焦点展示区域，所述焦点展示区域包括若干张轮换展示的图片，至少一张所述图片对应有视频，所述装置包括：
获取模块，用于在当前展示图片对应有第一视频的情况下，获取所述第一视频；
播放模块，用于在所述当前展示图片的展示时长达到第一预设时长的情况下，在所述焦点展示区域中播放所述第一视频；
切换模块，用于在达到预设切换条件的情况下，切换至所述焦点展示区域的另一图片进行展示。
10.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时用于实现权利要求1至8中任一项所述的网页端进行视频播放的方法的步骤。
11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1至8中任一项所述的网页端进行视频播放的方法的步骤。
CN202210724577.1A 2022-06-23 2022-06-23 网页端进行视频播放的方法及装置 Pending CN115278330A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210724577.1A CN115278330A (zh) 2022-06-23 2022-06-23 网页端进行视频播放的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210724577.1A CN115278330A (zh) 2022-06-23 2022-06-23 网页端进行视频播放的方法及装置

Publications (1)

Publication Number Publication Date
CN115278330A true CN115278330A (zh) 2022-11-01

Family

ID=83761231

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210724577.1A Pending CN115278330A (zh) 2022-06-23 2022-06-23 网页端进行视频播放的方法及装置

Country Status (1)

Country Link
CN (1) CN115278330A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104618788A (zh) * 2014-12-29 2015-05-13 北京奇艺世纪科技有限公司 一种显示视频信息的方法及装置
CN106406898A (zh) * 2016-09-28 2017-02-15 北京金山安全软件有限公司 一种横幅展示方法、装置及电子设备
CN106528161A (zh) * 2016-11-18 2017-03-22 广州爱九游信息技术有限公司 终端设备、页面显示处理装置及方法
CN110300321A (zh) * 2019-07-26 2019-10-01 北京达佳互联信息技术有限公司 一种横幅展示方法及装置
CN113542889A (zh) * 2021-07-09 2021-10-22 珠海云迈网络科技有限公司 列表视频播放方法、装置、计算机设备及其存储介质
CN114210060A (zh) * 2021-12-14 2022-03-22 腾讯科技（深圳）有限公司 横幅卡片的互动方法、装置、设备、介质及程序产品

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104618788A (zh) * 2014-12-29 2015-05-13 北京奇艺世纪科技有限公司 一种显示视频信息的方法及装置
CN106406898A (zh) * 2016-09-28 2017-02-15 北京金山安全软件有限公司 一种横幅展示方法、装置及电子设备
CN106528161A (zh) * 2016-11-18 2017-03-22 广州爱九游信息技术有限公司 终端设备、页面显示处理装置及方法
CN110300321A (zh) * 2019-07-26 2019-10-01 北京达佳互联信息技术有限公司 一种横幅展示方法及装置
CN113542889A (zh) * 2021-07-09 2021-10-22 珠海云迈网络科技有限公司 列表视频播放方法、装置、计算机设备及其存储介质
CN114210060A (zh) * 2021-12-14 2022-03-22 腾讯科技（深圳）有限公司 横幅卡片的互动方法、装置、设备、介质及程序产品

Similar Documents

Publication Publication Date Title
CN109862414B (zh) 一种蒙版弹幕显示方法、装置及服务器
KR20220127887A (ko) 생방송 데이터 표시 방법 및 장치, 디바이스 및 저장 매체
AU2021314277B2 (en) Interaction method and apparatus, and electronic device and computer-readable storage medium
CN111031376B (zh) 基于微信小程序的弹幕处理方法和系统
US20220408144A1 (en) Bullet comment presentation method and system
CN113225607B (zh) 直播间礼物展示的方法与系统
CN110913278B (zh) 视频播放方法、显示终端及存储介质
CN113873272B (zh) 一种控制直播视频的背景图像的方法、装置及存储介质
US11991420B2 (en) Live commenting processing method and system
CN107404662B (zh) 一种直播间内容推广的方法和装置
CN114679628A (zh) 一种弹幕添加方法、装置、电子设备和存储介质
CN113301414B (zh) 界面的生成处理方法、装置、电子设备及计算机存储介质
CN111866403B (zh) 一种视频图形内容处理方法、装置、设备及介质
CN109640148A (zh) 一种通过文本框展示文本内容的方法及装置
CN111506241A (zh) 直播间的特效显示方法、装置、电子设备及计算机介质
CN115278330A (zh) 网页端进行视频播放的方法及装置
CN114257873B (zh) 网络直播场景下的信息推送方法和卡片展示方法
CN114095785B (zh) 视频播放方法、装置及计算机设备
CN111225266B (zh) 用户界面交互方法和系统
CN112667942A (zh) 一种动画生成方法、装置及介质
US20240163521A1 (en) Method and system for displaying information on page
CN111752438B (zh) 一种移动端多触发更新动态标签显示方法
CN114245191B (zh) 一种基于窗口动态信息的分屏社交方法及相关装置
CN113542846B (zh) Ar弹幕显示方法及装置
CN117314527A (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