CN113497967B - 基于浏览器的视频帧切换方法、装置和存储介质 - Google Patents

基于浏览器的视频帧切换方法、装置和存储介质 Download PDF

Info

Publication number
CN113497967B
CN113497967B CN202110577298.2A CN202110577298A CN113497967B CN 113497967 B CN113497967 B CN 113497967B CN 202110577298 A CN202110577298 A CN 202110577298A CN 113497967 B CN113497967 B CN 113497967B
Authority
CN
China
Prior art keywords
component
video
browser
frame data
video frame
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.)
Active
Application number
CN202110577298.2A
Other languages
English (en)
Other versions
CN113497967A (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.)
Zhejiang Dahua Technology Co Ltd
Original Assignee
Zhejiang Dahua 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 Zhejiang Dahua Technology Co Ltd filed Critical Zhejiang Dahua Technology Co Ltd
Priority to CN202110577298.2A priority Critical patent/CN113497967B/zh
Publication of CN113497967A publication Critical patent/CN113497967A/zh
Application granted granted Critical
Publication of CN113497967B publication Critical patent/CN113497967B/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/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
    • H04N21/4333—Processing operations in response to a pause request
    • 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/442—Monitoring of processes or resources, e.g. detecting the failure of a recording device, monitoring the downstream bandwidth, the number of times a movie has been viewed, the storage space available from the internal hard disk
    • H04N21/44213—Monitoring of end-user related data
    • H04N21/44222—Analytics of user selections, e.g. selection of programs or purchase activity
    • 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/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • 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/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173—End-user applications, e.g. Web browser, game

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • General Health & Medical Sciences (AREA)
  • Social Psychology (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Databases & Information Systems (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请涉及基于浏览器的视频帧切换方法、装置和存储介质，基于浏览器的视频帧切换方法包括：接收上下帧切换请求，根据上下帧切换请求获取相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问；由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量；通过本申请，解决相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题。

Description

基于浏览器的视频帧切换方法、装置和存储介质
技术领域
本申请涉及视频播放领域，特别是涉及基于浏览器的视频帧切换方法、装置和存储介质。
背景技术
相关技术中，在使用浏览器播放视频时，通常采用对设备性能依赖较小的浏览器播放方式，例如，video组件是常规的浏览器播放方式。常规的浏览器播放方式会在内部解析视频流，但是通过对设备性能依赖较小的常规的浏览器播放方式无法访问到视频中具体的某一帧数据，进而在对设备性能依赖较小的情况下浏览器无法为用户提供定位到具体帧画面的功能也就是上下帧切换的功能。
针对相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题，目前还没有提出有效的解决方案。
发明内容
在本实施例中提供了一种基于浏览器的视频帧切换方法、装置和存储介质，以解决相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题。
第一个方面，在本实施例中提供了一种基于浏览器的视频帧切换方法，所述方法包括：
接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据；其中，所述视频帧数据是通过第二组件从视频流中拉取的，所述第二组件能够对所述视频流中的任何一帧数据进行访问；
由第一浏览器播放状态切换为第二浏览器播放状态，其中，所述第一浏览器播放状态为由所述第一组件播放所述视频流的浏览器播放状态，所述第二浏览器播放状态为由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据的浏览器播放状态，所述第一组件播放视频所消耗的内存量小于所述第二组件播放视频所消耗的内存量。
在其中的一些实施例中，由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据包括：
将与所述上下帧切换请求相对应的视频帧数据绘制于所述第二组件的画布中，通过所述第二组件的画布播放与所述上下帧切换请求相对应的视频帧数据。
在其中的一些实施例中，由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据还包括：
将所述第一组件的画布移出浏览器的可视区域。
在其中的一些实施例中，在所述第一浏览器播放状态下，所述第一组件的画布覆盖所述第二组件的画布。
在其中的一些实施例中，接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据包括：接收上下帧切换请求，根据所述上下帧切换请求从所述第二组件的存储区域中获取与所述上下帧切换请求相对应的视频帧数据；
所述方法还包括：接收暂停请求，响应于所述暂停请求触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中。
在其中的一些实施例中，响应于所述暂停请求触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中包括：
响应于所述暂停请求判断所述第二组件的存储区域中是否存储有与所述暂停请求的时刻相对应的视频帧数据；
若所述第二组件的存储区域中未存储有与所述暂停请求的时刻相对应的视频帧数据，触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中。
在其中的一些实施例中，所述方法还包括：
在接收到播放请求下，触发所述第一组件创建画布以及所述第二组件创建画布，并建立所述第一组件与所述视频流的连接以及所述第二组件与所述视频流的连接；其中，在所述第一组件与所述视频流建立连接下，所述第一组件能够播放所述视频流，在所述第二组件与所述视频流建立连接下，所述第二组件能够播放所述视频流；
暂停所述第二组件播放所述视频流，并开启由所述第一组件播放所述视频流的第一浏览器播放状态。
在其中的一些实施例中，所述浏览器采用HTML5技术。
在其中的一些实施例中，所述第一组件为video组件，所述第二组件为canvas组件。
第二个方面，在本实施例中提供了一种基于浏览器的视频帧切换装置，所述装置包括：获取模块和切换模块；
所述获取模块，用于接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据；其中，所述视频帧数据是通过第二组件从视频流中拉取的，所述第二组件能够对所述视频流中的任何一帧数据进行访问；
所述切换模块，用于由第一浏览器播放状态切换为第二浏览器播放状态，其中，所述第一浏览器播放状态为由所述第一组件播放所述视频流的浏览器播放状态，所述第二浏览器播放状态为由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据的浏览器播放状态，所述第一组件播放视频所消耗的内存量小于所述第二组件播放视频所消耗的内存量。
第三个方面，在本实施例中提供了一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一个方面所述的基于浏览器的视频帧切换方法。
第四个方面，在本实施例中提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一个方面所述的基于浏览器的视频帧切换方法。
与相关技术相比，在本实施例中提供的基于浏览器的视频帧切换方法、装置和存储介质，通过接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据；其中，所述视频帧数据是通过第二组件从视频流中拉取的，所述第二组件能够对所述视频流中的任何一帧数据进行访问；由第一浏览器播放状态切换为第二浏览器播放状态，其中，所述第一浏览器播放状态为由所述第一组件播放所述视频流的浏览器播放状态，所述第二浏览器播放状态为由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据的浏览器播放状态，所述第一组件播放视频所消耗的内存量小于所述第二组件播放视频所消耗的内存量，解决了相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题。
本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是本实施例的基于浏览器的视频帧切换方法的终端的硬件结构框图；
图2是本实施例的基于浏览器的视频帧切换方法的流程图一；
图3是本实施例的基于浏览器的视频帧切换方法的流程图二；
图4是本实施例的基于浏览器的视频帧切换方法的流程图三；
图5是本实施例的基于浏览器的视频帧切换装置的结构框图。
具体实施方式
为更清楚地理解本申请的目的、技术方案和优点，下面结合附图和实施例，对本申请进行了描述和说明。
除另作定义外，本申请所涉及的技术术语或者科学术语应具有本申请所属技术领域具备一般技能的人所理解的一般含义。在本申请中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制，它们可以是单数或者复数。在本申请中所涉及的术语“包括”、“包含”、“具有”及其任何变体，其目的是涵盖不排他的包含；例如，包含一系列步骤或模块(单元)的过程、方法和***、产品或设备并未限定于列出的步骤或模块(单元)，而可包括未列出的步骤或模块(单元)，或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本申请中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接，而可以包括电气连接，无论是直接连接还是间接连接。在本申请中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。通常情况下，字符“/”表示前后关联的对象是一种“或”的关系。在本申请中所涉及的术语“第一”、“第二”、“第三”等，只是对相似对象进行区分，并不代表针对对象的特定排序。
在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行，图1是本实施例的基于浏览器的视频帧切换方法的终端的硬件结构框图。如图1所示，终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104，其中，处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述终端的结构造成限制。例如，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示出的不同配置。
存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如在本实施例中的基于浏览器的视频帧切换方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(NetworkInterface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。
相关技术中，在使用浏览器播放视频时通常采用对设备性能依赖较小的浏览器播放方式，例如，video组件是常规的浏览器播放方式。常规的浏览器播放方式会在内部解析视频流，但是通过对设备性能依赖较小的常规的浏览器播放方式无法访问到视频中具体的某一帧数据，进而在对设备性能依赖较小的情况下浏览器无法为用户提供定位到具体帧画面的功能也就是上下帧切换的功能。本申请通过能够对视频流中的任何一帧数据进行访问的第二组件拉取与上下帧切换请求相对应的视频帧数据，并在第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量下，将由第一组件播放视频流的浏览器播放状态切换为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，进而解决了相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题。
在本实施例中提供了一种基于浏览器的视频帧切换方法，图2是本实施例的基于浏览器的视频帧切换方法的流程图一，如图2所示，该方法包括如下步骤：
步骤S201，接收上下帧切换请求，根据上下帧切换请求获取相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问；
需要说明的是，视频流是用户通过浏览器进行观看的视频数据的传输流，该视频流可以是存储在本地的，也可以是响应于用户的观看请求实时从远端服务器进行获取的；
步骤S202，由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量；
具体地，在接收到基于浏览器的视频播放请求下，由播放视频所消耗的内存量小的第一组件进行播放视频；若在接收到基于浏览器的上下帧切换请求下，由第二组件获取与上下帧切换请求相对应的视频帧数据，并由第二组件播放与上下帧切换请求相对应的视频帧数据，也就是将由第一组件播放视频流的浏览器播放状态切换为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态。
通过上述步骤S201至步骤S202，在接收到用户的上下帧切换请求下，通过能够对视频流中的任何一帧数据进行访问的第二组件，进行拉取与上下帧切换请求相对应的视频帧数据，并由第二组件播放与上下帧切换请求相对应的视频帧数据；除了在用户的上下帧切换请求外，浏览器播放视频流时均是由小于第二组件播放视频所消耗的内存量的第一组件进行播放，进而在客户不同的播放需求下在第一组件和第二组件之间进行切换，实现了在满足用户基于浏览器的视频帧切换下降低对设备性能的依赖，使得用户无需配备高性能计算机即可实现上下帧切换，解决了相关技术中在对设备性能依赖较小的情况下浏览器无法实现视频上下帧切换的问题。
在其中一些实施例中，浏览器采用HTML5技术。需要说明的是，相关技术中，插件是通常由第三方创建的软件，并被用于在网页上显示不能由浏览器显示的各种类型的文件或者将不能由浏览器执行的各种功能添加到浏览器。插件能够扩展浏览器的性能；但在本申请实施例中，浏览器采用HTML5技术，使得浏览器在没有插件的情况下能够对视频流的上下帧进行切换。
在其中一些实施例中，第一组件为video组件，第二组件为canvas组件；其中，video组件是HTML5技术规范下新增加，用于支持在网页文档中播放视频。在HTML5技术出现之前，标准网页文档是不支持视频播放的。大多数网页文档中的视频是通过插件(例如Flash)来播放的，所有的浏览器都必须安装插件才能播放网页中的视频，在没安装插件的浏览器上不能播放网页中的视频。
在其中一些实施例中，由第二组件播放与上下帧切换请求相对应的视频帧数据包括：将与上下帧切换请求相对应的视频帧数据绘制于第二组件的画布中，通过第二组件的画布播放与上下帧切换请求相对应的视频帧数据。其中，由第二组件播放与上下帧切换请求相对应的视频帧数据还包括：将第一组件的画布移出浏览器的可视区域；在第一浏览器播放状态下，第一组件的画布覆盖第二组件的画布。
在其中的一些实施例中，图3是本实施例的基于浏览器的视频帧切换方法的流程图二，如图3所示，该方法包括如下步骤：
步骤S301，接收暂停请求，响应于暂停请求触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于第二组件的存储区域中；
步骤S302，接收上下帧切换请求，根据上下帧切换请求从第二组件的存储区域中获取与上下帧切换请求相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问；
具体地，在由第一组件播放视频流的浏览器播放状态下，若接收到用户发出的暂停请求，则响应于暂停请求一方面将第一组件的画布中的视频暂停，另一方面触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，其中，与暂停请求的时刻相对应的视频帧数据可以是从当前暂停时刻的前一秒开始直到暂停时刻的后一秒为止的视频流，响应于暂停请求触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据是为了缓存当前暂停时刻的前后一秒视频数据，为之后切换上下帧做准备，且前后一秒的范围可依据网络环境和内存性能修改，视频一秒的数据通常会包含数十帧，足够频繁的切换上下帧，并将所拉取的与暂停请求的时刻相对应的视频帧数据存储于第二组件的存储区域中；
步骤S303，由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量。
在其中的一些实施例中，响应于暂停请求触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于第二组件的存储区域中包括：
响应于暂停请求判断第二组件的存储区域中是否存储有与暂停请求的时刻相对应的视频帧数据；若第二组件的存储区域中未存储有与暂停请求的时刻相对应的视频帧数据，触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于第二组件的存储区域中；
具体地，可以是响应于暂停请求判断第二组件的存储区域中是否存储有与暂停请求的时刻相对应的视频帧数据，若第二组件的存储区域中未存储有与暂停请求的时刻相对应的视频帧数据，触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于第二组件的存储区域中。在响应于暂停请求判断第二组件的存储区域中是否存储有与暂停请求的时刻相对应的视频帧数据的基础上，也可以响应于上下帧切换请求，例如，每次切换到下一帧的时候，可以判断第二组件的存储区域中的视频帧数据是否包含后一秒的数据，当判断后一秒无数据时，会以当前秒的下一秒为起始继续拉取视频流存于第二组件的存储区域中，如果有数据则不操作；同样的，上一帧切换时判断第二组件的存储区域中的视频帧数据是否包含当前时刻前一秒的视频帧数据，若无数据从当前时刻前一秒开始拉流，如果有数据则不操作。
在其中的一些实施例中，图4是本实施例的基于浏览器的视频帧切换方法的流程图三，如图4所示，该方法包括如下步骤：
步骤S401，在接收到播放请求下，触发第一组件创建画布以及第二组件创建画布，并建立第一组件与视频流的连接以及第二组件与视频流的连接；其中，在第一组件与视频流建立连接下，第一组件能够播放视频流，在第二组件与视频流建立连接下，第二组件能够播放视频流；
具体地，当用户进入浏览器的视频播放页面，会接收到播放请求，触发第一组件和第二组件在相同的位置创建画布，两者画布高度一致，且创建的同时建立第一组件与视频流的连接以及第二组件与视频流的连接；
步骤S402，暂停第二组件播放视频流，并开启由第一组件播放视频流的第一浏览器播放状态；
具体地，可以在第二组件与视频流建立连接并获得视频流的第一帧数据时将该组件的视频暂停，则浏览器播放状态为由与视频流建立连接的第一组件播放视频流；
步骤S403，接收上下帧切换请求，根据上下帧切换请求获取相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问；
步骤S404，由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量。
在其中的一些实施例中，该方法包括如下流程：
在接收到播放请求下，触发第一组件创建画布以及第二组件创建画布，并建立第一组件与视频流的连接以及第二组件与视频流的连接；
在第二组件与视频流建立连接并获得视频流的第一帧数据时将该组件的视频暂停，并开启由第一组件播放视频流的第一浏览器播放状态，且第一组件的画布覆盖于第二组件的画布；
在接收到暂停请求，响应于暂停请求判断第二组件的存储区域中是否存储有与暂停请求的时刻相对应的视频帧数据，并暂停第一组件播放视频流；
若第二组件的存储区域中未存储有与暂停请求的时刻相对应的视频帧数据，触发第二组件从视频流中拉取与暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于第二组件的存储区域中；
若接收到用户恢复播放请求，则恢复第一组件继续播放视频流；
若接收到上下帧切换请求，判断第二组件的存储区域中是否存储有当前时刻前一秒和后一秒的视频帧数据；
若第二组件的存储区域中未存储有当前时刻前一秒和后一秒的视频帧数据，则通过第二组件从视频流中拉取当前时刻前一秒和后一秒的视频帧数据；
若第二组件的存储区域中存储有当前时刻前一秒和后一秒的视频帧数据，则将与上下帧切换请求相对应的视频帧数据绘制于第二组件的画布中，通过第二组件的画布播放与上下帧切换请求相对应的视频帧数据，并将第一组件的画布移出浏览器的可视区域。
需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
在本实施例中还提供了一种基于浏览器的视频帧切换装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。以下所使用的术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
图5是本实施例的基于浏览器的视频帧切换装置的结构框图，如图5所示，该装置包括：获取模块51和切换模块52；
获取模块51，用于接收上下帧切换请求，根据上下帧切换请求获取相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问；
切换模块52，用于由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量。
在一些实施例中，获取模块51和切换模块52还用于实现上述各实施例提供的基于浏览器的视频帧切换中的步骤，在这里不再赘述。
需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。
在本实施例中还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项基于浏览器的视频帧切换方法实施例中的步骤。
可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
接收上下帧切换请求，根据上下帧切换请求获取相对应的视频帧数据；其中，视频帧数据是通过第二组件从视频流中拉取的，第二组件能够对视频流中的任何一帧数据进行访问。
由第一浏览器播放状态切换为第二浏览器播放状态，其中，第一浏览器播放状态为由第一组件播放视频流的浏览器播放状态，第二浏览器播放状态为由第二组件播放与上下帧切换请求相对应的视频帧数据的浏览器播放状态，第一组件播放视频所消耗的内存量小于第二组件播放视频所消耗的内存量。
需要说明的是，在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，在本实施例中不再赘述。
此外，结合上述实施例中提供的基于浏览器的视频帧切换方法，在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种基于浏览器的视频帧切换方法。
应该明白的是，这里描述的具体实施例只是用来解释这个应用，而不是用来对它进行限定。根据本申请提供的实施例，本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例，均属本申请保护范围。
显然，附图只是本申请的一些例子或实施例，对本领域的普通技术人员来说，也可以根据这些附图将本申请适用于其他类似情况，但无需付出创造性劳动。另外，可以理解的是，尽管在此开发过程中所做的工作可能是复杂和漫长的，但是，对于本领域的普通技术人员来说，根据本申请披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段，不应被视为本申请公开的内容不足。
“实施例”一词在本申请中指的是结合实施例描述的具体特征、结构或特性可以包括在本申请的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例，也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是，本申请中描述的实施例在没有冲突的情况下，可以与其它实施例结合。
以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于浏览器的视频帧切换方法，其特征在于，所述方法包括：
接收播放请求，开启由第一组件播放所述视频流的第一浏览器播放状态，触发所述第一组件创建画布以及第二组件创建画布，建立所述第一组件与视频流的连接以及所述第二组件与所述视频流的连接；在所述第二组件与所述视频流建立连接并获得所述视频流的第一帧数据时将所述第二组件的视频暂停，将所述第一组件的画布覆盖于所述第二组件的画布之上；其中，在所述第一组件与所述视频流建立连接下，所述第一组件能够播放所述视频流，在所述第二组件与所述视频流建立连接下，所述第二组件能够播放所述视频流；
接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据；其中，所述视频帧数据是通过所述第二组件从所述视频流中拉取的，所述第二组件能够对所述视频流中的任何一帧数据进行访问；
由所述第一浏览器播放状态切换为第二浏览器播放状态，其中，所述第一浏览器播放状态为由所述第一组件播放所述视频流的浏览器播放状态，所述第二浏览器播放状态为由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据的浏览器播放状态，所述第一组件播放视频所消耗的内存量小于所述第二组件播放视频所消耗的内存量。
2.根据权利要求1所述的基于浏览器的视频帧切换方法，其特征在于，由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据包括：
将与所述上下帧切换请求相对应的视频帧数据绘制于所述第二组件的画布中，通过所述第二组件的画布播放与所述上下帧切换请求相对应的视频帧数据。
3.根据权利要求2所述的基于浏览器的视频帧切换方法，其特征在于，由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据还包括：
将所述第一组件的画布移出浏览器的可视区域。
4.根据权利要求1所述的基于浏览器的视频帧切换方法，其特征在于，接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据包括：接收上下帧切换请求，根据所述上下帧切换请求从所述第二组件的存储区域中获取与所述上下帧切换请求相对应的视频帧数据；
所述方法还包括：接收暂停请求，响应于所述暂停请求触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中。
5.根据权利要求4所述的基于浏览器的视频帧切换方法，其特征在于，响应于所述暂停请求触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中包括：
响应于所述暂停请求判断所述第二组件的存储区域中是否存储有与所述暂停请求的时刻相对应的视频帧数据；
若所述第二组件的存储区域中未存储有与所述暂停请求的时刻相对应的视频帧数据，触发所述第二组件从所述视频流中拉取与所述暂停请求的时刻相对应的视频帧数据，并将所拉取的视频帧数据存储于所述第二组件的存储区域中。
6.根据权利要求1所述的基于浏览器的视频帧切换方法，其特征在于，所述浏览器采用HTML5技术。
7.根据权利要求6所述的基于浏览器的视频帧切换方法，其特征在于，所述第一组件为video组件，所述第二组件为canvas组件。
8.一种基于浏览器的视频帧切换装置，其特征在于，所述装置包括：获取模块和切换模块；
所述获取模块，用于接收上下帧切换请求，根据所述上下帧切换请求获取相对应的视频帧数据；其中，所述视频帧数据是通过第二组件从视频流中拉取的，所述第二组件能够对所述视频流中的任何一帧数据进行访问；
所述切换模块，用于由第一浏览器播放状态切换为第二浏览器播放状态，其中，所述第一浏览器播放状态为由第一组件播放所述视频流的浏览器播放状态，所述第二浏览器播放状态为由所述第二组件播放与所述上下帧切换请求相对应的视频帧数据的浏览器播放状态，所述第一组件播放视频所消耗的内存量小于所述第二组件播放视频所消耗的内存量。
9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至7中任一项所述的基于浏览器的视频帧切换方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的基于浏览器的视频帧切换方法的步骤。
CN202110577298.2A 2021-05-26 2021-05-26 基于浏览器的视频帧切换方法、装置和存储介质 Active CN113497967B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110577298.2A CN113497967B (zh) 2021-05-26 2021-05-26 基于浏览器的视频帧切换方法、装置和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110577298.2A CN113497967B (zh) 2021-05-26 2021-05-26 基于浏览器的视频帧切换方法、装置和存储介质

Publications (2)

Publication Number Publication Date
CN113497967A CN113497967A (zh) 2021-10-12
CN113497967B true CN113497967B (zh) 2023-03-14

Family

ID=77997598

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110577298.2A Active CN113497967B (zh) 2021-05-26 2021-05-26 基于浏览器的视频帧切换方法、装置和存储介质

Country Status (1)

Country Link
CN (1) CN113497967B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115098872B (zh) * 2022-06-17 2023-03-10 深圳市高新兴科技有限公司 一种浏览器视频上传帧截取***与方法

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103268337A (zh) * 2013-05-16 2013-08-28 北京奇虎科技有限公司 一种网页中视频的播放方法和装置
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN106658212A (zh) * 2017-01-20 2017-05-10 北京红马传媒文化发展有限公司 一种基于html5的vr在线播放方法、***及播放器
CN108337560A (zh) * 2017-01-20 2018-07-27 韩华泰科株式会社 用于在web浏览器上播放媒体的媒体重放设备和媒体服务设备
CN109819305A (zh) * 2018-12-28 2019-05-28 深圳豪客互联网有限公司 一种应用程序中的视频播放控制方法及装置
CN111901616A (zh) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130290847A1 (en) * 2012-04-30 2013-10-31 Paul Hooven System and method for processing viewer interaction with video through direct database look-up
US20150248722A1 (en) * 2014-03-03 2015-09-03 Swell, Inc. Web based interactive multimedia system
US20180338166A1 (en) * 2017-05-22 2018-11-22 Symantec Corporation Remotely validating a webpage video stream
CN110324671B (zh) * 2018-03-30 2021-06-08 中兴通讯股份有限公司 网页视频播放方法及装置、电子设备及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103268337A (zh) * 2013-05-16 2013-08-28 北京奇虎科技有限公司 一种网页中视频的播放方法和装置
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN106658212A (zh) * 2017-01-20 2017-05-10 北京红马传媒文化发展有限公司 一种基于html5的vr在线播放方法、***及播放器
CN108337560A (zh) * 2017-01-20 2018-07-27 韩华泰科株式会社 用于在web浏览器上播放媒体的媒体重放设备和媒体服务设备
CN109819305A (zh) * 2018-12-28 2019-05-28 深圳豪客互联网有限公司 一种应用程序中的视频播放控制方法及装置
CN111901616A (zh) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法

Also Published As

Publication number Publication date
CN113497967A (zh) 2021-10-12

Similar Documents

Publication Publication Date Title
US11178448B2 (en) Method, apparatus for processing video, electronic device and computer-readable storage medium
KR101813196B1 (ko) 화상 통신 방법, 장치, 프로그램 및 기록매체
CN108737882B (zh) 图像的显示方法、装置、存储介质及电子装置
CN108322685A (zh) 视频插帧方法、存储介质以及终端
US20150040011A1 (en) Video content displaying schemes
US20230097683A1 (en) Video recommendation method and apparatus, electronic device, and storage medium
CN103546453A (zh) 一种跨设备播放多媒体的方法及设备
US20150012952A1 (en) Display device, information acquisition method, and information providing method
CN106998485B (zh) 视频直播方法及装置
CN105282601A (zh) 一种同屏共享的方法、装置及***
CN103108222A (zh) 移动终端、电视机、电视数字节目切换***、装置和方法
CN108989869B (zh) 视频画面播放方法、装置、设备及计算机可读存储介质
CN113076048B (zh) 视频的展示方法、装置、电子设备和存储介质
CN107948724B (zh) 视频传输控制方法、装置及存储介质和移动终端
CN105228080A (zh) 多屏互动方法、***及浏览器
CN112068919B (zh) 一种网页截屏处理方法、装置、电子设备及存储介质
CN102387187A (zh) 服务器、客户端及利用其远程播放视频文件的方法和***
CN103412896A (zh) 浏览器资源展示的方法和***
CN105142012A (zh) 智能电视直播频道列表获取、频道切换及同屏观看的方法
CN112153459A (zh) 用于投屏显示的方法和装置
CN113497967B (zh) 基于浏览器的视频帧切换方法、装置和存储介质
CN115278275B (zh) 信息展示方法、装置、设备、存储介质和程序产品
CN105306543A (zh) 图片共享方法及装置
CN104580783A (zh) 控制图像传输的信息处理设备及其控制方法
US10979541B2 (en) System and method for setting time and date in a device without access to network time protocol

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