Web page video playback method, device, electronic device and storage medium

Abstract

The embodiment of the present application provides a web video playback method, device, electronic device and storage medium, the method comprising obtaining image information, creating a canvas element according to the image information, and drawing a canvas in the canvas element according to the image information; obtaining additional information, creating a block element according to the additional information, and writing the additional information into the block element; typesetting and stacking the canvas element and the block element; and displaying the canvas element and the block element. By using the embodiment of the present application, the video captured by the external camera system and the additional information stacked thereon can be intuitively seen, so that objects in the video can be sampled and defect analyzed.

Description

Technical Field

[0001] The present application relates to the technical field of Internet page processing, and in particular to a web page video playback method, device, electronic device and storage medium. Background Art

[0002] In the production process of integrated circuit chips, defect detection of defective products requires a large amount of product sampling and defect marking. Usually, a camera system is used to shoot a first video of the integrated circuit chip to be detected and import it into the recognition system. The recognition system can perform data analysis and processing on the first video, and derive additional information including the size range frame diagram and position coordinates of the integrated circuit chip. At the same time, the first video and the additional information are transmitted from the server to the client. The client merges the first video and the additional information into a second video and presents it to the user. The user can sample or mark defects on the integrated circuit chip according to the content shot in the second video and the additional information.

[0003] In the process of transmitting the first video and the additional information from the server to the client, the server will compress the first video and the additional information based on the variable bitrate (VBR) technology. After compression, the image quality of the video will be lost and the additional information will be distorted. Since the additional information may include fine identifiable content such as text or lines, if the additional information is directly superimposed on the first video after being distorted and drawn into the second video for display, it may affect the user's recognition effect.

[0004] In addition, since the recognition system needs to run an algorithm to perform data analysis and processing on the first video, and the algorithm has a certain degree of complexity, the additional information output by the recognition system may be later than the first video output by the camera system, resulting in the output of the recognition system being out of sync with the camera system. If the additional information is directly superimposed on the first video and drawn into a second video for display, it may cause user recognition errors. If the frame rate of the camera system is to be maintained, a judgment component is required to determine whether the recognition system can be used to output additional information that is not synchronized with the first video at the frame rate of the camera system, which increases development costs and transmission complexity. Summary of the invention

[0005] In view of the above, it is necessary to provide a web video playback method, device, electronic device and storage medium, so that users can intuitively see the video captured by the external camera system and the additional information stacked thereon, so that objects in the video can be sampled and defect analyzed.

[0006] The first aspect of the present application provides a web page video playback method, comprising:

[0007] Acquire image information, create a canvas element according to the image information, and draw the canvas in the canvas element according to the image information;

[0008] Acquire additional information, create a block element according to the additional information, and write the additional information into the block element;

[0009] Arrange and stack the canvas element and the block element;

[0010] The canvas element and the block element are displayed.

[0011] The image information includes image pixel information and image size information.

[0012] The method further comprises:

[0013] The image information is converted from a first format to a second format according to the image pixel information, and the image information is converted from the second format to a third format according to the image size information.

[0014] The first format is an ArrayBuffer object, the second format is a Uint8ClampedArray object, and the third format is an ImageData object.

[0015] The method further comprises:

[0016] Parse additional information;

[0017] A portion of the additional information is selected and converted into the displayable additional information.

[0018] A second aspect of the present application provides a web page video playback device, comprising:

[0019] An image processing module, used for acquiring image information, creating a canvas element according to the image information, and drawing a canvas in the canvas element according to the image information;

[0020] An information processing module, used for acquiring additional information, creating a block element according to the additional information, and writing the additional information into the block element;

[0021] A cascading style module, used for typeset and stacking the canvas element and the block element;

[0022] The display module is used to display the canvas element and the block element.

[0023] The image information includes image pixel information and image size information.

[0024] A third aspect of the present application provides an electronic device, including:

[0025] Memory for storing computer programs;

[0026] The processor is used to execute the computer program stored in the memory. When the computer program is executed, the processor is used to execute the web page video playback method.

[0027] A fourth aspect of the present application provides a computer-readable storage medium, which includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes a web page video playback method.

[0028] Therefore, by using the web video playback method provided by the embodiment of the present application, the user can intuitively see the video captured by the external camera system and the additional information stacked thereon, so that the object in the video can be sampled and defect analyzed. In addition, the method does not reduce the video frame rate, and does not require the configuration of a judgment component. The user can smoothly see the complete number of frames of the video, and at the same time, finely and without distortion, watch the additional information stacked on the video. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 A flowchart of a web page video playback method provided in one embodiment of the present application.

[0030] Figure 2 for Figure 1 A diagram showing how to stack elements in HTML using CSS.

[0031] Figure 3a to Figure 3d A schematic diagram of a canvas element provided in an embodiment of the present application being displayed within the periphery of the player.

[0032] Figures 4a to 4c A schematic diagram of displaying a video screen and additional information provided in an embodiment of the present application.

[0033] Figure 5 A schematic diagram of a web video playback device provided in an embodiment of the present application.

[0034] Figure 6 A schematic diagram of an electronic device provided in accordance with an embodiment of the present application.

[0035] Main component symbols

[0036] Web video playback device 100

[0037] Image processing module 10

[0038] Information processing module 40

[0039] Cascading Styles Module 102

[0040] Display module 103

[0041] External camera system 200

[0042] External Identification System 300

[0043] Electronic equipment 400

[0044] Memory 401

[0045] Processor 402

[0046] Communication Bus 403

[0047] Communication interface 404

[0048] Control button 501

[0049] Player peripheral 502

[0050] Canvas Element 503

[0051] Block element 504 DETAILED DESCRIPTION

[0052] The following specific implementation methods will further illustrate the present application in conjunction with the above-mentioned drawings.

[0053] In order to more clearly understand the above-mentioned purposes, features and advantages of the present application, the present application is described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be noted that the embodiments of the present application and the features in the embodiments can be combined with each other without conflict.

[0054] In the following description, many specific details are set forth to facilitate a full understanding of the present application. The described embodiments are only part of the embodiments of the present application, rather than all of the embodiments.

[0055] In the embodiments of the present application, the words "first", "second", etc. are only used to distinguish different objects, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order. For example, the first application, the second application, etc. are used to distinguish different applications, rather than to describe a specific order of applications. The features defined as "first" or "second" may explicitly or implicitly include one or more of the features.

[0056] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein in the specification of this application are only for the purpose of describing specific embodiments and are not intended to limit this application.

[0057] See also Figure 1 , Figure 1 Shown is a flow chart of a web page video playback method provided by an embodiment of the present application.

[0058] In this embodiment, the webpage video playing method can be applied to the electronic device 400 ( Figure 6 For electronic devices that need to play web videos, the web video playback function provided by the method of the present application can be directly integrated on the electronic device 400, or run in the electronic device 400 in the form of a software development kit (SDK).

[0059] like Figure 1 As shown, the webpage video playing method may specifically include the following steps:

[0060] Step S101: Obtain image size.

[0061] In this embodiment, the image is an external camera system 200 ( Figure 5 ), wherein the size is the width and height of the image, wherein the external camera system 200 is used to shoot objects that need to be sampled and defect marked.

[0062] In one implementation, the external camera system 200 may be one or more cameras, or one or more other video acquisition devices.

[0063] In one implementation, the embodiment of the present application can obtain the size of the image from the external camera system 200 through an application programming interface (API). APIs are some predefined functions that provide applications and developers with the ability to access a set of routines based on certain software or hardware without accessing source code. For example, the embodiment of the present application can obtain the image size of the external camera system 200 through an API.

[0064] Step S102: Obtain image pixel information.

[0065] In this embodiment, the external camera system 200 transmits the pixel information of the image to the electronic device 400 via a WebSocket connection, wherein WebSocket is a protocol for full-duplex communication on a single Transmission Control Protocol (TCP) connection. WebSocket allows the server to actively push data to the client, and a persistent connection can be created between the client and the server for bidirectional data transmission. The pixel information of the image is a set of RGB values ​​and transparency values ​​for each pixel in the image, and its format is an ArrayBuffer object. Among them, the ArrayBuffer object is a continuous memory area that can store binary data, and the data therein cannot be read and written directly, and can only be read and written through a TypedArray view or a DataView view. The TypedArray is a typed array that defines an array-like view of an underlying binary data buffer (binary databuffer) for reading and writing data in an ArrayBuffer object. DataView is a bottom-level interface for reading and writing multiple numerical types from an ArrayBuffer object.

[0066] In one embodiment, the electronic device 400 may include one or more control buttons with specific names (not shown in the figure), and may also include one or more monitors (not shown in the figure), wherein the specific names may be defined in advance to represent different control functions, the control buttons are used to control the working status of the electronic device 400, and the monitors are used to monitor the working status of the electronic device 400.

[0067] Optionally, the embodiment of the present application can establish a WebSocket connection with the external camera system 200 when the user clicks a button named “Play”.

[0068] Optionally, the embodiment of the present application can establish a WebSocket connection with the external camera system 200 when the monitor detects that the automatic play function is turned on.

[0069] Optionally, the embodiment of the present application can pause the playback and disconnect the WebSocket connection with the external camera system 200 when the monitor detects that the web page is switched.

[0070] Optionally, the embodiment of the present application can pause the playback and disconnect the WebSocket connection with the external camera system 200 when the monitor detects that there is no picture to be displayed.

[0071] Step S103: Convert the ArrayBuffer object into a Uint8ClampedArray object.

[0072] In this embodiment, the Uint8ClampedArray object is one of the TypedArray views, which defines a one-dimensional array and stores data in an 8-bit integer format. Therefore, the embodiment of the present application can convert the ArrayBuffer object into a Uint8ClampedArray object and perform read and write operations.

[0073] Step S104: Convert the Uint8ClampedArray object into an ImageData object.

[0074] In this embodiment, the ImageData object is used to draw an image on a web page. It has three parameters: array, width, and height. The embodiment of the present application can determine the content, width, and height of the image to be drawn on the web page based on the image pixel data, width, and height parameters in the array parameter.

[0075] When converting a Uint8ClampedArray object to an ImageData object, the array parameter is the Uint8ClampedArray object, and the width and height parameters are respectively the width and the height of the image acquired in step S101.

[0076] Step S105: Create a canvas element, and draw the canvas in the canvas element according to the ImageData object.

[0077] In some embodiments, the webpage video playing method further includes the following steps:

[0078] Step S106: Send a connection request and identification parameters.

[0079] In this embodiment, the connection request is a HyperText Transfer Protocol Request (HTTP Request) for establishing a connection between the electronic device 400 and the external identification system 300 ( Figure 5 The external recognition system 300 is used to process the image acquired in step S101 and obtain additional information, wherein the additional information is information including a size frame diagram and position coordinates of the object. The recognition parameter is used to indicate the type and size of the object recognized by the external recognition system 300.

[0080] Step S107: Obtain image additional information.

[0081] In this embodiment, the external recognition system 300 transmits the additional information of the image through server-sent events (SSE). SSE can enable the external recognition system 300 to push data and maintain connection with the electronic device 400, and the external recognition system 300 can always send new data. The additional information includes the size frame diagram and position coordinates of the object.

[0082] The additional information received by the electronic device 400 through SSE is in the JSON (JavaScript Object Notation) format. JSON is a lightweight data storage format that is independent of the development language. Using the JSON format to transmit additional information can reduce the resource usage of the server and the client, and reduce the amount of stored data on the server and the client.

[0083] In one embodiment, the electronic device 400 using the web page video playback method may include one or more control buttons with specific names, and may also include one or more monitors, wherein the specific names may be defined in advance to represent different control functions, the control buttons are used to control the working status of the electronic device 400, and the monitors are used to monitor the working status of the electronic device 400.

[0084] Optionally, the embodiment of the present application can establish an SSE connection with the external camera system 200 when the user clicks a button named “Play”.

[0085] Optionally, the embodiment of the present application can establish an SSE connection with the external camera system 200 when the monitor detects that the automatic play function is turned on.

[0086] Optionally, the embodiment of the present application can pause the playback and disconnect the SSE connection with the external camera system 200 when the monitor detects that the web page is switched.

[0087] Optionally, the embodiment of the present application can pause the playback and disconnect the SSE connection with the external camera system 200 when the monitor detects that there is no picture to be displayed.

[0088] Step S108: Analyze the image additional information.

[0089] In this embodiment, when the electronic device 400 obtains the JSON containing the additional information, it needs to parse it and convert it into a JSON object to obtain the information contained therein and use this information on the web page.

[0090] In one implementation, the embodiment of the present application may use a JSON parser to parse JSON, or may call a function to parse JSON.

[0091] Step S109: Select a portion of the parsed additional information and convert it into displayable additional information.

[0092] In this embodiment, the embodiment of the present application can select to convert a portion of the additional information after parsing into the displayable additional information. Wherein, the portion of the additional information can include the size frame diagram and position coordinate information of the object, and the displayable additional information is the additional information for displaying on the web page.

[0093] In one embodiment, the electronic device 400 that applies the web page video playback method may include one or more control buttons with specific names, wherein the specific names can be defined in advance to represent different control functions, and the control buttons are used to select additional information of the parsed part and display it on the web page.

[0094] Optionally, in an embodiment of the present application, when a user clicks a button named "Show Size", the user may choose to convert the additional information including the object size box diagram into displayable additional information for display on a web page.

[0095] Optionally, the embodiment of the present application may not convert the additional information into displayable additional information when the user clicks a button named “Do not display”.

[0096] Step S110: Create a block element and write displayable additional information into the block element.

[0097] In this embodiment, the block element is a div element in HTML, which is used to set a block on a web page and write data into the block.

[0098] Step S111: page layout and element stacking.

[0099] In this embodiment, Cascading Style Sheets (CSS) can be used to layout elements in HTML and to stack elements in HTML. The layout method may include but is not limited to display, hide, rotate, enlarge, and translate.

[0100] It is understandable that CSS can layout and stack the canvas elements and the block elements. The CSS can define the relative position, size and stacking order of HTML elements on a web page.

[0101] The elements in HTML have a z-index attribute, which is used to indicate the stacking order of the elements. It is understood that the CSS can determine the stacking order of the elements through the z-index attribute. The larger the z-index attribute value of an element, the higher the stacking order of the element. For example, if the canvas element is to be stacked at the bottom layer, the attribute z-index can be defined as 0 in the canvas element through CSS, while the attribute z-index of other elements can be defined as a positive integer.

[0102] In one embodiment, the electronic device 400 using the web video playback method may include one or more control buttons with specific names, a player periphery, and error information, wherein the specific name may be defined in advance to represent different control functions, the control button is used to control the way in which the CSS typesets and stacks the elements in the HTML, the player periphery is the outer frame of the web video playback area, and the error information is an error image or error additional information received by the web video playback device when a connection error occurs.

[0103] Preferably, the CSS can also layout and stack the control buttons, the player periphery and the error information.

[0104] Step S112: Display the video image and additional information.

[0105] In this embodiment, the video screen is an image in the canvas element, and the additional information is the content in the block element.

[0106] See also Figure 2 , Figure 2 It is a schematic diagram of stacking elements in HTML through CSS, wherein the elements in HTML include control button 501, player periphery 502, canvas element 503 and block element 504.

[0107] When the order of stacking the elements in HTML through CSS is: the control button 501, the player periphery 502, the block element 504, and the canvas element 503, the user can intuitively see the video captured by the external camera system 200 and the additional information stacked thereon.

[0108] See also Figure 3a to Figure 3d , Figure 3a to Figure 3d It is a schematic diagram of the layout of elements in HTML by CSS, wherein the elements in HTML include a player periphery 502, a canvas element 503 and a block element 504.

[0109] like Figure 3aAs shown, the canvas element 503 is normally displayed within the player periphery 502 .

[0110] like Figure 3b As shown, when the user clicks the button named "Rotate" in the control button 501, CSS can define the canvas element 503 and the block element 504 to rotate and display within the player periphery 502. The rotation direction and angle can be defined in advance or defined using other control methods.

[0111] like Figure 3c As shown, when the user clicks the button named "Zoom in" in the control button 501, CSS can define the canvas element 503 and the block element 504 to be enlarged and displayed within the player periphery 502. The rotation direction and angle can be defined in advance or defined using other control methods.

[0112] like Figure 3d As shown, when the user clicks the button named "Pan" in the control button 501, CSS can define the canvas element 503 and the block element 504 to be displayed in a panning manner within the player periphery 502. The direction and distance of the panning can be defined in advance or defined using other control methods.

[0113] See also Figures 4a to 4c , Figures 4a to 4c The schematic diagram of displaying video images and additional information is shown in FIG.

[0114] Figure 4a The video picture is a video of the integrated circuit chip taken by the external camera system 200.

[0115] Figure 4b The additional information is shown. In this case, the additional information is the size, outer frame and position information of the integrated circuit chip.

[0116] Figure 4c The figure shows a schematic diagram of display after the video image and the additional information are stacked by CSS. Thus, the user can intuitively see the video captured by the external camera system 200 and the additional information stacked thereon, so as to perform cropping, sampling and defect analysis on the integrated circuit chip image in the video.

[0117] It is understandable that when the video image is not clear, it may be necessary to check whether the lens of the external camera system 200 is correct and clearly focused on the integrated circuit chip. Therefore, the web video playback method provided by the present application can assist production personnel in calibrating the lens of the external camera system 200.

[0118] See also Figure 5 , Figure 5 is a schematic diagram of a web video playback device 100 provided in an embodiment of the present application.

[0119] In this embodiment, the web video playback device 100 may include multiple functional modules composed of program code segments. The program code of each program segment in the web video playback device 100 may be stored in the memory of the electronic device 400 and executed by the at least one processor to perform the web video playback function.

[0120] In this embodiment, the web video playback device 100 can be divided into multiple functional modules according to the functions it performs. The functional modules may include: an image processing module 10 , an information processing module 40 , a cascading style module 102 and a display module 103 .

[0121] The module in this application refers to a series of computer program segments that can be executed by at least one processor and can complete fixed functions, which are stored in a memory. In this embodiment, the functions of each module will be described in detail in subsequent embodiments.

[0122] The image processing module 10 is used to obtain image information, create a canvas element according to the image information, and draw the canvas in the canvas element according to the image information; wherein the image information includes image pixel information and image size information.

[0123] The image processing module 10 is further configured to convert the image information from the ArrayBuffer format to the Uint8ClampedArray format according to the image pixel information, and convert the image information from the Uint8ClampedArray to the ImageData format according to the image size information.

[0124] In this embodiment, the image is a frame of image in a video captured by an external camera system 200, and the size is the width and height of the image, wherein the external camera system 200 is used to capture objects that need to be sampled and defect marked.

[0125] In one implementation, the external camera system 200 may be one or more cameras, or one or more other video acquisition devices.

[0126] In one embodiment, the image processing module 10 is connected to the external camera system 200 via a network, and the image processing module 10 can obtain the image size information from the external camera system 200 via an application programming interface (API). APIs are some predefined functions that provide applications and developers with the ability to access a set of routines based on certain software or hardware without accessing source code. For example, the image size information of the external camera system 200 can be obtained via an API.

[0127] In this embodiment, the external camera system 200 transmits the pixel information of the image through a WebSocket connection, wherein WebSocket is a protocol for full-duplex communication on a single Transmission Control Protocol (TCP) connection. WebSocket allows the server to actively push data to the client, and a persistent connection can be created between the client and the server for bidirectional data transmission. The pixel information is a collection of RGB values ​​and transparency values ​​for each pixel in the image, and its format is an ArrayBuffer object. Among them, the ArrayBuffer object is a continuous memory area that can store binary data, and the data therein cannot be read and written directly, and can only be read and written through a TypedArray view or a DataView view. The TypedArray is a typed array that defines an array-like view of an underlying binary data buffer (binary databuffer) for reading and writing data in an ArrayBuffer object. DataView is a bottom-level interface for reading and writing multiple numeric types from an ArrayBuffer object.

[0128] In one embodiment, the electronic device 400 using the web video playback mode may include one or more control buttons with specific names (not shown in the figure), and may also include one or more monitors (not shown in the figure), wherein the specific names may be defined in advance to represent different control functions, the control buttons are used to control the working state of the electronic device 400, and the monitors are used to monitor the working state of the electronic device 400. For example, when the user clicks the play button, the electronic device 400 may start playing the web video.

[0129] Optionally, when the user clicks the play button, the image processing module 10 may establish a WebSocket connection with the external camera system 200 .

[0130] Optionally, when the monitor detects that the automatic play function is turned on, the image processing module 10 may establish a WebSocket connection with the external camera system 200 .

[0131] Optionally, when the monitor detects that the web page is switched, the image processing module 10 may pause the playback and disconnect the WebSocket connection between the video synchronization module 30 and the external camera system 200 .

[0132] Optionally, when the monitor detects that there is no picture display, the image processing module 10 can pause the playback and disconnect the WebSocket connection with the external camera system 200.

[0133] In this embodiment, the Uint8ClampedArray object is one of the TypedArray views, which defines a one-dimensional array and stores data in an 8-bit integer format. Therefore, the image processing module 10 can convert the ArrayBuffer object into a Uint8ClampedArray object and perform read and write operations.

[0134] In this embodiment, the ImageData object is used to draw an image on a web page. It has three parameters: array, width, and height. The content, width, and height of the image to be drawn on the web page can be determined based on the image pixel data in the array parameter, and the width and height parameters.

[0135] When the image processing module 10 converts the Uint8ClampedArray object into an ImageData object, the array parameter is the Uint8ClampedArray object, and the width and height parameters are respectively the width and the height of the image acquired by the image processing module 10 .

[0136] In this embodiment, the canvas element is a canvas element in HyperText Markup Language (HTML), and the canvas element is used to read the image pixel data in the ImageData object and draw it on the canvas in the canvas element. For example, if the ImageData object contains pixel data of a red rectangle with a width x height of 100x100 pixels, the canvas element can draw a red rectangle with a width x height of 100x100 pixels on the canvas.

[0137] The information processing module 40 is used to obtain additional information, create a block element according to the additional information, and write the additional information into the block element;

[0138] The information processing module 40 is further used to parse the additional information and select a portion of the additional information to convert into displayable additional information.

[0139] In this embodiment, the information processing module 40 sends a connection request to the external recognition system 300, and the connection request is a HyperText Transfer Protocol Request (HTTP Request), which is used for the information processing module 40 to establish a network connection with the external recognition system 300. The external recognition system 300 is used to perform data processing on the image obtained by the image processing module 10 and obtain additional information, and the additional information is information including the size frame diagram and position coordinates of the object. The recognition parameter is used to indicate the type and size of the object recognized by the external recognition system 300.

[0140] In this embodiment, the external recognition system 300 transmits the additional information of the image to the information processing module 40 through server-sent events (SSE). SSE can enable the external recognition system 300 to push data to the information processing module 40 and maintain connection with the information processing module 40, and the external recognition system 300 can always send new data to the information processing module 40. The additional information includes the size frame diagram and position coordinates of the object.

[0141] The additional information received by the information processing module 40 through SSE is in the JSON (JavaScript Object Notation) format. JSON is a lightweight data storage format that is independent of the development language. Using the JSON format to transmit additional information can reduce the resource usage of the server and the client, and reduce the amount of stored data on the server and the client.

[0142] In one embodiment, the electronic device 400 using the web video playback mode may include one or more control buttons with specific names (not shown in the figure), and may also include one or more monitors (not shown in the figure), wherein the specific names may be defined in advance to represent different control functions, the control buttons are used to control the working state of the electronic device 400, and the monitors are used to monitor the working state of the electronic device 400. For example, when the user clicks the play button, the electronic device 400 may start playing the web video.

[0143] Optionally, when the user clicks a button named “Play”, the information processing module 40 may establish an SSE connection with the external recognition system 300 .

[0144] Optionally, when the monitor detects that the automatic play function is turned on, the information processing module 40 can establish an SSE connection with the external identification system 300 .

[0145] Optionally, when the monitor detects that the web page is switched, the information processing module 40 can pause the playback and disconnect the SSE connection with the external identification system 300 .

[0146] Optionally, when the monitor detects that there is no picture display, the information processing module 40 can pause the playback and disconnect the SSE connection with the external recognition system 300.

[0147] In this embodiment, when the information processing module 40 obtains the JSON containing the additional information, the information processing module 40 parses it and converts it into a JSON object to obtain the information contained therein, and uses the information on the web page.

[0148] In one implementation, the information processing module 40 may use a JSON parser to parse JSON, or may call a function to parse JSON.

[0149] In this embodiment, the information processing module 40 can select to convert a portion of the additional information after parsing into the displayable additional information. Wherein, the portion of the additional information can include the size frame diagram and position coordinate information of the object, and the displayable additional information is the additional information for displaying on the web page.

[0150] In one embodiment, the electronic device 400 using the web page video playback method may include one or more control buttons with specific names (not shown in the figure), wherein the specific names may be defined in advance to represent different control functions, and the control buttons are used by the information processing module 40 to select a portion of additional information after parsing and to display it on the web page.

[0151] Optionally, when the user clicks the "show size" button, the information processing module 40 may choose to convert the additional information including the object size box diagram into displayable additional information for display on the web page.

[0152] Optionally, when the user clicks the “Do Not Display” button, the information processing module 40 may not convert the additional information into displayable additional information.

[0153] In this embodiment, the block element is a div element in HTML, which is used to set a block on a web page and write data into the block.

[0154] The cascading style module 102 is used for page layout and element stacking.

[0155] In this embodiment, Cascading Style Sheets (CSS) are used to layout elements in HTML and to stack elements in HTML. The layout methods include but are not limited to display, hide, rotate, enlarge, and translate.

[0156] It is understandable that the cascading style module 102 can layout and stack the canvas element and the block element through CSS. The CSS can define the relative position, size and stacking order of HTML elements on the web page.

[0157] The elements in HTML have a z-index attribute, which is used to indicate the stacking order of the elements. It is understood that CSS can determine the stacking order of the elements through the z-index attribute. The larger the z-index attribute value of an element, the higher the stacking order of the element. For example, if you want to stack the canvas element at the bottom layer, you can define the attribute z-index of the canvas element as 0 through CSS, and define the attribute z-index of other elements as positive integers.

[0158] In one embodiment, a web video playback device that applies the web video playback method may also include one or more control buttons with specific names, a player periphery and error information (not shown in the figure), wherein the specific name can be defined in advance to represent different control functions, the control button is used to control the way in which the cascading style module 102 typesets and stacks elements in the dormitory HTML, the player periphery is the outer frame of the web video playback area, and the error information is an error image or error additional information received by the web video playback device when a connection error occurs.

[0159] Preferably, the cascading style module 102 can also layout and stack the control buttons, the player periphery and the error information.

[0160] The display module 103 is used to display the video image and additional information.

[0161] In this embodiment, the display module 103 displays the elements in the HTML after being typeset and stacked by the cascading style module 102 .

[0162] See also Figure 6 , Figure 6 A schematic diagram of the structure of an electronic device 400 provided in an embodiment of the present application.

[0163] In a preferred embodiment of the present application, the electronic device 400 includes a memory 401 , at least one processor 402 , at least one communication bus 403 and a communication interface 404 .

[0164] Those skilled in the art should understand that Figure 6 The structure of the electronic device 400 shown does not constitute a limitation of the embodiments of the present application, and can be either a bus structure or a star structure. The electronic device 400 can also include more or less other hardware or software than shown in the figure, or a different component arrangement.

[0165] In some embodiments, the electronic device 400 is an electronic device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application-specific integrated circuits, programmable gate arrays, digital processors, and embedded devices. The electronic device 400 may also include client devices, which include but are not limited to any electronic product that can interact with a client through a keyboard, mouse, remote control, touchpad, or voice-controlled device, such as a personal computer, tablet computer, smart phone, digital camera, etc.

[0166] It should be noted that the electronic device 400 is only an example, and other existing or future electronic products that are suitable for the present application should also be included in the protection scope of the present application and included here by reference.

[0167] In some embodiments, the memory 401 is used to store program codes and various data, such as the web video playback device 100 installed in the electronic device 400, and to achieve high-speed and automatic access to programs or data during the operation of the electronic device 400. The memory 401 includes a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), a one-time programmable read-only memory (OTPROM), an electronically erasable rewritable read-only memory (EEPROM), a compact disc (CD-ROM) or other optical disc storage, magnetic disk storage, magnetic tape storage, or any other computer-readable medium that can be used to carry or store data.

[0168] In some embodiments, the at least one processor 402 may be composed of an integrated circuit, for example, a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and combinations of various control chips, etc. The at least one processor 402 is the control core (Control Unit) of the electronic device 400, and uses various interfaces and lines to connect various components of the entire electronic device 400, and executes various functions and processes data of the electronic device 400 by running or executing programs or modules stored in the memory 401, and calling data stored in the memory 401.

[0169] In some embodiments, the at least one communication bus 403 is configured to implement connection and communication between the memory 401 and the at least one processor 402, etc.

[0170] In some embodiments, the communication interface 404 uses any transceiver-like device for communicating with other devices or communication networks, such as Ethernet, Radio Access Network (RAN), Wireless Local Area Networks (WLAN), etc.

[0171] Although not shown, the electronic device 400 may also include a power source (such as a battery) for supplying power to each component. Optionally, the power source may be logically connected to the at least one processor 402 through a power management device, so that the power management device can manage charging, discharging, and power consumption. The power source may also include one or more DC or AC power sources, recharging devices, power failure detection circuits, power converters or inverters, power status indicators, and other arbitrary components. The electronic device 400 may also include a variety of sensors, Bluetooth modules, etc., which will not be described in detail here.

[0172] It should be understood that the embodiment is for illustration only and the scope of the patent application is not limited by this structure.

[0173] The above-mentioned integrated unit implemented in the form of a software function module can be stored in a computer-readable storage medium. The above-mentioned software function module is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, electronic device, or network device, etc.) or a processor to execute part of the method described in each embodiment of the present application.

[0174] In a further embodiment, in combination Figure 5 The at least one processor 402 can execute the operating device of the electronic device 400 and various installed application programs (such as the web video playback device 100), program codes, etc., for example, the above-mentioned modules.

[0175] The memory 401 stores program codes, and the at least one processor 402 can call the program codes stored in the memory 401 to execute related functions. For example, Figure 5 The modules described in the embodiment are program codes stored in the memory 401 and are executed by the at least one processor 402, thereby realizing the functions of the modules to achieve the purpose of web page video playback.

[0176] In one embodiment of the present application, the memory 401 stores a plurality of instructions, and the plurality of instructions are executed by the at least one processor 402 to implement a function of playing a web page video.

[0177] Specifically, the specific implementation method of the at least one processor 402 for the above instructions can refer to Figure 1 The description of the relevant steps in the corresponding embodiments will not be repeated here.

[0178] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only illustrative, for example, the division of the modules is only a logical function division, and there may be other division methods in actual implementation.

[0179] Furthermore, the computer-readable storage medium may be non-volatile or volatile.

[0180] Furthermore, the computer-readable storage medium mainly includes a program storage area and a data storage area, wherein the program storage area can store an operating system, an application required for at least one function, etc.; the data storage area can store data created according to the use of the blockchain node, etc.

[0181] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical units, and may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0182] In addition, each functional module in each embodiment of the present application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of hardware plus software functional modules.

[0183] Those skilled in the art should recognize that the above embodiments are only used to illustrate the present application and are not intended to be limiting of the present application. As long as they are within the spirit and scope of the present application, appropriate changes and modifications to the above embodiments are within the scope of protection claimed in the present application.

Claims

1. A web page video playback method, characterized in that: include: Acquire image information, create a canvas element according to the image information, and draw the canvas in the canvas element according to the image information; Acquire additional information, create a block element according to the additional information, and write the additional information into the block element, wherein the additional information is information including a size frame diagram and position coordinates of the object; Arrange and stack the canvas element and the block element; The canvas element and the block element are displayed.

2. The webpage video playing method according to claim 1, wherein: The image information includes image pixel information and image size information.

3. The webpage video playing method according to claim 2, characterized in that: The method further comprises: The image information is converted from a first format to a second format according to the image pixel information.

4. The webpage video playing method according to claim 3, characterized in that: The method further comprises: The image information is converted from the second format to a third format according to the image size information.

5. The webpage video playing method according to claim 4, characterized in that: The first format is an ArrayBuffer object, the second format is a Uint8ClampedArray object, and the third format is an ImageData object.

6. The webpage video playing method according to claim 1, characterized in that: The method further comprises: Parse additional information; A portion of the additional information is selected and converted into the displayable additional information.

7. A web page video playback device, characterized in that: include: An image processing module, used for acquiring image information, creating a canvas element according to the image information, and drawing a canvas in the canvas element according to the image information; An information processing module, used for acquiring additional information, creating a block element according to the additional information, and writing the additional information into the block element, wherein the additional information is information including a size frame diagram and position coordinates of an object; A cascading style module, used for typeset and stacking the canvas element and the block element; The display module is used to display the canvas element and the block element.

8. The webpage video playback device according to claim 7, wherein: The image information includes image pixel information and image size information.

9. An electronic device, characterized in that: include: Memory for storing computer programs; A processor, configured to execute the computer program stored in the memory; when the computer program is executed, the processor is configured to execute the method according to any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes computer instructions, and when the computer instructions are executed on an electronic device, the electronic device executes the method according to any one of claims 1 to 6.

Images