CN116320584A - 一种网页视频播放方法、装置、电子设备及存储介质 - Google Patents

一种网页视频播放方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN116320584A
CN116320584A CN202310293375.0A CN202310293375A CN116320584A CN 116320584 A CN116320584 A CN 116320584A CN 202310293375 A CN202310293375 A CN 202310293375A CN 116320584 A CN116320584 A CN 116320584A
Authority
CN
China
Prior art keywords
webpage
picture
video
mode
instruction information
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
CN202310293375.0A
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.)
China Construction Bank Corp
CCB Finetech Co Ltd
Original Assignee
China Construction Bank Corp
CCB Finetech 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 China Construction Bank Corp, CCB Finetech Co Ltd filed Critical China Construction Bank Corp
Priority to CN202310293375.0A priority Critical patent/CN116320584A/zh
Publication of CN116320584A publication Critical patent/CN116320584A/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
    • H04N21/4316—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 for displaying supplemental content in a region of the screen, e.g. an advertisement in a separate window
    • 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/41—Structure of client; Structure of client peripherals
    • H04N21/422—Input-only peripherals, i.e. input devices connected to specially adapted client devices, e.g. global positioning system [GPS]
    • H04N21/42204—User interfaces specially adapted for controlling a client device through a remote control device; Remote control devices therefor
    • H04N21/42206—User interfaces specially adapted for controlling a client device through a remote control device; Remote control devices therefor characterized by hardware details
    • H04N21/4221—Dedicated function buttons, e.g. for the control of an EPG, subtitles, aspect ratio, picture-in-picture or teletext
    • 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
    • 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/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00—Details of television systems
    • H04N5/44—Receiver circuitry for the reception of television signals according to analogue transmission standards
    • H04N5/445—Receiver circuitry for the reception of television signals according to analogue transmission standards for displaying additional information
    • H04N5/45—Picture in picture, e.g. displaying simultaneously another television channel in a region of the screen

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Business, Economics & Management (AREA)
  • Marketing (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开一种网页视频播放方法、装置、电子设备及存储介质，该方法包括响应于目标对象触发的打开第一网页操作，呈现第一网页视频，且响应于将第一网页切换至第二网页时，通过画中画模式播放第一网页视频，进一步，监测是否将第二网页切换回第一网页，若是，则通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放。通过上述方法，可以自动恢复第一网页视频的大窗口播放，不需要目标对象手动恢复。

Description

一种网页视频播放方法、装置、电子设备及存储介质
技术领域
本申请涉及信息技术、金融科技和视频播放领域，特别是涉及一种网页视频播放方法、装置、电子设备及存储介质。
背景技术
用户在进行网页浏览时，经常会有在切换当前网页浏览其他内容的同时，也能继续浏览当前网页视频的需求。为了满足上述需求，可以对当前网页视频进行画中画模式播放，其中，画中画是一种视频内容呈现方式，使得用户在浏览当前网页视频或者当前网页其他内容的同时，在当前网页的小窗口上播放另一部视频。
相关技术中，网页视频的画中画模式播放方法主要是，首先，接收网页视频播放器发送的启动画中画的命令，然后，利用层叠样式表(Cascading Style Sheets，CSS)和动态脚本语言(Java Script，JS)在当前页面的底层视频上设定至少一个视频小窗口，使其悬浮在底层视频上面，同时屏蔽该小窗口视频的声音，最后，获取鼠标信息，当鼠标在底层视频和悬浮视频之间移动时，通过CSS和JS实现声音的任意切换；当用户点击悬浮视频时，悬浮视频与底层视频内容相互切换。
在上述过程中，用户启动了网页视频的画中画模式播放后，会始终存在至少一个视频小窗口，在用户切换回当前网页后，想要恢复当前网页视频的大窗口播放时，只能通过手动关闭视频小窗口，而不能自动恢复当前网页视频的大窗口播放，影响用户体验。
发明内容
本申请提供了一种网页视频播放方法、装置及电子设备，可以解决现有网页视频的画中画模式实现方法在切换回当前网页后不能自动恢复当前网页视频的大窗口播放，只能通过在小窗口手动恢复大窗口播放的问题。
第一方面，本申请提供了一种网页视频播放方法，所述方法包括：
响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频；
监测是否将所述第二网页切换回所述第一网页；
若是，则通过触发退出画中画exit picture-in-picture事件，关闭所述画中画模式，并恢复所述第一网页视频的大窗口播放。
通过上述方法，响应于将第一网页切换至第二网页，通过画中画模式播放第一网页视频，且响应于将第二网页切换回第一网页，通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放，从而不需要目标对象手动恢复。
在一种可能的设计中，所述响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频，包括：
响应于将所述第一网页切换至第二网页，查询所述画中画模式是否为启动状态；
若是，则获取所述第一网页视频的节点，其中，所述节点包含所述第一网页视频的位置信息；
根据所述节点，在所述第一网页中确定出所述第一网页视频，并通过所述画中画模式播放所述第一网页视频。
通过上述方法，可以实现第一网页视频的画中画模式播放，使得用户既可以浏览第一网页视频，又可以浏览第二网页的内容。
在一种可能的设计中，在所述查询所述画中画模式是否为启动状态之前，还包括：
获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动；
将所述第一鼠标指令信息的确定结果保存至数据存储模块。
通过上述方法，确定是否启动第一网页视频的画中画模式，并将确定结果保存至数据存储模块，从而响应于将第一网页切换至第二网页，自动从数据存储模块获取确定结果，来选择是否启动第一网页视频的画中画模式。
在一种可能的设计中，所述获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动，包括：
注册网页菜单项，其中，所述菜单项中至少包括启动画中画模式选项和关闭画中画模式选项；
定义所述菜单项对应的监听函数；
在所述第一网页通过所述监听函数获取第一鼠标指令信息，并根据所述第一鼠标指令信息确定是否将所述画中画模式设置为启动。
通过上述方法，注册网页菜单项，以使目标对象可以在第一网页通过点击网页菜单项选择是否启动第一网页视频的画中画模式。
在一种可能的设计中，所述监测是否将所述第二网页切换回所述第一网页，包括：
监测是否接收到所述第一网页对应的页面可见性改变事件visibility change；
若是，则查询所述第一网页对应的页面可见性状态值visibility state；
根据所述visibility state，确定是否将所述第二网页切换回所述第一网页。
通过上述方法，可以监测是否将第二网页切换回第一网页，以使自动恢复第一网页视频的大窗口播放。
在一种可能的设计中，在所述恢复所述第一网页视频的大窗口播放之后，还包括：
生成弹窗，其中，所述弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项；
响应于所述目标对象点击所述弹窗，通过监听函数获取第二鼠标指令信息；
将所述第二鼠标指令信息保存至数据存储模块。
通过上述方法，在将第二网页切换回第一网页，并自动恢复第一网页视频的大窗口播放后，还可以通过弹窗询问目标对象是否需要继续启动第一网页视频的画中画模式。
第二方面，本申请提供了一种网页视频播放装置，所述装置包括：
呈现模块，用于响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
播放模块，用于响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频；
监测模块，用于监测是否将所述第二网页切换回所述第一网页；
恢复模块，用于若监测到将所述第二网页切换回所述第一网页，则通过触发退出画中画exit picture-in-picture事件，关闭所述画中画模式，并恢复所述第一网页视频的大窗口播放。
在一种可能的设计中，所述播放模块具体用于：
响应于将所述第一网页切换至第二网页，查询所述画中画模式是否为启动状态；
若是，则获取所述第一网页视频的节点，其中，所述节点包含所述第一网页视频的位置信息；
根据所述节点，在所述第一网页中确定出所述第一网页视频，并通过所述画中画模式播放所述第一网页视频。
在一种可能的设计中，所述装置还包括：
第一获取模块，用于获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动；
第一保存模块，用于将所述第一鼠标指令信息的确定结果保存至数据存储模块。
在一种可能的设计中，所述获取模块具体用于：
注册网页菜单项，其中，所述菜单项中至少包括启动画中画模式选项和关闭画中画模式选项；
定义所述菜单项对应的监听函数；
在所述第一网页通过所述监听函数获取第一鼠标指令信息，并根据所述第一鼠标指令信息确定是否将所述画中画模式设置为启动。
在一种可能的设计中，所述监测模块具体用于：
监测是否接收到所述第一网页对应的页面可见性改变事件visibility change；
若是，则查询所述第一网页对应的页面可见性状态值visibility state；
根据所述visibility state，确定是否将所述第二网页切换回所述第一网页。
在一种可能的设计中，所述装置还包括：
生成模块，用于生成弹窗，其中，所述弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项；
第二获取模块，用于响应于所述目标对象点击所述弹窗，通过监听函数获取第二鼠标指令信息；
第二保存模块，用于将所述第二鼠标指令信息保存至数据存储模块。
第三方面，本申请提供了一种电子设备，包括：
存储器，用于存放计算机程序；
处理器，用于执行所述存储器上所存放的计算机程序时，实现上述的网页视频播放方法步骤。
第四方面，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述的网页视频播放方法步骤。
第五方面，本申请提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行第一方面中任一项所述的网页视频播放方法。
基于本申请所提供的网页视频播放方法，响应于将第一网页切换至第二网页，通过画中画模式播放第一网页视频，且响应于将第二网页切换回第一网页，通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放，从而不需要目标对象手动恢复。同时，还可以通过弹窗询问目标对象是否需要继续启动第一网页视频的画中画模式。
上述第二方面至第五方面中的各个方面以及各个方面可能达到的技术效果参照上述针对第一方面或者第一方面中的各种可能方案可以达到的技术效果说明，这里不再重复赘述。
附图说明
图1为本申请实施例提供的一种可能的应用场景示意图；
图2为本申请提供的一种网页视频播放方法的流程图；
图3为本申请提供的一种网页视频播放方法的应用场景示意图之一；
图4为本申请提供的一种网页视频播放方法的应用场景示意图之二；
图5为本申请提供的一种网页视频播放装置的结构示意图；
图6为本申请提供的一种电子设备的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚明白，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以按不同于此处的顺序执行所示出或描述的步骤。
本申请的说明书和权利要求书及上述附图中的术语“第一”和“第二”是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的保护。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请中的“多个”可以表示至少两个，例如可以是两个、三个或者更多个，本申请实施例不做限制。
本申请技术方案中，对数据的采集、传播、使用等，均符合国家相关法律法规要求。
在介绍本申请实施例所提供的网页视频播放方法之前，为了便于理解，首先对下面对本申请实施例的技术背景进行详细介绍。
相关技术中，网页视频的画中画模式播放方法主要是，首先，接收网页视频播放器发送的启动画中画的命令，然后，利用层叠样式表(Cascading Style Sheets，CSS)和动态脚本语言(Java Script，JS)在当前页面的底层视频上设定至少一个视频小窗口，使其悬浮在底层视频上面，同时屏蔽该小窗口视频的声音，最后，获取鼠标信息，当鼠标在底层视频和悬浮视频之间移动时，通过CSS和JS实现声音的任意切换；当用户点击悬浮视频时，悬浮视频与底层视频内容相互切换。
在上述过程中，用户启动了网页视频的画中画模式播放后，会始终存在至少一个视频小窗口，在用户切换回当前网页后，想要恢复当前网页视频的大窗口播放时，只能通过手动关闭视频小窗口，而不能自动恢复当前网页视频的大窗口播放，影响用户体验。
为了解决上述问题，本申请实施例提供的一种网页视频播放方法，响应于将第一网页切换至第二网页，通过画中画模式播放第一网页视频，且响应于将第二网页切换回第一网页，通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放，从而不需要目标对象手动恢复。同时，还可以通过弹窗询问目标对象是否需要继续启动第一网页视频的画中画模式。
基于上述技术效果，以下结合说明书附图对本申请的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本申请，并不用于限定本申请，并且在不冲突的情况下，本申请实施例及实施例中的特征可以互相组合。
如图1所示，为本申请实施例提供的一种可能的应用场景示意图，该应用场景包括：浏览器插件101，浏览器102，其中，浏览器插件101通过应用程序编程接口(ApplicationProgramming Interface，API)与浏览器102相连。
示例性的，浏览器插件101，比如，谷歌浏览器插件，用于实现网页视频的画中画模式播放，包括网页菜单注册模块、监听模块及数据存储模块，其中，网页菜单注册模块至少包括启动画中画模式选项和关闭画中画模式选项，以供目标对象选择；监听模块用于监听目标对象的选择；数据存储模块用于存储监听模块的监听结果，从而在浏览器102从第一网页切换至第二网页时，通过从数据存储模块中获取监听结果可以确定是否通过画中画模式播放第一网页视频。
由于浏览器插件101是通过应用程序编程接口API与浏览器102相连的，因此，需要先配置浏览器插件101所使用的API。具体来讲，浏览器插件101在插件根目录下通过元数据-动态脚本语言对象简谱(meta.Java script object notation，meta.json)来配置API，其中meta.json文件中的配置中包括"background.js"和"content_script.js"，"background.js"随着浏览器102的打开而打开，且随着浏览器102的关闭而关闭，因此，在本申请实施例中作为数据存储模块使用；"content_script.js"可以向浏览器102的网页注入脚本和层叠样式表CSS，以便于访问网页的文件对象模型(document object model，dom)节点，dom是一项万维网联盟标准(World Wide Web Consortium，W3C)标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问及更新文档的内容、结构和样式，比如，在网页中，可以认为整个网页为一颗文档树，顶点为超文本标记语言(Hyper Text Mark-upLanguage，HTML)节点，网页中每一个节点都对应一个dom节点，可以通过调用dom提供的API实现网页节点内容的动态更新。
基于上述应用场景，下面将结合参考附图，对本申请实施例所提供的网页视频播放方法进行阐述及说明，如图2所示，为本申请实施例提供的一种网页视频播放方法，具体包括如下步骤：
S201，响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
本申请实施例在合法合规的情况下，响应于目标对象触发的打开浏览器102的第一网页操作，呈现第一网页视频，此时，目标对象可能会有将第一网页切换至第二网页浏览其他内容的同时，也能继续浏览该第一网页视频的需求。
S202，响应于将第一网页切换至第二网页时，通过画中画模式播放第一网页视频；
为了满足上述需求，本申请实施例在合法合规的情况下，通过浏览器插件101提供了一种可自动切换网页视频画中画模式播放方法，具体方法包括：
首先，对于浏览器102的网页来讲，鼠标操作是最为便捷的人机交互方式，因此，为了方便上述目标对象能实时启动或关闭网页视频的画中画模式，可以通过注册网页菜单项来实现，其中，网页菜单项中至少包括启动画中画模式选项和关闭画中画模式选项，以供目标对象选择。具体来讲，由于当浏览器插件101通过API与浏览器102相连时，浏览器102网页会初始化，因此，可以在浏览器102网页初始化时，通过调用浏览器插件101提供的上下文菜单context menu模块来创建网页菜单项，并定义该网页菜单项对应的监听函数clickhandler。从而当目标对象在第一网页点击对应的网页菜单项时，通过click handler获取第一鼠标指令信息，监听目标对象的选择。
然后，根据第一鼠标指令信息确定出目标对象是否将上述第一网页视频的画中画模式设置为启动，并将第一鼠标指令信息的确定结果保存至数据存储模块。具体来讲，当目标对象在第一网页点击对应的网页菜单项，并通过click handler获取第一鼠标指令信息后，根据第一鼠标指令信息确定出第一网页对应的标识符tabid，其中，tabid默认数据格式为：{tabid:true/false，}，true代表目标对象将该第一网页视频的画中画模式设置为启动，false代表目标对象将该第一网页视频的画中画模式设置为关闭，并将第一网页对应的tabid保存至数据存储模块。
紧接着，如图3所示，响应于将第一网页切换至第二网页，从数据存储模块中查询第一鼠标指令信息的确定结果。具体来讲，发送类型为视频-图像设置查询video-picture-setting-query的事件到数据存储模块，当数据存储模块接收到该事件后，确定出第一网页对应的tabid,并将该确定结果通过类型为视频-图像设置结果video-picture-setting-result的事件返回到第一网页的图像缓存器中。进而，浏览器102可以从第一网页的图像缓存器中获取到上述确定结果，来判断目标对象是否将上述第一网页视频的画中画模式设置为启动。
若目标对象没有将上述第一网页视频的画中画模式设置为启动，则直接将第一网页切换至第二网页。若目标对象将上述第一网页视频的画中画模式设置为启动，则查询该第一网页视频的画中画模式是否为启动状态，响应于该第一网页视频的画中画模式为启动状态，保持该状态；响应于该第一网页视频的画中画模式为关闭状态，将该第一网页视频的画中画模式设置为启动状态。
最后，通过第一网页的监听文件查询dom的方式获取该第一网页视频的节点，其中，第一网页视频的节点包含第一网页视频的位置信息，节点是构成网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点，比如，整个网页是一个文档节点，网页中的注释是注释节点，网页中的内容是文本节点，该第一网页视频的节点就属于文本节点。响应于根据上述第一网页视频的节点，在第一网页中确定出该第一网页视频，并通过浏览器102提供的预设方法，比如，通过触发请求画中画request picture-in-picture事件的方法，来实现该第一网页视频的画中画模式播放。
通过上述方法，目标对象可以在第一网页通过点击网页菜单项选择是否启动第一网页视频的画中画模式，并将确定结果保存至数据存储模块，从而在目标对象选择启动第一网页视频的画中画模式，且将第一网页切换至第二网页时，从数据存储模块获取确定结果，实现第一网页视频的画中画模式播放。
S203，监测是否将第二网页切换回第一网页；
本申请实施例在合法合规的情况下，可以通过第一网页监听文档中的页面可见性改变visibility change事件来判断是否将第二网页切换回第一网页或将第一网页切换至第二网页。具体来讲，在将第一网页切换至第二网页或将第二网页切换回第一网页时，都会触发visibility change事件，因此，通过监测是否接收到visibility change事件可以判断是否发生了页面切换事件。
若接收到了visibility change事件，则查询第一网页监听文档中的页面可见性状态值visibility state，并根据该visibility state，确定是否将第一网页切换至第二网页或将第二网页切换回第一网页，其中，visibility state主要包括4种：visible表征第一页面可见，即第一网页在前景标签页中，并且窗口没有最小化；hidden表征第一网页对目标对象不可见，即第一网页处于背景标签页或者处于窗口最小化状态，或者操作系统正处于锁屏状态；prerender表征第一网页正在渲染中，是不可见的；unloaded表征第一网页从内存中卸载清除。因此，当第一网页对应的visibility state从visible变成hidden时，则表征将第一网页切换至了第二网页，当第一网页对应的visibility state从hidden变成visible时，则表征将第二网页切换回了第一网页。
通过上述方法，可以监测是否将第一网页切换至第二网页，以便于实现第一网页视频的画中画模式播放，或是否将第二网页切换回第一网页，以便于实现自动恢复第一网页视频的大窗口播放。
S204，若监测到将第二网页切换回第一网页，则通过触发退出画中画exitpicture-in-picture事件，关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放。
本申请实施例在合法合规的情况下，通过上述方法监测是否将第二网页切换回第一网页，若是，则如图4所示，发送类型为video-picture-setting-query的事件到数据存储模块，当数据存储模块接收到该事件后，确定出第一网页对应的tabid,并将该确定结果通过类型为video-picture-setting-result的事件返回到第一网页的图像缓存器中。进而，浏览器102可以从第一网页的图像缓存器中获取到上述确定结果，并根据该确定结果判断目标对象是否将上述第一网页视频的画中画模式设置为启动。
若目标对象没有将上述第一网页视频的画中画模式设置为启动，则直接切换回第一网页。若目标对象将上述第一网页视频的画中画模式设置为启动，则通过第一网页监听文档中的画中画组件picture-in-picture element来确定该第一网页视频的画中画模式是否为启动状态，响应于该第一网页视频的画中画模式为关闭状态，保持该状态；响应于该第一网页视频的画中画模式为启动状态，通过触发第一网页监听文档中的退出画中画exitpicture-in-picture事件，关闭该第一网页视频的画中画模式，并恢复该第一网页视频的大窗口播放。
进一步，在恢复上述第一网页视频的大窗口播放后，还可以在第一网页生成弹窗，通过弹窗来询问目标对象是否继续启动该第一网页视频的画中画模式，如图4所示，其中，弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项。具体来讲：
通过第一网页监听文档中的创建组件create element在第一网页插入dom节点，从而通过该dom节点在第一网页生成弹窗，并通过弹窗询问目标对象是否需要继续启动该第一网页视频的画中画模式。进而，响应于目标对象点击弹窗，通过监听函数clickhandler获取第二鼠标指令信息，并将第二鼠标指令信息保存至数据存储模块。
示例性的，当目标对象点击弹窗中的启动画中画模式选项时，发送类型为视频-图像背景设置video-picture-setting-set的事件到数据存储模块中，更新第一网页对应的标识符tabid为true；当目标对象点击弹窗中的关闭画中画模式选项时，发送类型为video-picture-setting-set的事件到数据存储模块中，更新第一网页对应的标识符tabid为false。
基于上述网页视频播放方法，响应于将第一网页切换至第二网页，通过画中画模式播放第一网页视频，且响应于将第二网页切换回第一网页，通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放，从而不需要目标对象手动恢复。同时，还可以通过弹窗询问目标对象是否需要继续启动第一网页视频的画中画模式。
基于同一发明构思，本申请实施例中还提供了一种网页视频播放装置，如图5所示，为本申请中一种网页视频播放装置的结构示意图，该装置包括：
呈现模块501，用于响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
播放模块502，用于响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频；
监测模块503，用于监测是否将所述第二网页切换回所述第一网页；
恢复模块504，用于若监测到将所述第二网页切换回所述第一网页，则通过触发退出画中画exit picture-in-picture事件，关闭所述画中画模式，并恢复所述第一网页视频的大窗口播放。
在一种可能的设计中，所述播放模块502具体用于：
响应于将所述第一网页切换至第二网页，查询所述画中画模式是否为启动状态；
若是，则获取所述第一网页视频的节点，其中，所述节点包含所述第一网页视频的位置信息；
根据所述节点，在所述第一网页中确定出所述第一网页视频，并通过所述画中画模式播放所述第一网页视频。
在一种可能的设计中，所述装置还包括：
第一获取模块，用于获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动；
第一保存模块，用于将所述第一鼠标指令信息的确定结果保存至数据存储模块。
在一种可能的设计中，所述获取模块具体用于：
注册网页菜单项，其中，所述菜单项中至少包括启动画中画模式选项和关闭画中画模式选项；
定义所述菜单项对应的监听函数；
在所述第一网页通过所述监听函数获取第一鼠标指令信息，并根据所述第一鼠标指令信息确定是否将所述画中画模式设置为启动。
在一种可能的设计中，所述监测模块503具体用于：
监测是否接收到所述第一网页对应的页面可见性改变事件visibility change；
若是，则查询所述第一网页对应的页面可见性状态值visibility state；
根据所述visibility state，确定是否将所述第二网页切换回所述第一网页。
在一种可能的设计中，所述装置还包括：
生成模块，用于生成弹窗，其中，所述弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项；
第二获取模块，用于响应于所述目标对象点击所述弹窗，通过监听函数获取第二鼠标指令信息；
第二保存模块，用于将所述第二鼠标指令信息保存至数据存储模块。
基于上述网页视频播放装置，响应于将第一网页切换至第二网页，通过画中画模式播放第一网页视频，且响应于将第二网页切换回第一网页，通过退出画中画事件自动关闭第一网页视频的画中画模式，并恢复第一网页视频的大窗口播放，从而不需要目标对象手动恢复。同时，还可以通过弹窗询问目标对象是否需要继续启动第一网页视频的画中画模式。
基于同一发明构思，本申请实施例中还提供了一种电子设备，所述电子设备可以实现前述网页视频播放装置的功能，参考图6，所述电子设备包括：
至少一个处理器601，以及与至少一个处理器601连接的存储器602，本申请实施例中不限定处理器601与存储器602之间的具体连接介质，图6中是以处理器601和存储器602之间通过总线600连接为例。总线600在图6中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。总线600可以分为地址总线、数据总线、控制总线等，为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。或者，处理器601也可以称为控制器，对于名称不做限制。
在本申请实施例中，存储器602存储有可被至少一个处理器601执行的指令，至少一个处理器601通过执行存储器602存储的指令，可以执行前文论述的网页视频播放方法。处理器601可以实现图5所示的装置中各个模块的功能。
其中，处理器601是该装置的控制中心，可以利用各种接口和线路连接整个该控制设备的各个部分，通过运行或执行存储在存储器602内的指令以及调用存储在存储器602内的数据，该装置的各种功能和处理数据，从而对该装置进行整体监控。
在一种可能的设计中，处理器601可包括一个或多个处理单元，处理器601可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器601中。在一些实施例中，处理器601和存储器602可以在同一芯片上实现，在一些实施例中，它们也可以在独立的芯片上分别实现。
处理器601可以是通用处理器，例如中央处理器(CPU)、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本申请实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的网页视频播放方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
存储器602作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块。存储器602可以包括至少一种类型的存储介质，例如可以包括闪存、硬盘、多媒体卡、卡型存储器、随机访问存储器(Random AccessMemory，RAM)、静态随机访问存储器(Static Random Access Memory，SRAM)、可编程只读存储器(Programmable Read Only Memory，PROM)、只读存储器(Read Only Memory，ROM)、带电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、磁性存储器、磁盘、光盘等。存储器602是能够用于对应或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。本申请实施例中的存储器602还可以是电路或者其它任意能够实现存储功能的装置，用于存储程序指令和/或数据。
通过对处理器601进行设计编程，可以将前述实施例中介绍的网页视频播放方法所对应的代码固化到芯片内，从而使芯片在运行时能够执行图2所示的实施例的网页视频播放方法的步骤。如何对处理器601进行设计编程为本领域技术人员所公知的技术，这里不再赘述。
基于同一发明构思，本申请实施例提供一种计算机可读存储介质，计算机程序产品包括：计算机程序代码，当计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的网页视频播放方法。由于上述计算机可读存储介质解决问题的原理与网页视频播放方法相似，因此上述计算机可读存储介质的实施可以参见方法的实施，重复之处不再赘述。
基于同一发明构思，本申请实施例还提供了一种计算机程序产品，该计算机程序产品包括：计算机程序代码，当该计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的网页视频播放方法。由于上述计算机程序产品解决问题的原理与网页视频播放方法相似，因此上述计算机程序产品的实施可以参见方法的实施，重复之处不再赘述。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列用户操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (15)

1.一种网页视频播放方法，其特征在于，所述方法包括：
响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频；
监测是否将所述第二网页切换回所述第一网页；
若是，则通过触发退出画中画exit picture-in-picture事件，关闭所述画中画模式，并恢复所述第一网页视频的大窗口播放。
2.如权利要求1所述的方法，其特征在于，所述响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频，包括：
响应于将所述第一网页切换至第二网页，查询所述画中画模式是否为启动状态；
若是，则获取所述第一网页视频的节点，其中，所述节点包含所述第一网页视频的位置信息；
根据所述节点，在所述第一网页中确定出所述第一网页视频，并通过所述画中画模式播放所述第一网页视频。
3.如权利要求2所述的方法，其特征在于，在所述查询所述画中画模式是否为启动状态之前，还包括：
获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动；
将所述第一鼠标指令信息的确定结果保存至数据存储模块。
4.如权利要求3所述的方法，其特征在于，所述获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动，包括：
注册网页菜单项，其中，所述菜单项中至少包括启动画中画模式选项和关闭画中画模式选项；
定义所述菜单项对应的监听函数；
在所述第一网页通过所述监听函数获取第一鼠标指令信息，并根据所述第一鼠标指令信息确定是否将所述画中画模式设置为启动。
5.如权利要求1所述的方法，其特征在于，所述监测是否将所述第二网页切换回所述第一网页，包括：
监测是否接收到所述第一网页对应的页面可见性改变事件visibility change；
若是，则查询所述第一网页对应的页面可见性状态值visibility state；
根据所述visibility state，确定是否将所述第二网页切换回所述第一网页。
6.如权利要求1所述的方法，其特征在于，在所述恢复所述第一网页视频的大窗口播放之后，还包括：
生成弹窗，其中，所述弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项；
响应于所述目标对象点击所述弹窗，通过监听函数获取第二鼠标指令信息；
将所述第二鼠标指令信息保存至数据存储模块。
7.一种网页视频播放装置，其特征在于，所述装置包括：
呈现模块，用于响应于目标对象触发的打开第一网页操作，呈现第一网页视频；
播放模块，用于响应于将所述第一网页切换至第二网页，通过画中画模式播放所述第一网页视频；
监测模块，用于监测是否将所述第二网页切换回所述第一网页；
恢复模块，用于若监测到将所述第二网页切换回所述第一网页，则通过触发退出画中画exit picture-in-picture事件，关闭所述画中画模式，并恢复所述第一网页视频的大窗口播放。
8.如权利要求7所述的装置，其特征在于，所述播放模块具体用于：
响应于将所述第一网页切换至第二网页，查询所述画中画模式是否为启动状态；
若是，则获取所述第一网页视频的节点，其中，所述节点包含所述第一网页视频的位置信息；
根据所述节点，在所述第一网页中确定出所述第一网页视频，并通过所述画中画模式播放所述第一网页视频。
9.如权利要求8所述的装置，其特征在于，所述装置还包括：
第一获取模块，用于获取第一鼠标指令信息，并根据所述第一鼠标指令信息，确定是否将所述画中画模式设置为启动；
第一保存模块，用于将所述第一鼠标指令信息的确定结果保存至数据存储模块。
10.如权利要求9所述的装置，其特征在于，所述获取模块具体用于：
注册网页菜单项，其中，所述菜单项中至少包括启动画中画模式选项和关闭画中画模式选项；
定义所述菜单项对应的监听函数；
在所述第一网页通过所述监听函数获取第一鼠标指令信息，并根据所述第一鼠标指令信息确定是否将所述画中画模式设置为启动。
11.如权利要求7所述的装置，其特征在于，所述监测模块具体用于：
监测是否接收到所述第一网页对应的页面可见性改变事件visibility change；
若是，则查询所述第一网页对应的页面可见性状态值visibility state；
根据所述visibility state，确定是否将所述第二网页切换回所述第一网页。
12.如权利要求7所述的装置，其特征在于，所述装置还包括：
生成模块，用于生成弹窗，其中，所述弹窗中至少包括继续启动画中画模式选项和关闭画中画模式选项；
第二获取模块，用于响应于所述目标对象点击所述弹窗，通过监听函数获取第二鼠标指令信息；
第二保存模块，用于将所述第二鼠标指令信息保存至数据存储模块。
13.一种电子设备，其特征在于，包括：
存储器，用于存放计算机程序；
处理器，用于执行所述存储器上所存放的计算机程序时，实现权利要求1-6中任一项所述的方法步骤。
14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-6中任一项所述的方法步骤。
15.一种计算机程序产品，其特征在于，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行上述如权利要求1-6中任一项所述的方法。
CN202310293375.0A 2023-03-24 2023-03-24 一种网页视频播放方法、装置、电子设备及存储介质 Pending CN116320584A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310293375.0A CN116320584A (zh) 2023-03-24 2023-03-24 一种网页视频播放方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310293375.0A CN116320584A (zh) 2023-03-24 2023-03-24 一种网页视频播放方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN116320584A true CN116320584A (zh) 2023-06-23

Family

ID=86799336

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310293375.0A Pending CN116320584A (zh) 2023-03-24 2023-03-24 一种网页视频播放方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN116320584A (zh)

Similar Documents

Publication Publication Date Title
US10056113B2 (en) Video processing method and associated electronic device
JP7013466B2 (ja) アプリケーションデータ処理方法、装置、及びコンピュータプログラム
US20220385952A1 (en) Method and apparatus for displaying live broadcast data, and device and storage medium
CN108304234B (zh) 一种页面展示方法及装置
US20170366832A1 (en) Video reproduction apparatus, control method thereof, and computer-readable storage medium storing program
CN108959495B (zh) H5网页的页面显示方法、装置、设备和计算机存储介质
US11941728B2 (en) Previewing method and apparatus for effect application, and device, and storage medium
CN101493837A (zh) 多页面浏览器中的网络视频的播放方法及处理装置
CN113507646B (zh) 一种显示设备及浏览器多标签页媒资播放方法
CN106155507A (zh) 一种页面内容显示方法及电子设备
CN115309516A (zh) 一种应用生命周期的检测方法、装置及计算机设备
CN103514924A (zh) 移动终端微件Widget内播放视频的方法、装置及播放器
CN105828167A (zh) 截屏分享方法及装置
CN108345683B (zh) 网页显示方法、装置、终端及存储介质
CN101515288B (zh) 多页面浏览器中的网络视频的播放方法及处理装置
CN109819329B (zh) 一种窗口显示方法及智能电视
CN109213534A (zh) 一种扩展直播软件功能的方法及装置
CN108415746B (zh) 应用界面的显示方法、装置、存储介质及电子设备
CN104102536A (zh) 一种数据的展示方法和系统
CN116320584A (zh) 一种网页视频播放方法、装置、电子设备及存储介质
CN113282268B (zh) 音效配置方法和装置、存储介质及电子设备
CN113867601A (zh) 轮播方法、电子设备和存储介质
CN110633117B (zh) 一种数据处理方法、装置、电子设备和可读介质
CN112307383A (zh) 一种页面加载方法及装置
CN113378096B (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