Page display method and device, electronic equipment and readable storage medium

Abstract

The invention provides a display method and device in a page, electronic equipment and a readable storage medium, and relates to the technical field of computers. The method comprises the following steps: creating a stage object in an initialization stage of a page; creating a video object, and determining a network address of the target video as a data source of the video object; a canvas object is created, and the canvas object is a sub-object of the stage object; creating a bitmap object, and determining the texture of the bitmap object according to the canvas object; adding the bitmap object as a background image of the stage object to the stage object; playing the target video, and intercepting video frame data for the target video every target time interval during the playing period of the target video; and drawing the intercepted video frame data in a canvas object, so that a video frame picture obtained by drawing is displayed in a page. According to the method and the device, the performance consumption of the page dynamic background can be reduced, low-performance equipment is supported, long-period dynamic background playing is supported, and the content richness of the page background is improved.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method, device, electronic device and readable storage medium for displaying a page. Background Art

[0002] Implementing a dynamic background in a page can enhance the expressiveness of the page background and enrich the display effect of the page. At present, the dynamic background in the page can be implemented by using frame animation technology or slow-motion animation technology. Among them, the frame animation technology creates a dynamic effect by continuously playing a series of image frames in a short period of time, and the slow-motion animation technology achieves a smooth animation effect by setting the starting state and the target state, and then automatically calculating the intermediate transition state.

[0003] However, frame animation technology or slow-motion animation technology have their own limitations when realizing dynamic background of the page, and it is difficult to take into account performance consumption, device support, long-term playback, etc. Summary of the invention

[0004] The present disclosure provides a method, device, electronic device and readable storage medium for displaying in a page to solve or at least partially solve the above-mentioned problems, as follows.

[0005] In a first aspect, the present disclosure provides a method for displaying a page, the method comprising:

[0006] In the initialization phase of the page, create the stage object;

[0007] Creating a video object, and determining the network address of the target video as the data source of the video object;

[0008] Creating a canvas object, wherein the canvas object is a child object of the stage object;

[0009] Creating a bitmap object, and determining the texture of the bitmap object according to the canvas object;

[0010] Adding the bitmap object to the stage object as a background image of the stage object;

[0011] After the page is loaded, the target video is played through the video object, and during the playing of the target video, video frame data for the target video is intercepted through the canvas object at every target time interval;

[0012] The captured video frame data is drawn so that the drawn video frame picture is displayed on the page.

[0013] In a second aspect, the present disclosure further provides a display device in a page, the device comprising:

[0014] The first creation module is used to create a stage object during the initialization phase of the page;

[0015] A second creation module is used to create a video object and determine the network address of the target video as the data source of the video object;

[0016] A third creation module, used for creating a bitmap object, and determining a texture of the bitmap object according to the canvas object;

[0017] A background adding module, used for adding the bitmap object to the stage object as the background image of the stage object;

[0018] A playback and capture module, used for playing the target video through the video object after the page is loaded, and capturing video frame data for the target video through the canvas object at target time intervals during the playback of the target video;

[0019] The drawing and display module is used to draw the captured video frame data so that the drawn video frame picture is displayed on the page.

[0020] In a third aspect, the present disclosure further provides an electronic device, comprising: a processor, a memory, and computer program instructions stored in the memory and executable on the processor;

[0021] When the processor executes the computer program instructions, the display method in the page described in the first aspect above is implemented.

[0022] In a fourth aspect, the present disclosure further provides a computer-readable storage medium, in which computer program instructions are stored. When the computer program instructions are executed by a processor, they are used to implement the display method in the page described in the first aspect above.

[0023] The exemplary embodiments of the present disclosure have the following beneficial effects:

[0024] The display method in the page provided by the present disclosure, in the initialization stage of the page, creates a stage object; creates a video object, and determines the network address of the target video as the data source of the video object; creates a canvas object, wherein the canvas object is a child object of the stage object; creates a bitmap object, and determines the texture of the bitmap object according to the canvas object; adds the bitmap object as the background image of the stage object to the stage object; after the page is loaded, the target video is played through the video object, and during the playback of the target video, the video frame data is intercepted for the target video through the canvas object at every target time interval; the intercepted video frame data is drawn so that the drawn video frame picture is displayed in the page. In the present disclosure, the video frame data of the target video can be intercepted through the canvas object at every certain time interval, and the video frame data intercepted through the canvas object is drawn by drawing the bitmap texture, and presented as the background of the page, thereby realizing the dynamic background of the page. The present disclosure can reduce the performance consumption of the dynamic background of the page, so that the dynamic background of the page can support low-performance devices, and can support dynamic background playback for a longer period of time, and improve the content richness of the page background. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 is a flow chart of a display method in a page provided by one of the embodiments of the present disclosure;

[0026] Figure 2 is a block diagram of a display device in a page provided by one of the embodiments of the present disclosure;

[0027] Figure 3 It is a logical structure diagram of an electronic device for implementing display in a page provided by one of the embodiments of the present disclosure. DETAILED DESCRIPTION

[0028] In order to make the purpose, technical scheme and advantages of the embodiments of the present disclosure clearer, the technical scheme in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all of the embodiments. The components of the embodiments of the present disclosure generally described and shown in the drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure provided in the drawings is not intended to limit the scope of the present disclosure for protection, but merely represents the selected embodiments of the present disclosure. Based on the embodiments of the present disclosure, each other embodiment obtained by those skilled in the art without making creative work belongs to the scope of protection of the present disclosure.

[0029] The terms "a", "an", "the" and "said" are used in this specification to indicate the presence of one or more elements / components / etc.; the terms "including" and "having" are used to express an open-ended inclusion and mean that additional elements / components / etc. may exist in addition to the listed elements / components / etc.; the terms "first" and "second" etc. are used only as labels and are not intended to limit the quantity of their objects.

[0030] It should be understood that in the embodiments of the present disclosure, "at least one" means one or more, and "more than one" means two or more. "And / or" is merely a way to describe the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the previous and subsequent associated objects are in an "or" relationship. "Including A, B and / or C" means including any one, any two, or any three of A, B, and C.

[0031] It should be understood that in the embodiments of the present disclosure, "B corresponding to A", "B corresponding to A", "A corresponds to B", or "B corresponds to A" means that B is associated with A, and B can be determined according to A. Determining B according to A does not mean that B is determined only according to A, and B can also be determined according to A and / or other information.

[0032] The execution subject of the display method in the page in one of the embodiments of the present disclosure may be a terminal device or a server, and the terminal device may be a desktop computer, a laptop computer, a tablet computer, a mobile phone, etc., or other electronic devices, which are not specifically limited in the present disclosure. The server is used to provide background services for the client of the application in the terminal device. For example, the server may be the background server of the above-mentioned application. The server may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms, which are not specifically limited in the present disclosure.

[0033] Before describing the embodiments of the present disclosure in detail, the related art is firstly further introduced.

[0034] During page development, there are three options for implementing dynamic backgrounds:

[0035] Solution 1: Frame animation, which creates animation effects by playing a series of image frames continuously in a short period of time.

[0036] The advantages of Option 1 include:

[0037] Simple and easy to implement: frame animation can usually be achieved using a series of pictures or sprites.

[0038] Flexible control: The content and display time of each frame can be precisely controlled to achieve detailed animation effects.

[0039] Save performance: Compared with complex animation rendering, frame animation usually has lower performance requirements and can run on devices with lower configurations.

[0040] The disadvantages of option 1 include:

[0041] Space occupied: If the animation is long or has a high frame rate, it may require a large number of image resources, which will take up more storage space.

[0042] Resolution adaptation: You need to consider the adaptation issues under different device resolutions to ensure the consistency of animation effects.

[0043] High production cost: Compared with real-time rendering animation, frame animation production usually requires more static image resources and higher production costs.

[0044] Short playback time: Combining the above points, while controlling the space occupied and production costs, the number of frames cannot be too many, so the playback time will not be very long.

[0045] Solution 2: Eased-motion animation is a technique that achieves a smooth animation effect by setting the starting state and target state, and then automatically calculating the intermediate transition state.

[0046] The advantages of Option 2 include:

[0047] Natural and smooth: Slow-motion animation can achieve a more natural and smooth transition effect, improving user experience.

[0048] Strong adaptability: It can adapt to different screen sizes and devices to maintain the consistency of animation effects.

[0049] Reduced resource usage: Compared to frame animation, ease-of-motion animation usually requires fewer resources because it is calculated.

[0050] The disadvantages of option 2 include:

[0051] High complexity: Compared with simple frame animation, implementing slow-motion animation requires more code and calculation.

[0052] High performance requirements: Complex easing animations may have certain requirements on device performance, especially on some low-performance devices, they may not perform well.

[0053] Simple expression: It only modifies the limited state of elements and cannot achieve complex transformations like playing a grand dynamic background.

[0054] Solution 3: Switch static images, that is, set a static background image and switch the background image when it is needed.

[0055] The advantages of Option 3 include:

[0056] Simple and easy to implement: select several static images and switch the background image by switching the static images.

[0057] The disadvantages of option 3 include:

[0058] Poor expressiveness: Static images do not express rich content.

[0059] Unsmooth playback: The switching of static image content is abrupt and the content transition is not smooth.

[0060] The above-mentioned related technologies have their own limitations when realizing dynamic background of the page. Therefore, it is difficult to take into account performance consumption, device support, long-term playback, fluency, etc., which may easily lead to problems such as web page freeze, device heating, and screen distortion.

[0061] Figure 1 A method for displaying a page provided by one embodiment of the present disclosure is shown. Figure 1 As shown, the method includes the following steps S101 to S107.

[0062] Step S101: In the initialization phase of the page, a stage object is created.

[0063] In one of the optional embodiments of the present disclosure, the display method in the page provided by the present disclosure can be applied to web applications developed based on HTML5 technology and animation applications supporting bitmap objects, wherein the animation software supporting bitmap objects includes Adobe Animate, Toon Boom Harmony, TVPaintAnimation and Moho Pro. Accordingly, the page can include a page developed based on HTML5 technology and a page in an animation application supporting bitmap objects.

[0064] In the initialization phase of the page, you can create a stage object (i.e., stage object). The Stage object is the top-level object of the page and is responsible for managing all display objects (such as graphics and pictures) on the canvas. The Stage object is a special Container that encapsulates the canvas object. Stage contains all Canvas elements and is the total container / root container / root display object of all canvas objects.

[0065] Optionally, you can also bind interactive events, such as click events, to the stage object so that users can interact with the stage object in the page.

[0066] Step S102: Create a video object, and determine the network address of the target video as the data source of the video object.

[0067] In this step, a video object (i.e., video object) can be created and related properties can be set, such as playsinline (the property value of playsinline can be set to true in the present disclosure to control the target video to be played inline on the page), loop, controls, preload, muted, autoplay, crossOrigin, etc., and the network address of the target video to be presented as the page background (i.e., the URL of the target video) is assigned to the video object, so that the network address of the target video can be used as the data source of the video object. Then, the target video can be loaded.

[0068] In one of the optional embodiments of the present disclosure, the network address of the target video can be determined as the data source of the video object in the following manner:

[0069] Determine the operating environment information of the page;

[0070] The network address of the target video corresponding to the operating environment information of the page is determined as the data source of the video object.

[0071] In this embodiment, optionally, the operating environment information of the page can be determined through the navigator.userAgent function, and the operating environment information of the page may include the browser information (such as browser type, etc.) running the page, device information (such as device type, etc.), operating system information (such as operating system type, etc.), etc.

[0072] In this embodiment, a corresponding video can be configured in advance for each operating environment, so that a corresponding video can be selected as a page background for the current operating environment of the page. In this way, different page backgrounds can be presented for different page operating environments, realizing personalized and flexible configuration of page backgrounds.

[0073] Step S103: creating a canvas object, wherein the canvas object is a child object of the stage object.

[0074] After the target video is loaded, a canvas object (i.e. canvas object) can be created.

[0075] The CanvasRenderingContext2D object (i.e., 2D drawing context object, also called 2D context object) in the canvas object can be used as a bridge to draw the video object data source to the page background. Because the video object will have a poor playback effect when directly played in an application (such as a game application), which can easily cause display abnormalities, the video frame data of the video object can be extracted through the cavans object and transmitted to the application.

[0076] Step S104: Create a bitmap object, and determine the texture of the bitmap object according to the canvas object.

[0077] In this step, a bitmap object (ie, a bitmap object) may be created, and the texture of the bitmap object may be determined according to the canvas object.

[0078] In one of the optional embodiments of the present disclosure, step S104 can be implemented by following steps S1041 to S1043:

[0079] Step S1041: Create a bitmap data object, and determine the canvas object as the data source of the bitmap data object.

[0080] Step S1042: Create a texture object, and determine the bitmap data object as the data source of the texture object.

[0081] Step S1043: Create a bitmap object, and determine the texture object as the texture of the bitmap object.

[0082] In this embodiment, before creating a bitmap object (i.e., a bitmap object), a bitmapdata object (i.e., a bitmap data object) needs to be created first. The bitmap object represents a bitmap, and the pixel information of the bitmap is stored in the bitmapdata object. The bitmap object can submit the pixel values ​​stored in the bitmapdata object for rendering, and then a bitmap can be rendered.

[0083] In this embodiment, the canvas object may be assigned to the bitmapdata object, so that the canvas object is used as the data source of the bitmapdata object.

[0084] Then, you can create a texture object (i.e., texture object) and assign the bitmapdata object to the texture object, thereby using the bitmapdata object as the data source of the texture object.

[0085] After the bitmapdata object and texture object of the bitmap are prepared, you can create a bitmap object and assign the texture object to the bitmap object, so that the texture object is used as the texture of the bitmap object. In this way, the canvas object can be used as the texture data source of the bitmap, and the image drawn by the canvas object is the texture of the bitmap.

[0086] Step S105: adding the bitmap object to the stage object as the background image of the stage object.

[0087] In this step, the bitmap object can be added to the stage object as the background image of the stage object, that is, the bitmap object is added to the bottom layer of the stage object.

[0088] Step S106: After the page is loaded, the target video is played through the video object, and during the playback of the target video, video frame data for the target video is captured through the canvas object at every target time interval.

[0089] After the page is loaded, the target video can be played through the video.play function of the video object. During the playback of the target video, video frame data can be captured for the target video through the canvas object at every target time interval.

[0090] In one of the optional embodiments of the present disclosure, the step of intercepting video frame data for a target video through a canvas object at every target time interval may be implemented by the following steps:

[0091] Through the timer function, video frame data is captured from the target video through the canvas object at every target time interval;

[0092] or,

[0093] The video frame data of the target video is captured through the canvas object at every target time interval by requesting the animation frame function.

[0094] In this embodiment, the target time interval for capturing video frame data may be controlled by a timer function or a request animation frame function.

[0095] Optionally, the timer function can be a setTimeout function or a setInterval function.

[0096] Optionally, the request animation frame function may be a requestAnimationFrame function. Among them, the requestAnimationFrame function may call a callback function within the refresh frequency of the browser, so as to ensure the smoothness of the playback of a series of pictures and avoid frame drops and freezes. The requestAnimationFrame function achieves smooth playback of a series of pictures by calling a callback function within the refresh frequency of the browser (in the disclosed embodiment, the callback function is a process of intercepting video frame data for a target video through a canvas object). Therefore, in the step of intercepting video frame data for a target video through a canvas object at every target time interval through the requestAnimationFrame function, the target time interval is the time interval for refreshing the browser running the page.

[0097] In one of the optional embodiments of the present disclosure, the step of intercepting video frame data for a target video through a canvas object can be implemented by the following steps:

[0098] Create a 2D drawing context object, where the 2D drawing context object is a child object of the canvas object;

[0099] The drawImage function provided by the 2D drawing context object is used to capture video frame data for the target video.

[0100] In this embodiment, the video frame data of the target video can be intercepted by using the drawImage function provided by the CanvasRenderingContext2D object in the canvas object.

[0101] Step S107: drawing the captured video frame data so that the drawn video frame image is displayed on the page.

[0102] In this step, the video frame data captured by the canvas object can be drawn, that is, the texture of the bitmap object can be drawn, so that the drawn video frame picture can be displayed in the page.

[0103] In an optional embodiment, the drawing frequency may be appropriately reduced to save performance, so that the target video can be played smoothly as a background in the page.

[0104] In the present disclosure, video frame data of the target video can be intercepted through the canvas object at regular time intervals and given to the bitmapdata object as the data source of the bitmap texture, so that the video frame data intercepted through the canvas object can be drawn by drawing the bitmap texture and presented as the background of the page, thereby realizing the dynamic background of the page.

[0105] In one of the optional embodiments of the present disclosure, in the display method in the page, the drawing size and drawing position of the target video can also be determined; according to the drawing size and drawing position, the size and position of the canvas object and the size and position of the bitmap object are set.

[0106] In this embodiment, the drawing size and drawing position of the target video on the screen can be determined, and then after the canvas object is created, the size and position of the canvas object are set according to the drawing size and drawing position, and after the bitmap object is created, the size and position of the bitmap object are set according to the drawing size and drawing position, so that the drawn video frame is presented on the screen with a size and position that adapts to the background requirements.

[0107] In an optional implementation, the step of setting the size and position of the canvas object and the size and position of the bitmap object according to the drawing size and the drawing position may be implemented in the following manner:

[0108] Set the size of the canvas object to the drawing size, and set the position of the canvas object to the drawing position;

[0109] Set the size of the bitmap object to the drawing size, and set the position of the bitmap object to the drawing position.

[0110] In this embodiment, the size of the canvas object can be set to the drawing size of the target video, and the size of the canvas object can be set to the drawing position of the target video; the size of the bitmap object can be set to the drawing size of the target video, and the size of the bitmap object can be set to the drawing position of the target video. The drawing size and drawing position of the canvas object and the bitmap object are the same, so that the drawn video frame can fill the bitmap and be displayed in the center of the bitmap.

[0111] In an optional implementation manner, determining the drawing size of the target video may be achieved by the following steps:

[0112] Determining a first ratio of a width of the stage object to a width of the target video, and a second ratio of a height of the stage object to a height of the target video;

[0113] determining a maximum ratio between the first ratio and the second ratio;

[0114] The original size of the target video is scaled according to the maximum ratio to obtain the drawing size of the target video.

[0115] In this embodiment, first, the width and height of the stage object (the stage object represents the stage element on the screen, and the performance of the stage element can be controlled by the stage object. The size of the stage element is also the size of the stage object, and the stage element is hereinafter referred to as stage) and the width and height of the target video can be obtained; then the scaling ratio for the target video is determined. In order to ensure that the target video can cover the entire stage, the ratio of the stage width to the video width and the ratio of the stage height to the video height are determined, and the maximum value of these two ratios is taken as the scaling ratio, wherein the stage is the area that the user can see; then, the original size of the target video is scaled using the scaling ratio, and the width obtained after the scaling is the drawing width of the target video, and the height obtained after the scaling is the drawing height of the target video. The size obtained based on the above scaling ratio is the rendering size (i.e., the drawing size) of the target video on the stage, and the rendering width of the target video on the stage is consistent with the width of the stage, or the rendering height of the target video on the stage is consistent with the height of the stage.

[0116] In an optional implementation manner, determining the drawing position of the target video may be achieved by the following steps:

[0117] The screen position corresponding to the area defined by the drawing size when centered on the stage object is determined to obtain the drawing position of the target video.

[0118] In this embodiment, the drawing size of the target video can define the size of an area on the screen. In order to display the target video in the center, the screen position corresponding to the area defined by the drawing size of the target video when it is centered on the stage can be determined, and the drawing position of the target video can be obtained. The area defined by the drawing size being centered on the stage means that the area defined by the drawing size is centered vertically and horizontally relative to the stage.

[0119] Exemplarily, the upper left corner of the screen is the origin of the coordinate system of the screen space. Assuming that the drawing width of the target video is consistent with the width of the stage, the coordinate value of the target video in the screen width direction can be obtained by aligning the area defined by the drawing size with the stage in the screen width direction; assuming that the drawing height of the target video is 10 and the height of the stage is 8, it means that the drawing height of the target video is higher than that of the stage. It is necessary to offset the area defined by the drawing size in the screen height direction so that the area defined by the drawing size is centered relative to the stage. The difference between the drawing height of the target video and the height of the stage is 2. The area defined by the drawing size can be offset upward in the screen height direction by half of the height difference, that is, offset upward in the screen height direction by 1, so that the area defined by the drawing size is centered on the stage. The screen position of the area defined by the drawing size at this time is the drawing position of the target video, that is, the rendering position of the target video.

[0120] Through the above implementation, the drawing size and drawing position of the target video on the stage can be determined, so that the target video can adapt to different screen sizes.

[0121] The display method in the page provided by the present disclosure, in the initialization stage of the page, creates a stage object; creates a video object, and determines the network address of the target video as the data source of the video object; creates a canvas object, wherein the canvas object is a child object of the stage object; creates a bitmap object, and determines the texture of the bitmap object according to the canvas object; adds the bitmap object as the background image of the stage object to the stage object; after the page is loaded, the target video is played through the video object, and during the playback of the target video, the video frame data is intercepted for the target video through the canvas object at every target time interval; the intercepted video frame data is drawn so that the drawn video frame picture is displayed in the page. In the present disclosure, the video frame data of the target video can be intercepted through the canvas object at every certain time interval, and the video frame data intercepted through the canvas object is drawn by drawing the bitmap texture, and presented as the background of the page, thereby realizing the dynamic background of the page. The present disclosure can reduce the performance consumption of the dynamic background of the page, so that the dynamic background of the page can support low-performance devices, and can support dynamic background playback for a longer period of time, and improve the content richness of the page background.

[0122] The present disclosure is compatible with the kernels of most mobile phone and PC browsers currently on the market, so that the page background can support video playback and realize a dynamic background.

[0123] In the past, the dynamic background of H5 (HTML5) games had a very short playback time of one cycle, usually no more than 10 seconds. If you want to support long-term dynamic background, either the resolution will drop significantly or the dynamic effect will freeze, which will cause problems such as H5 game freezes, device heating, and picture confusion. The present invention uses video as the video background player of the page, which can load and correctly decode the video data, and uses the canvas element as a bridge between the video data and the page bitmap texture. The video data is transmitted and drawn to the page through the canvas element at regular time intervals, which can effectively support the dynamic background of large-volume (less than 1G) videos to play smoothly for a long time in most devices, and supports relatively high-definition display.

[0124] Corresponding to the display method in a page provided by the embodiment of the present disclosure, the embodiment of the present disclosure also provides a display device in a page. Figure 2 As shown, the device 700 includes:

[0125] The first creation module 701 is used to create a stage object in the initialization phase of the page;

[0126] A second creation module 702, used to create a video object and determine the network address of the target video as the data source of the video object;

[0127] The third creation module 703 is used to create a canvas object, wherein the canvas object is a sub-object of the stage object;

[0128] A fourth creation module 704, used to create a bitmap object, and determine the texture of the bitmap object according to the canvas object;

[0129] A background adding module 705, used to add the bitmap object to the stage object as the background image of the stage object;

[0130] A playback interception module 706 is used to play the target video through the video object after the page is loaded, and to intercept video frame data for the target video through the canvas object at every target time interval during the playback of the target video;

[0131] The drawing and display module 707 is used to draw the captured video frame data so that the drawn video frame picture is displayed on the page.

[0132] In an optional implementation, the creating a bitmap object and determining the texture of the bitmap object according to the canvas object includes:

[0133] Creating a bitmap data object, and determining the canvas object as a data source of the bitmap data object;

[0134] Creating a texture object, and determining the bitmap data object as a data source of the texture object;

[0135] A bitmap object is created, and the texture object is determined as a texture of the bitmap object.

[0136] In an optional embodiment, the device is further used for:

[0137] Determining a drawing size and a drawing position of the target video;

[0138] The size and position of the canvas object and the size and position of the bitmap object are set according to the drawing size and the drawing position.

[0139] In an optional implementation manner, setting the size and position of the canvas object, and the size and position of the bitmap object according to the drawing size and the drawing position includes:

[0140] Setting the size of the canvas object as the drawing size, and setting the position of the canvas object as the drawing position;

[0141] The size of the bitmap object is set as the drawing size, and the position of the bitmap object is set as the drawing position.

[0142] In an optional implementation manner, determining the drawing size of the target video includes:

[0143] Determining a first ratio of a width of the stage object to a width of the target video, and a second ratio of a height of the stage object to a height of the target video;

[0144] determining a maximum ratio between the first ratio and the second ratio;

[0145] The original size of the target video is scaled according to the maximum ratio to obtain a drawing size of the target video.

[0146] In an optional implementation manner, determining a drawing position of the target video includes:

[0147] The screen position corresponding to the area defined by the drawing size when centered on the stage object is determined to obtain the drawing position of the target video.

[0148] In an optional implementation manner, determining the network address of the target video as the data source of the video object includes:

[0149] Determine the operating environment information of the page;

[0150] The network address of the target video corresponding to the operating environment information of the page is determined as the data source of the video object.

[0151] In an optional implementation, intercepting video frame data for the target video through the canvas object includes:

[0152] Creating a 2D drawing context object, wherein the 2D drawing context object is a child object of the canvas object;

[0153] The video frame data is intercepted for the target video through the drawImage function provided by the 2D drawing context object.

[0154] In an optional implementation, intercepting video frame data for the target video by using the canvas object at every target time interval includes:

[0155] Intercepting video frame data for the target video through the canvas object at target time intervals through a timer function;

[0156] or,

[0157] The video frame data for the target video is intercepted through the canvas object at every target time interval by requesting an animation frame function.

[0158] In an optional implementation, the page includes a page developed based on HTML5 technology.

[0159] The display device in the page provided by the present disclosure creates a stage object in the initialization stage of the page; creates a video object, and determines the network address of the target video as the data source of the video object; creates a canvas object, wherein the canvas object is a child object of the stage object; creates a bitmap object, and determines the texture of the bitmap object according to the canvas object; adds the bitmap object to the stage object as the background image of the stage object; after the page is loaded, the target video is played through the video object, and during the playback of the target video, the video frame data is intercepted for the target video through the canvas object at every target time interval; the intercepted video frame data is drawn so that the drawn video frame picture is displayed in the page. In the present disclosure, the video frame data of the target video can be intercepted through the canvas object at every certain time interval, and the video frame data intercepted through the canvas object is drawn by drawing the bitmap texture, and presented as the background of the page, thereby realizing the dynamic background of the page. The present disclosure can reduce the performance consumption of the dynamic background of the page, so that the dynamic background of the page can support low-performance devices, and can support the dynamic background playback of a longer period, and improve the content richness of the page background.

[0160] Next, an electronic device provided by an embodiment of the present disclosure is introduced. Figure 3 , Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure. The electronic device 800 may be equipped with a display device in a page described in an embodiment of the present disclosure to implement the functions in an embodiment of the present disclosure. Specifically, the electronic device 800 includes: a receiver 801, a transmitter 802, a processor 803, and a memory 804 (the number of processors 803 in the electronic device 800 may be one or more, Figure 3 In the example of FIG. 801 , the processor 803 may include an application processor 8031 ​​and a communication processor 8032. In some embodiments of the present disclosure, the receiver 801, the transmitter 802, the processor 803 and the memory 804 may be connected via a bus or other means.

[0161] The memory 804 may include a read-only memory and a random access memory, and provides instructions and data to the processor 803. A portion of the memory 804 may also include a non-volatile random access memory (NVRAM). The memory 804 stores processor and operation instructions, executable modules or data structures, or subsets thereof, or extended sets thereof, wherein the operation instructions may include various operation instructions for implementing various operations.

[0162] The processor 803 controls the operation of the execution device. In a specific application, the various components of the execution device are coupled together through a bus system, wherein the bus system includes not only a data bus but also a power bus, a control bus, and a status signal bus, etc. However, for the sake of clarity, various buses are referred to as bus systems in the figure.

[0163] The method disclosed in the above embodiment of the present disclosure can be applied to the processor 803, or implemented by the processor 803. The processor 803 can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the hardware integrated logic circuit or software instructions in the processor 803. The above processor 803 can be a general processor, a digital signal processor (digital signal processing, DSP), a microprocessor or a microcontroller, and can further include an application specific integrated circuit (application specific integrated circuit, ASIC), a field programmable gate array (field-programmable gate array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The processor 803 can implement or execute the methods, steps and logic block diagrams disclosed in the embodiment of the present disclosure. The general processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiment of the present disclosure can be directly embodied as a hardware decoding processor to be executed, or a combination of hardware and software modules in the decoding processor can be executed. The software module may be located in a storage medium mature in the art, such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory 804, and the processor 803 reads the information in the memory 804 and completes the steps of the above method in combination with its hardware.

[0164] The receiver 801 can be used to receive input digital or character information and generate signal input related to the relevant settings and function control of the execution device. The transmitter 802 can be used to output digital or character information through the first interface; the transmitter 802 can also be used to send instructions to the disk group through the first interface to modify the data in the disk group; the transmitter 802 can also include a display device such as a display screen.

[0165] In the embodiment of the present disclosure, the application processor 8031 ​​in the processor 803 is used to execute the display method in the page in the embodiment of the present disclosure. It should be noted that the specific manner in which the application processor 8031 ​​executes each step is based on the same concept as the various method embodiments in the present disclosure, and the technical effects brought by it are the same as the various method embodiments in the present disclosure. For specific contents, please refer to the description in the method embodiments shown in the above disclosure, and no further description will be given here.

[0166] The disclosed embodiment also provides a chip for executing instructions, which is used to execute the technical solution of the display method in the page in the above embodiment.

[0167] The embodiment of the present disclosure further provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions are executed on a processor, the processor executes the technical solution of the display method in the page in the above embodiment.

[0168] The embodiment of the present disclosure further provides a computer program product, including a computer program, which is used to execute the technical solution of the display method in the page in the above embodiment when the computer program is executed by a processor.

[0169] The computer readable storage medium mentioned above can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. The readable storage medium can be any available medium that can be accessed by a general or dedicated server.

[0170] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

[0171] Although the present disclosure is disclosed as above in the form of a preferred embodiment, it is not intended to limit the present disclosure. Any person skilled in the art may make possible changes and modifications without departing from the spirit and scope of the present disclosure. Therefore, the scope of protection of the present disclosure shall be based on the scope defined by the claims of the present disclosure.

Claims

1. A method for displaying a page, characterized in that: The method comprises: In the initialization phase of the page, create the stage object; Creating a video object, and determining the network address of the target video as the data source of the video object; Creating a canvas object, wherein the canvas object is a child object of the stage object; Creating a bitmap object, and determining the texture of the bitmap object according to the canvas object; Adding the bitmap object to the stage object as a background image of the stage object; After the page is loaded, the target video is played through the video object, and during the playing of the target video, video frame data for the target video is intercepted through the canvas object at every target time interval; The captured video frame data is drawn so that the drawn video frame picture is displayed on the page.

2. The method according to claim 1, characterized in that: The step of creating a bitmap object and determining a texture of the bitmap object according to the canvas object comprises: Creating a bitmap data object, and determining the canvas object as a data source of the bitmap data object; Creating a texture object, and determining the bitmap data object as a data source of the texture object; A bitmap object is created, and the texture object is determined as a texture of the bitmap object.

3. The method according to claim 1, characterized in that The method further comprises: Determining a drawing size and a drawing position of the target video; The size and position of the canvas object and the size and position of the bitmap object are set according to the drawing size and the drawing position.

4. The method according to claim 3, characterized in that The step of setting the size and position of the canvas object and the size and position of the bitmap object according to the drawing size and the drawing position includes: Setting the size of the canvas object as the drawing size, and setting the position of the canvas object as the drawing position; The size of the bitmap object is set as the drawing size, and the position of the bitmap object is set as the drawing position.

5. The method according to claim 3, characterized in that: Determining the drawing size of the target video includes: Determining a first ratio of a width of the stage object to a width of the target video, and a second ratio of a height of the stage object to a height of the target video; determining a maximum ratio between the first ratio and the second ratio; The original size of the target video is scaled according to the maximum ratio to obtain a drawing size of the target video.

6. The method according to claim 3, characterized in that: Determining a drawing position of the target video includes: The screen position corresponding to the area defined by the drawing size when centered on the stage object is determined to obtain the drawing position of the target video.

7. The method according to claim 1, characterized in that The step of determining the network address of the target video as the data source of the video object comprises: Determine the operating environment information of the page; The network address of the target video corresponding to the operating environment information of the page is determined as the data source of the video object.

8. The method according to claim 1, characterized in that The step of intercepting video frame data for the target video through the canvas object includes: Creating a 2D drawing context object, wherein the 2D drawing context object is a child object of the canvas object; The video frame data is intercepted for the target video through the drawImage function provided by the 2D drawing context object.

9. The method according to claim 1, characterized in that: The capturing of video frame data for the target video by using the canvas object at each target time interval includes: Intercepting video frame data for the target video through the canvas object at target time intervals through a timer function; or, The video frame data for the target video is intercepted through the canvas object at every target time interval by requesting an animation frame function.

10. The method according to claim 1, characterized in that The pages include pages developed based on HTML5 technology.

11. A display device in a page, characterized in that: The device comprises: The first creation module is used to create a stage object during the initialization phase of the page; A second creation module is used to create a video object and determine the network address of the target video as the data source of the video object; A third creation module is used to create a canvas object, wherein the canvas object is a sub-object of the stage object; A fourth creation module, used for creating a bitmap object, and determining a texture of the bitmap object according to the canvas object; A background adding module, used for adding the bitmap object to the stage object as the background image of the stage object; A playback and capture module, used for playing the target video through the video object after the page is loaded, and capturing video frame data for the target video through the canvas object at target time intervals during the playback of the target video; The drawing and display module is used to draw the captured video frame data so that the drawn video frame picture is displayed on the page.

12. An electronic device, characterized in that: include: A processor, a memory, and computer program instructions stored on the memory and executable on the processor; When the processor executes the computer program instructions, the method for displaying a page as described in any one of claims 1 to 10 is implemented.

13. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, they are used to implement the display method in a page as described in any one of claims 1 to 10 above.

Images