CN113497967A - Video frame switching method and device based on browser and storage medium - Google Patents

Video frame switching method and device based on browser and storage medium Download PDF

Info

Publication number
CN113497967A
CN113497967A CN202110577298.2A CN202110577298A CN113497967A CN 113497967 A CN113497967 A CN 113497967A CN 202110577298 A CN202110577298 A CN 202110577298A CN 113497967 A CN113497967 A CN 113497967A
Authority
CN
China
Prior art keywords
component
browser
video
video frame
frame data
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
CN202110577298.2A
Other languages
Chinese (zh)
Other versions
CN113497967B (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.)
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/en
Publication of CN113497967A publication Critical patent/CN113497967A/en
Application granted granted Critical
Publication of CN113497967B publication Critical patent/CN113497967B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/433Content storage operation, e.g. storage operation in response to a pause request, caching operations
    • H04N21/4333Processing operations in response to a pause request
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/442Monitoring 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/44213Monitoring of end-user related data
    • H04N21/44222Analytics of user selections, e.g. selection of programs or purchase activity
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/443OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81Monomedia components thereof
    • H04N21/8166Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173End-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

The application relates to a video frame switching method, a video frame switching device and a storage medium based on a browser, wherein the video frame switching method based on the browser comprises the following steps: receiving a switching request of an upper frame and a lower frame, and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; the video frame data are pulled from the video stream through a second component, and the second component can access any frame data in the video stream; switching from a first browser playing state to a second browser playing state, wherein the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the memory amount consumed by the first component playing the video is less than the memory amount consumed by the second component playing the video; by the method and the device, the problem that the browser cannot realize the switching of the upper frame and the lower frame of the video under the condition of less dependence on the performance of the equipment in the related technology is solved.

Description

Video frame switching method and device based on browser and storage medium
Technical Field
The present application relates to the field of video playing, and in particular, to a method and an apparatus for switching video frames based on a browser, and a storage medium.
Background
In the related art, when a video is played by using a browser, a browser playing mode which has less dependence on device performance is generally adopted, for example, a video component is a conventional browser playing mode. The conventional browser playing mode can internally analyze the video stream, but cannot access a specific frame of data in the video through the conventional browser playing mode which has less dependence on the device performance, and further cannot provide a function of positioning a specific frame of picture, namely a function of switching between an upper frame and a lower frame, for a user under the condition of less dependence on the device performance.
Aiming at the problem that the browser cannot realize the switching of the upper frame and the lower frame of the video under the condition of less dependence on the performance of equipment in the related technology, no effective solution is provided at present.
Disclosure of Invention
The embodiment provides a video frame switching method and device based on a browser and a storage medium, so as to solve the problem that the browser cannot realize video up-down frame switching under the condition that the dependency on the device performance is small in the related art.
In a first aspect, a method for switching video frames based on a browser is provided in this embodiment, and the method includes:
receiving a switching request of an upper frame and a lower frame, and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; wherein the video frame data is pulled from a video stream by a second component that has access to any frame data in the video stream;
and switching from a first browser playing state to a second browser playing state, wherein the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the amount of memory consumed by the first component playing the video is smaller than the amount of memory consumed by the second component playing the video.
In some of these embodiments, playing, by the second component, video frame data corresponding to the top and bottom frame switch request comprises:
and drawing the video frame data corresponding to the upper and lower frame switching request in the canvas of the second component, and playing the video frame data corresponding to the upper and lower frame switching request through the canvas of the second component.
In some of these embodiments, playing, by the second component, video frame data corresponding to the top and bottom frame switch request further comprises:
moving the canvas of the first component out of a viewable area of a browser.
In some of these embodiments, in the first browser play state, the canvas of the first component overlays the canvas of the second component.
In some embodiments, receiving a top-bottom frame switching request, and acquiring corresponding video frame data according to the top-bottom frame switching request includes: receiving a vertical frame switching request, and acquiring video frame data corresponding to the vertical frame switching request from a storage area of the second component according to the vertical frame switching request;
the method further comprises the following steps: receiving a pause request, triggering the second component to pull video frame data corresponding to the time of the pause request from the video stream in response to the pause request, and storing the pulled video frame data in a storage area of the second component.
In some of these embodiments, triggering, in response to the pause request, the second component to pull video frame data corresponding to the time of the pause request from the video stream, and storing the pulled video frame data in a storage area of the second component comprises:
judging whether video frame data corresponding to the time of the pause request is stored in a storage area of the second component or not in response to the pause request;
and if the storage area of the second component does not store the video frame data corresponding to the pause request time, triggering the second component to pull the video frame data corresponding to the pause request time from the video stream, and storing the pulled video frame data in the storage area of the second component.
In some of these embodiments, the method further comprises:
under the condition that a playing request is received, triggering the first component creating canvas and the second component creating canvas, and establishing the connection between the first component and the video stream and the connection between the second component and the video stream; wherein the first component is capable of playing the video stream when the first component establishes a connection with the video stream, and the second component is capable of playing the video stream when the second component establishes a connection with the video stream;
pausing the playing of the video stream by the second component and opening a first browser playing state in which the video stream is played by the first component.
In some of these embodiments, the browser employs HTML5 technology.
In some of these embodiments, the first component is a video component and the second component is a canvas component.
In a second aspect, there is provided in this embodiment a browser-based video frame switching apparatus, the apparatus comprising: the device comprises an acquisition module and a switching module;
the acquisition module is used for receiving a switching request of an upper frame and a lower frame and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; wherein the video frame data is pulled from a video stream by a second component that has access to any frame data in the video stream;
the switching module is configured to switch a first browser playing state to a second browser playing state, where the first browser playing state is the browser playing state in which the first component plays the video stream, the second browser playing state is the browser playing state in which the second component plays the video frame data corresponding to the upper and lower frame switching requests, and the amount of memory consumed by the first component playing the video is smaller than the amount of memory consumed by the second component playing the video.
In a third aspect, in this embodiment, there is provided an electronic apparatus, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the processor implements the method for switching video frames based on a browser according to the first aspect.
In a fourth aspect, in the present embodiment, there is provided a storage medium having stored thereon a computer program which, when executed by a processor, implements the browser-based video frame switching method of the first aspect described above.
Compared with the related art, the method, the device and the storage medium for switching the video frames based on the browser provided in the embodiment acquire corresponding video frame data according to the up-down frame switching request by receiving the up-down frame switching request; wherein the video frame data is pulled from a video stream by a second component that has access to any frame data in the video stream; the video playing state is switched to a second browser playing state by a first browser playing state, wherein the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching request, and the amount of memory consumed by the first component playing the video is smaller than the amount of memory consumed by the second component playing the video, so that the problem that the browser cannot realize the upper and lower frame switching of the video under the condition of less dependence on the performance of equipment in the related art is solved.
The details of one or more embodiments of the application are set forth in the accompanying drawings and the description below to provide a more thorough understanding of the application.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
fig. 1 is a block diagram of a hardware configuration of a terminal of a browser-based video frame switching method according to the present embodiment;
FIG. 2 is a first flowchart of a video frame switching method based on a browser according to the present embodiment;
FIG. 3 is a second flowchart of a video frame switching method based on a browser according to the present embodiment;
FIG. 4 is a flowchart III of a video frame switching method based on a browser according to the present embodiment;
fig. 5 is a block diagram of the structure of the video frame switching apparatus based on the browser in the present embodiment.
Detailed Description
For a clearer understanding of the objects, aspects and advantages of the present application, reference is made to the following description and accompanying drawings.
Unless defined otherwise, technical or scientific terms used herein shall have the same general meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The use of the terms "a" and "an" and "the" and similar referents in the context of this application do not denote a limitation of quantity, either in the singular or the plural. The terms "comprises," "comprising," "has," "having," and any variations thereof, as referred to in this application, are intended to cover non-exclusive inclusions; for example, a process, method, and system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or modules, but may include other steps or modules (elements) not listed or inherent to such process, method, article, or apparatus. Reference throughout this application to "connected," "coupled," and the like is not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. Reference to "a plurality" in this application means two or more. "and/or" describes an association relationship of associated objects, meaning that three relationships may exist, for example, "A and/or B" may mean: a exists alone, A and B exist simultaneously, and B exists alone. In general, the character "/" indicates a relationship in which the objects associated before and after are an "or". The terms "first," "second," "third," and the like in this application are used for distinguishing between similar items and not necessarily for describing a particular sequential or chronological order.
The method embodiments provided in the present embodiment may be executed in a terminal, a computer, or a similar computing device. For example, the method is executed on a terminal, and fig. 1 is a block diagram of a hardware structure of the terminal according to the video frame switching method based on a browser in this embodiment. As shown in fig. 1, the terminal may include one or more processors 102 (only one shown in fig. 1) and a memory 104 for storing data, wherein the processor 102 may include, but is not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA. The terminal may also include a transmission device 106 for communication functions and an input-output device 108. It will be understood by those of ordinary skill in the art that the structure shown in fig. 1 is merely an illustration and is not intended to limit the structure of the terminal described above. For example, the terminal may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.
The memory 104 may be used to store a computer program, for example, a software program and a module of an application software, such as a computer program corresponding to the video frame switching method based on a browser in the present embodiment, and the processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, so as to implement the method described above. The memory 104 may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include memory located remotely from the processor 102, which may be connected to the terminal over a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The transmission device 106 is used to receive or transmit data via a network. The network described above includes a wireless network provided by a communication provider of the terminal. In one example, the transmission device 106 includes a Network adapter (NIC) that can be connected to other Network devices through a base station to communicate with the internet. In one example, the transmission device 106 may be a Radio Frequency (RF) module, which is used to communicate with the internet in a wireless manner.
In the related art, a browser playing mode which has less dependence on device performance is generally adopted when a browser is used for playing a video, for example, a video component is a conventional browser playing mode. The conventional browser playing mode can internally analyze the video stream, but cannot access a specific frame of data in the video through the conventional browser playing mode which has less dependence on the device performance, and further cannot provide a function of positioning a specific frame of picture, namely a function of switching between an upper frame and a lower frame, for a user under the condition of less dependence on the device performance. According to the method and the device, the video frame data corresponding to the upper and lower frame switching request are pulled by the second component capable of accessing any frame data in the video stream, and the browser playing state of playing the video stream by the first component is switched to the browser playing state of playing the video frame data corresponding to the upper and lower frame switching request by the second component when the memory amount consumed by the first component for playing the video is smaller than the memory amount consumed by the second component for playing the video, so that the problem that the browser cannot realize the upper and lower frame switching of the video under the condition that the dependence on the device performance is small in the related art is solved.
In this embodiment, a video frame switching method based on a browser is provided, and fig. 2 is a first flowchart of the video frame switching method based on a browser in this embodiment, as shown in fig. 2, the method includes the following steps:
step S201, receiving a switching request of upper and lower frames, and acquiring corresponding video frame data according to the switching request of the upper and lower frames; the video frame data are pulled from the video stream through a second component, and the second component can access any frame data in the video stream;
it should be noted that the video stream is a transport stream of video data viewed by a user through a browser, and the video stream may be stored locally or acquired from a remote server in real time in response to a viewing request of the user;
step S202, switching from a first browser playing state to a second browser playing state, wherein the first browser playing state is a browser playing state in which the first component plays a video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the amount of memory consumed by the first component playing the video is less than the amount of memory consumed by the second component playing the video;
specifically, under the condition that a video playing request based on a browser is received, a first component with small memory consumption for playing the video plays the video; if the upper and lower frame switching request based on the browser is received, the second component acquires video frame data corresponding to the upper and lower frame switching request, and the second component plays the video frame data corresponding to the upper and lower frame switching request, namely, the browser playing state of playing the video stream by the first component is switched to the browser playing state of playing the video frame data corresponding to the upper and lower frame switching request by the second component.
Through the above steps S201 to S202, when the up-down frame switching request of the user is received, the second component capable of accessing any frame data in the video stream pulls the video frame data corresponding to the up-down frame switching request, and plays the video frame data corresponding to the up-down frame switching request by the second component; except for the switching request of the upper frame and the lower frame of the user, the first component which is smaller than the memory amount consumed by the second component for playing the video is used for playing the video stream when the browser plays the video stream, and then the first component and the second component are switched under different playing requirements of the client, so that the dependence on the performance of equipment is reduced when the video frame switching of the user based on the browser is met, the user can realize the upper frame and the lower frame switching without a high-performance computer, and the problem that the video upper frame and the lower frame of the browser cannot be switched under the condition that the dependence on the performance of the equipment is small in the related technology is solved.
In some of these embodiments, the browser employs HTML5 technology. It should be noted that, in the related art, plug-ins are software that is generally created by a third party and are used to display various types of files that cannot be displayed by a browser on a web page or to add various functions that cannot be executed by the browser to the browser. The plug-in can expand the performance of the browser; however, in the embodiment of the application, the browser adopts the HTML5 technology, so that the browser can switch the upper frame and the lower frame of the video stream without a plug-in.
In some of these embodiments, the first component is a video component and the second component is a canvas component; the video component is newly added under the technical specification of HTML5 and is used for supporting the playing of videos in web documents. Before the advent of HTML5 technology, standard web documents did not support video playback. Most of the videos in the webpage documents are played through plug-ins (such as Flash), all browsers must install plug-ins to play the videos in the webpage, and the browsers without the plug-ins cannot play the videos in the webpage.
In some embodiments, playing, by the second component, video frame data corresponding to the top and bottom frame switch request comprises: and drawing the video frame data corresponding to the upper and lower frame switching request in the canvas of the second component, and playing the video frame data corresponding to the upper and lower frame switching request through the canvas of the second component. Wherein, playing the video frame data corresponding to the upper and lower frame switching request by the second component further comprises: moving the canvas of the first component out of the viewable area of the browser; in the first browser play state, the canvas of the first component overlays the canvas of the second component.
In some embodiments, fig. 3 is a flowchart of a second method for switching video frames based on a browser in this embodiment, and as shown in fig. 3, the method includes the following steps:
step S301, receiving a pause request, triggering the second component to pull video frame data corresponding to the time of the pause request from the video stream in response to the pause request, and storing the pulled video frame data in a storage area of the second component;
step S302, receiving a switching request of the upper and lower frames, and acquiring video frame data corresponding to the switching request of the upper and lower frames from a storage area of a second component according to the switching request of the upper and lower frames; the video frame data are pulled from the video stream through a second component, and the second component can access any frame data in the video stream;
specifically, in a browser playing state in which a video stream is played by a first component, if a pause request issued by a user is received, on one hand, a video in a canvas of the first component is paused in response to the pause request, and on the other hand, a second component is triggered to pull video frame data corresponding to the time of the pause request from the video stream, wherein the video frame data corresponding to the time of the pause request may be the video stream starting from a second before the current pause time to a second after the pause time, the second component is triggered to pull the video frame data corresponding to the time of the pause request from the video stream in response to the pause request is to cache video data of a second before and after the current pause time, preparation is made for switching up and down frames later, and the range of the second before and after the second can be modified according to a network environment and a memory performance, and the data of the video of one second usually contains tens of frames, switching the upper frame and the lower frame frequently enough, and storing the pulled video frame data corresponding to the time of the pause request in a storage area of the second component;
step S303, the first browser playing state is switched to a second browser playing state, where the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the amount of memory consumed by the first component to play the video is less than the amount of memory consumed by the second component to play the video.
In some of these embodiments, triggering, in response to the pause request, the second component to pull video frame data corresponding to the time of the pause request from the video stream, and storing the pulled video frame data in a storage area of the second component comprises:
judging whether video frame data corresponding to the time of the pause request is stored in a storage area of the second component or not in response to the pause request; if the storage area of the second component does not store the video frame data corresponding to the time of the pause request, triggering the second component to pull the video frame data corresponding to the time of the pause request from the video stream, and storing the pulled video frame data in the storage area of the second component;
specifically, it may be determined whether video frame data corresponding to the time of the pause request is stored in the storage area of the second component in response to the pause request, and if video frame data corresponding to the time of the pause request is not stored in the storage area of the second component, the second component may be triggered to pull video frame data corresponding to the time of the pause request from the video stream, and store the pulled video frame data in the storage area of the second component. On the basis of responding to the pause request to judge whether the video frame data corresponding to the time of the pause request is stored in the storage area of the second component, or responding to the up-down frame switching request, for example, each time the storage area is switched to the next frame, judging whether the video frame data in the storage area of the second component contains the data of the next second, when judging that no data exists in the next second, continuously pulling the video stream to be stored in the storage area of the second component by taking the next second of the current second as the starting point, and if so, not operating; similarly, when the previous frame is switched, whether the video frame data in the storage area of the second component contains the video frame data one second before the current time is judged, if no data exists, the stream is pulled from one second before the current time, and if the data exists, the operation is not carried out.
In some embodiments, fig. 4 is a flowchart three of the video frame switching method based on the browser in the present embodiment, as shown in fig. 4, the method includes the following steps:
step S401, under the condition of receiving a playing request, triggering a first component creating canvas and a second component creating canvas, and establishing the connection between the first component and a video stream and the connection between the second component and the video stream; the first component can play the video stream under the condition that the first component is connected with the video stream, and the second component can play the video stream under the condition that the second component is connected with the video stream;
specifically, when a user enters a video playing page of a browser, a playing request is received, a first component and a second component are triggered to create canvases at the same position, the height of the canvases is consistent, and the connection between the first component and a video stream and the connection between the second component and the video stream are established while the canvases are created;
step S402, pausing the playing of the video stream by the second component and starting a first browser playing state of playing the video stream by the first component;
specifically, the video of the second component may be paused when the second component establishes a connection with the video stream and obtains the first frame data of the video stream, and the browser playing state is that the first component establishing a connection with the video stream plays the video stream;
step S403, receiving a switching request of upper and lower frames, and acquiring corresponding video frame data according to the switching request of the upper and lower frames; the video frame data are pulled from the video stream through a second component, and the second component can access any frame data in the video stream;
step S404, switching from a first browser playing state to a second browser playing state, where the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the amount of memory consumed by the first component playing the video is less than the amount of memory consumed by the second component playing the video.
In some of these embodiments, the method comprises the following steps:
under the condition that a playing request is received, triggering a first component creating canvas and a second component creating canvas, and establishing the connection between the first component and a video stream and the connection between the second component and the video stream;
when the second component is connected with the video stream and first frame data of the video stream are obtained, pausing the video of the component, starting a first browser playing state of playing the video stream by the first component, and covering canvas of the first component on the canvas of the second component;
when a pause request is received, whether video frame data corresponding to the time of the pause request is stored in a storage area of the second component or not is judged in response to the pause request, and the first component is paused to play a video stream;
if the storage area of the second component does not store the video frame data corresponding to the time of the pause request, triggering the second component to pull the video frame data corresponding to the time of the pause request from the video stream, and storing the pulled video frame data in the storage area of the second component;
if a user playing recovery request is received, recovering the first component to continue playing the video stream;
if a switching request of upper and lower frames is received, judging whether video frame data of one second before and one second after the current time is stored in a storage area of the second component;
if the storage area of the second component does not store the video frame data of the second one second before and the second after the current time, the video frame data of the second one second before and the second after the current time is pulled from the video stream through the second component;
if the storage area of the second component stores video frame data of the previous second and the next second at the current time, drawing the video frame data corresponding to the upper and lower frame switching request in the canvas of the second component, playing the video frame data corresponding to the upper and lower frame switching request through the canvas of the second component, and moving the canvas of the first component out of the visual area of the browser.
It should be noted that the steps illustrated in the above-described flow diagrams or in the flow diagrams of the figures may be performed in a computer system, such as a set of computer-executable instructions, and that, although a logical order is illustrated in the flow diagrams, in some cases, the steps illustrated or described may be performed in an order different than here.
In this embodiment, a video frame switching device based on a browser is further provided, and the device is used to implement the foregoing embodiments and preferred embodiments, and the description already made is omitted for brevity. The terms "module," "unit," "subunit," and the like as used below may implement a combination of software and/or hardware for a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated.
Fig. 5 is a block diagram of a structure of a video frame switching apparatus based on a browser according to the present embodiment, as shown in fig. 5, the apparatus includes: an acquisition module 51 and a switching module 52;
an obtaining module 51, configured to receive a top-bottom frame switching request, and obtain corresponding video frame data according to the top-bottom frame switching request; the video frame data are pulled from the video stream through a second component, and the second component can access any frame data in the video stream;
the switching module 52 is configured to switch a first browser playing state to a second browser playing state, where the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and an amount of memory consumed by the first component to play the video is smaller than an amount of memory consumed by the second component to play the video.
In some embodiments, the obtaining module 51 and the switching module 52 are further configured to implement steps in the video frame switching based on the browser provided in the foregoing embodiments, and details are not repeated here.
The above modules may be functional modules or program modules, and may be implemented by software or hardware. For a module implemented by hardware, the modules may be located in the same processor; or the modules can be respectively positioned in different processors in any combination.
There is also provided in this embodiment an electronic device comprising a memory having a computer program stored therein and a processor configured to execute the computer program to perform the steps in any of the above embodiments of the browser-based video frame switching method.
Optionally, the electronic apparatus may further include a transmission device and an input/output device, wherein the transmission device is connected to the processor, and the input/output device is connected to the processor.
Optionally, in this embodiment, the processor may be configured to execute the following steps by a computer program:
receiving a switching request of an upper frame and a lower frame, and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; wherein the video frame data is pulled from the video stream by the second component, and the second component is capable of accessing any frame data in the video stream.
And switching the first browser playing state to a second browser playing state, wherein the first browser playing state is a browser playing state in which the first component plays the video stream, the second browser playing state is a browser playing state in which the second component plays video frame data corresponding to the upper and lower frame switching requests, and the memory amount consumed by the first component playing the video is less than the memory amount consumed by the second component playing the video.
It should be noted that, for specific examples in this embodiment, reference may be made to the examples described in the foregoing embodiments and optional implementations, and details are not described again in this embodiment.
In addition, in combination with the video frame switching method based on the browser provided in the foregoing embodiment, a storage medium may also be provided in this embodiment. The storage medium having stored thereon a computer program; the computer program, when executed by a processor, implements any of the browser-based video frame switching methods of the above embodiments.
It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to be limiting. All other embodiments, which can be derived by a person skilled in the art from the examples provided herein without any inventive step, shall fall within the scope of protection of the present application.
It is obvious that the drawings are only examples or embodiments of the present application, and it is obvious to those skilled in the art that the present application can be applied to other similar cases according to the drawings without creative efforts. Moreover, it should be appreciated that in the development of any such actual implementation, as in any engineering or design project, numerous implementation-specific decisions must be made to achieve the developers' specific goals, such as compliance with system-related and business-related constraints, which may vary from one implementation to another.
The term "embodiment" is used herein to mean that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the present application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is to be expressly or implicitly understood by one of ordinary skill in the art that the embodiments described in this application may be combined with other embodiments without conflict.
The above examples only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the patent protection. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims (12)

1. A video frame switching method based on a browser is characterized by comprising the following steps:
receiving a switching request of an upper frame and a lower frame, and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; wherein the video frame data is pulled from a video stream by a second component that has access to any frame data in the video stream;
and switching from a first browser playing state to a second browser playing state, wherein the first browser playing state is a browser playing state in which the video stream is played by a first component, the second browser playing state is a browser playing state in which the video frame data corresponding to the upper and lower frame switching requests are played by a second component, and the amount of memory consumed by the first component for playing the video is less than the amount of memory consumed by the second component for playing the video.
2. The browser-based video frame switching method of claim 1, wherein playing, by the second component, video frame data corresponding to the up-down frame switching request comprises:
and drawing the video frame data corresponding to the upper and lower frame switching request in the canvas of the second component, and playing the video frame data corresponding to the upper and lower frame switching request through the canvas of the second component.
3. The browser-based video frame switching method of claim 2, wherein playing, by the second component, video frame data corresponding to the up-down frame switching request further comprises:
moving the canvas of the first component out of a viewable area of a browser.
4. The browser-based video frame switching method of claim 3, wherein in the first browser play state, the canvas of the first component overlays the canvas of the second component.
5. The method according to claim 1, wherein receiving a top-bottom frame switching request, and acquiring corresponding video frame data according to the top-bottom frame switching request comprises: receiving a vertical frame switching request, and acquiring video frame data corresponding to the vertical frame switching request from a storage area of the second component according to the vertical frame switching request;
the method further comprises the following steps: receiving a pause request, triggering the second component to pull video frame data corresponding to the time of the pause request from the video stream in response to the pause request, and storing the pulled video frame data in a storage area of the second component.
6. The browser-based video frame switching method of claim 5, wherein triggering the second component to pull video frame data corresponding to the time of the pause request from the video stream in response to the pause request and store the pulled video frame data in a storage area of the second component comprises:
judging whether video frame data corresponding to the time of the pause request is stored in a storage area of the second component or not in response to the pause request;
and if the storage area of the second component does not store the video frame data corresponding to the pause request time, triggering the second component to pull the video frame data corresponding to the pause request time from the video stream, and storing the pulled video frame data in the storage area of the second component.
7. The browser-based video frame switching method of claim 1, further comprising:
under the condition that a playing request is received, triggering the first component creating canvas and the second component creating canvas, and establishing the connection between the first component and the video stream and the connection between the second component and the video stream; wherein the first component is capable of playing the video stream when the first component establishes a connection with the video stream, and the second component is capable of playing the video stream when the second component establishes a connection with the video stream;
pausing the playing of the video stream by the second component and opening a first browser playing state in which the video stream is played by the first component.
8. The browser-based video frame switching method of claim 1, wherein said browser employs HTML5 technology.
9. The method of claim 8, wherein the first component is a video component and the second component is a canvas component.
10. A browser-based video frame switching apparatus, the apparatus comprising: the device comprises an acquisition module and a switching module;
the acquisition module is used for receiving a switching request of an upper frame and a lower frame and acquiring corresponding video frame data according to the switching request of the upper frame and the lower frame; wherein the video frame data is pulled from a video stream by a second component that has access to any frame data in the video stream;
the switching module is configured to switch a first browser playing state to a second browser playing state, where the first browser playing state is a browser playing state in which the video stream is played by a first component, the second browser playing state is a browser playing state in which the video frame data corresponding to the upper and lower frame switching requests is played by a second component, and an amount of memory consumed by the first component to play the video is smaller than an amount of memory consumed by the second component to play the video.
11. An electronic device comprising a memory and a processor, wherein the memory has stored therein a computer program, and the processor is configured to execute the computer program to perform the browser-based video frame switching method according to any one of claims 1 to 9.
12. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the browser-based video frame switching method according to any one of claims 1 to 9.
CN202110577298.2A 2021-05-26 2021-05-26 Video frame switching method and device based on browser and storage medium Active CN113497967B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110577298.2A CN113497967B (en) 2021-05-26 2021-05-26 Video frame switching method and device based on browser and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110577298.2A CN113497967B (en) 2021-05-26 2021-05-26 Video frame switching method and device based on browser and storage medium

Publications (2)

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

Family

ID=77997598

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110577298.2A Active CN113497967B (en) 2021-05-26 2021-05-26 Video frame switching method and device based on browser and storage medium

Country Status (1)

Country Link
CN (1) CN113497967B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115098872A (en) * 2022-06-17 2022-09-23 深圳市高新兴科技有限公司 System and method for intercepting video uploading frame of browser

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103268337A (en) * 2013-05-16 2013-08-28 北京奇虎科技有限公司 Playing method and device of videos in web pages
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
CN106506525A (en) * 2016-11-29 2017-03-15 北京旷视科技有限公司 For playing the method and device of video flowing on a web browser
CN106658212A (en) * 2017-01-20 2017-05-10 北京红马传媒文化发展有限公司 VR online playing method, system and player based on HTML5
CN108337560A (en) * 2017-01-20 2018-07-27 韩华泰科株式会社 Media playback and media serving device for playing media in web browser
US20180338166A1 (en) * 2017-05-22 2018-11-22 Symantec Corporation Remotely validating a webpage video stream
CN109819305A (en) * 2018-12-28 2019-05-28 深圳豪客互联网有限公司 Video playing control method and device in a kind of application program
WO2019184572A1 (en) * 2018-03-30 2019-10-03 中兴通讯股份有限公司 Webpage video playback method and apparatus, electronic device and storage medium
CN111901616A (en) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 H5/WebGL-based method for improving multi-view live broadcast rendering

Patent Citations (10)

* 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
CN103268337A (en) * 2013-05-16 2013-08-28 北京奇虎科技有限公司 Playing method and device of videos in web pages
US20150248722A1 (en) * 2014-03-03 2015-09-03 Swell, Inc. Web based interactive multimedia system
CN106506525A (en) * 2016-11-29 2017-03-15 北京旷视科技有限公司 For playing the method and device of video flowing on a web browser
CN106658212A (en) * 2017-01-20 2017-05-10 北京红马传媒文化发展有限公司 VR online playing method, system and player based on HTML5
CN108337560A (en) * 2017-01-20 2018-07-27 韩华泰科株式会社 Media playback and media serving device for playing media in web browser
US20180338166A1 (en) * 2017-05-22 2018-11-22 Symantec Corporation Remotely validating a webpage video stream
WO2019184572A1 (en) * 2018-03-30 2019-10-03 中兴通讯股份有限公司 Webpage video playback method and apparatus, electronic device and storage medium
CN109819305A (en) * 2018-12-28 2019-05-28 深圳豪客互联网有限公司 Video playing control method and device in a kind of application program
CN111901616A (en) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 H5/WebGL-based method for improving multi-view live broadcast rendering

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115098872A (en) * 2022-06-17 2022-09-23 深圳市高新兴科技有限公司 System and method for intercepting video uploading frame of browser
CN115098872B (en) * 2022-06-17 2023-03-10 深圳市高新兴科技有限公司 System and method for intercepting video uploading frame of browser

Also Published As

Publication number Publication date
CN113497967B (en) 2023-03-14

Similar Documents

Publication Publication Date Title
KR101813196B1 (en) Method, device, program, and recording medium for video communication
CN108737882B (en) Image display method, image display device, storage medium and electronic device
CN107613363B (en) System and method for pushing advertisements to hotel televisions based on Internet
CN105228080B (en) Multi-screen interaction method, system and browser
JP2018512814A (en) Method, apparatus and system for processing video stream data
CN103546453A (en) Cross-device multimedia playing method and device
CN103248939A (en) Method and system for achieving synchronous display of multiple screens
CN106998490B (en) A kind of multi-medium data synchronous method and device
CN106998485B (en) Video live broadcasting method and device
US20160308923A1 (en) Method and system for playing live broadcast streaming media
CN113076048B (en) Video display method and device, electronic equipment and storage medium
CN108900855B (en) Live content recording method and device, computer readable storage medium and server
CN103412896A (en) Browser resource showing method and system
CN107948724B (en) Video transmission control method, device, storage medium and mobile terminal
CN108989869B (en) Video picture playing method, device, equipment and computer readable storage medium
CN112153459A (en) Method and device for screen projection display
CN113497967B (en) Video frame switching method and device based on browser and storage medium
CN105306543A (en) Picture sharing method and device
CN105872733B (en) A kind of internet application method based on video terminal, video terminal and video terminal system
EP3048796A1 (en) Information system, information delivery method and iptv system based on multi-screen interaction
CN102355588B (en) A kind of method and system of synchronous browsing electron album
CN115623275A (en) Subtitle display method and display equipment
CN110740337B (en) Live broadcast method and device, electronic equipment and storage medium
JP6219531B2 (en) Television program image frame capture device, television program image frame acquisition device, system and method
CN112019858B (en) Video playing method and device, computer equipment and storage medium

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