A method, apparatus, and device for partial zooming of video in a browser

Abstract

This specification provides a method, apparatus, and device for partial scaling of video in a browser. It relates to the field of video processing technology. The method includes: upon determining that a video exists on a target page, pushing a video scaling parameter setting plugin; receiving scaling parameters set by the user through the plugin; upon determining that the mouse has moved into the video, determining the relative position of the mouse within the video; determining the area of ​​the video to be scaled based on the relative position; and scaling the area to be scaled according to the scaling parameters. Based on the above method, partial scaling of video in a browser can be achieved simply and quickly while meeting users' personal habits and usage needs.

Description

Technical Field

[0001] This specification relates to the field of video processing technology, and in particular to a method, apparatus, and device for zooming in on a portion of a browser video. Background Technology

[0002] With the continuous development of internet technology, browsers have become increasingly feature-rich. Users can open browser pages to view news, watch videos, play web games, and shop online. Therefore, enabling partial zooming of images or video content on browser pages to allow users to view details and improve user experience is of great significance.

[0003] Existing methods can only achieve partial scaling of images or overall scaling of videos in a browser. They cannot easily and quickly achieve partial scaling of browser videos while meeting users' personal preferences and usage needs, making it impossible for users to view specific details of a video according to their personal preferences while watching the video.

[0004] There is currently no effective solution to the aforementioned technical problems. Summary of the Invention

[0005] This specification provides a method, apparatus, and device for partial scaling of browser videos to solve the problem that existing technologies cannot easily and quickly achieve partial scaling of videos when users are watching browser videos, resulting in a poor user experience.

[0006] This manual provides a method for partial zooming of video in a browser, including:

[0007] If a video is confirmed to exist on the target page, push the video scaling parameter setting plugin;

[0008] Receives scaling parameters set by the user through the plugin;

[0009] If it is determined that the mouse has moved into the video, determine the relative position of the mouse in the video;

[0010] Based on the relative position, determine the area of ​​the video to be scaled;

[0011] The region to be scaled is scaled according to the scaling parameters.

[0012] In one embodiment, determining the relative position of the mouse in the video when it is determined that the mouse has moved into the video includes:

[0013] If it is determined that the mouse has moved into the video, listen for mouse movement events in the video;

[0014] The real-time position of the mouse is determined based on the mouse movement events in the video.

[0015] The relative position of the mouse in the video is determined based on the mouse's real-time position.

[0016] In one embodiment, determining the relative position of the mouse in the video based on the mouse's real-time position includes:

[0017] Obtain the display method of the video in the display frame;

[0018] Based on the display method, determine the offset information of the video relative to the display frame;

[0019] The relative position of the mouse in the video is determined based on the offset information and the real-time position of the mouse.

[0020] In one embodiment, the video is displayed in the display frame in at least one of the following ways: the video completely fills the display frame, the video fills the display frame vertically, or the video fills the display frame horizontally.

[0021] In one embodiment, determining the video offset information relative to the display frame based on the display method includes:

[0022] When the video completely fills the display frame, the offset information of the video relative to the display frame is determined to be 0;

[0023] When the video is vertically filled in the display frame, the offset of the video relative to the left and right boundaries of the display frame is determined to be a first preset distance;

[0024] When the video is horizontally filled in the display frame, the offset of the video relative to the upper and lower boundaries of the display frame is determined as a second preset distance.

[0025] In one embodiment, the scaling parameters include at least one of the following: scaling range and scaling ratio.

[0026] In one embodiment, when the scaling parameter includes a scaling ratio, the scaling process of the area to be scaled according to the scaling parameter includes:

[0027] Capture real-time dynamic images of the area to be scaled;

[0028] The real-time dynamic images are displayed according to the scaling ratio.

[0029] This specification also provides a device for partial zooming of browser videos, including:

[0030] The scaling parameter acquisition module is used to push a video scaling parameter setting plugin when it is determined that a video exists on the target page; and to receive the scaling parameters set by the user through the plugin.

[0031] A positioning module is used to determine the relative position of the mouse in the video when it is determined that the mouse has moved into the video.

[0032] The region determination module is used to determine the region to be scaled in the video based on the relative position;

[0033] The scaling module is used to scale the area to be scaled according to the scaling parameters.

[0034] This specification also provides a device for partial scaling of browser video, including a processor and a memory for storing processor-executable instructions, wherein the processor executes the instructions to implement the steps of any method embodiment in the embodiments of this specification.

[0035] This specification also provides a computer-readable storage medium having computer instructions stored thereon, which, when executed, implement the above-described method for partial scaling of browser videos.

[0036] This specification also provides a computer program product comprising a computer program that, when executed by a processor, implements the aforementioned method for partial scaling of browser videos.

[0037] This specification provides a method, apparatus, and device for partial zooming of browser videos. When a video is confirmed to exist on the target page, a video zoom parameter setting plugin is pushed. Then, the zoom parameters set by the user through the plugin are received. Users can set corresponding zoom parameters according to their personal habits and usage needs, satisfying their subsequent need to view local details of the browser video based on the set zoom parameters. Furthermore, when the mouse is confirmed to be moving within the video, the relative position of the mouse within the video is determined. This relative position provides the data foundation for subsequently determining the area to be zoomed. Finally, based on the relative position, the area to be zoomed in the video is determined, and then the zoomed area is scaled according to the zoom parameters. This solution allows users to easily and quickly zoom in and view local details in a video according to their own habits and usage needs, improving the user experience. Attached Figure Description

[0038] To more clearly illustrate the embodiments of this specification, the accompanying drawings used in the embodiments will be briefly introduced below. The drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0039] Figure 1 This is a flowchart illustrating one embodiment of a method for partial scaling of a browser video provided in this specification;

[0040] Figure 2 This is a schematic diagram of the storage of video scaling parameters for multiple pages of a browser in one embodiment of this specification;

[0041] Figure 3 This is a diagram illustrating how video is displayed in a display frame according to one embodiment of this specification;

[0042] Figure 4 This is a mouse position positioning diagram from one embodiment of this specification;

[0043] Figure 5 This is a comparison image of a browser video before and after magnification in one embodiment of this specification;

[0044] Figure 6 This is a schematic diagram of the structural composition of a browser video local scaling device provided in one embodiment of this specification;

[0045] Figure 7 This is a schematic diagram of the structural composition of an electronic device provided in one embodiment of this specification. Detailed Implementation

[0046] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments in this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0047] Given that existing methods can only achieve partial scaling of images or overall scaling of videos in a browser, such as when a user is shopping on a shopping website, the user can zoom in on the image by moving the mouse over it, or zoom in on the video in full-screen mode, the existing methods cannot easily and quickly achieve partial scaling of videos in a browser, which means that users cannot view the details of the video through simple mouse operations.

[0048] To address the aforementioned problems with existing methods, this application proposes a browser video local scaling method that allows users to zoom in and out on specific details of a browser video according to their own habits and needs, thereby improving the user experience.

[0049] Based on the above approach, this specification proposes a method for implementing partial zooming of browser videos. First, upon determining that a video exists on the target page, a video zoom parameter setting plugin is pushed, and then the zoom parameters set by the user through the plugin are received. Second, upon determining that the mouse is moving within the video, the relative position of the mouse within the video is determined. Finally, based on the relative position, the area of ​​the video to be zoomed is determined, and then the area to be zoomed is zoomed according to the zoom parameters. See also... Figure 1 As shown in the figure, this specification provides a method for implementing partial zooming of a browser video. In specific implementation, this method may include the following:

[0050] S101: If a video is confirmed to exist on the target page, push the video scaling parameter setting plugin.

[0051] In some embodiments, the presence of a video on the target page can be determined first by using a popup plugin from the Google Chrome extension package to provide the user with an interface button. When the user clicks this button, the popup plugin automatically sends a message to the detection plugin (content). Upon receiving the message, the content plugin determines whether a video exists on the target page by calling an attribute from the relevant database and checking if the attribute value is greater than 1. For example, if the attribute value is greater than 1, it indicates that a video exists on the target page; if the attribute value is less than 1, it indicates that a video does not exist on the target page. Finally, the result of whether a video exists on the target page is returned to the popup plugin, completing the video detection. Through the interaction between the popup plugin and the content plugin, the presence of a video on the current target page can be effectively detected. If a video exists on the target page, a video scaling parameter setting plugin is then pushed to the target page so that the user can set the scaling parameters according to the scaling parameter plugin.

[0052] In some embodiments, the target page can be a page opened by the user when using a browser, or multiple pages opened by the user at the same time when using a browser. Each page is independent of the others. Depending on the user's actual usage needs, one or more pages can be used as the corresponding target page. Alternatively, video detection can be performed on one or more pages. If a video is found to exist, a plugin for setting video scaling parameters can be pushed to each page, allowing the user to set independent scaling parameters for each page. This achieves the effect of independent isolation of parameter configuration for each page.

[0053] In some embodiments, the aforementioned video scaling parameter setting plugin can be the popup plugin and content plugin from the Google Chrome extension package. The popup plugin is primarily used for user interaction, such as enabling or disabling video scaling or setting video scaling parameters. The content plugin is mainly used for video detection, video positioning, and video scaling. Video positioning and scaling will be explained separately later and will not be elaborated upon here.

[0054] In some embodiments, the popup and content plugins in the aforementioned Google Chrome extension package are independent, single plugins developed by the developer in accordance with browser plugin specifications. It should be noted that other plugins in the Google Chrome extension package used subsequently in this specification are also independently developed and designed by the developer to achieve different functionalities. The Google Chrome extension package has a wide range of applications; besides Google Chrome, it can run on all open-source browser engines (WebKit) such as 360 Speed ​​Browser, 360 Security Browser, Sogou Browser, and QQ Browser. That is, the Google Chrome extension can detect videos present on pages in various browsers such as 360 Speed ​​Browser, 360 Security Browser, Sogou Browser, and QQ Browser.

[0055] S102: Receive the scaling parameters set by the user through the plugin.

[0056] In some embodiments, the scaling parameters may include at least one of the following: scaling range, scaling ratio.

[0057] The scaling range can be a pre-set radius or length, or a system default radius or length. The scaling ratio can be the scaling factor set by the user, such as magnifying by 5 times, magnifying by 8 times, or shrinking by 1 / 5, 1 / 8, etc. The scaling parameters can include a scaling range or not, depending on the user's actual needs. If the user needs to reset the scaling range, this scaling range can be the user-defined radius or length. After determining the mouse position, the area to be scaled can be defined based on the user-defined radius or length.

[0058] In some embodiments, taking a scenario where a user opens multiple pages and needs to set the zoom range and zoom ratio for each page as an example, the application of the zoom parameters set by the user through the plugin in this scenario can be as follows: The user opens multiple pages in their browser, and if it is determined that videos exist on all of these pages, a video zoom parameter setting plugin is pushed to the corresponding pages. The user then uses the plugin to set the zoom range and zoom ratio for each page according to their preferences. Specifically, the process of the user setting the zoom parameters for multiple pages using the video zoom parameter setting plugin can be as follows: The popup plugin from the Google Chrome extension package is pushed to the multiple pages opened by the user, and a form for setting the zoom range and zoom ratio is provided to the user. After the user completes the settings, the background can send the setting information to the content plugin to prepare for subsequent video zooming. For example, if a user opens both page A and page B in their browser, and both pages contain videos, the user can use a video scaling parameter setting plugin to set the scaling radius or length of the video on page A to 5, and the magnification to 5 or the reduction to 1 / 5, and the scaling radius or length of the video on page B to 6, and the magnification to 6 or the reduction to 1 / 6. These scaling parameters are then sent to the content plugin. When the user initiates a command to scale the video on the browser page, the content plugin can use the parameter settings received from the relevant page to prepare for video scaling. The aforementioned popup and content plugins change continuously as browser pages are opened and switched. To preserve the user's scaling parameter settings for each page, this manual describes how the popup plugin, upon detecting changes in user-defined parameter values, uses the storage plugin (background plugin) in the Google Chrome extension package to store the scaling parameter data. Subsequently, when the popup plugin is opened, the background plugin is called first to check if relevant parameter data is stored. If corresponding data is found, it is automatically updated in the popup plugin. This effectively saves users time in setting scaling parameters for multiple pages. At the same time, by calling the stored scaling parameters, users can easily and quickly apply different settings to videos on multiple pages simultaneously.

[0059] Among them, the background plugin has the longest lifespan of all the plugins in the Google Chrome extension package. It opens when the browser is open and closes when the browser is closed. The background plugin allows users to store custom configurations for specific pages and set video scaling parameters across pages.

[0060] S103: If it is determined that the mouse has moved into the video, determine the relative position of the mouse in the video.

[0061] In some embodiments, determining the relative position of the mouse in the video when it is determined that the mouse has moved into the video may, in specific implementations, include:

[0062] S1: If it is determined that the mouse has moved into the video, listen for mouse movement events in the video;

[0063] S2: Determine the real-time position of the mouse based on the mouse movement events in the video;

[0064] S3: Determine the relative position of the mouse in the video based on the real-time position of the mouse.

[0065] In some embodiments, when the mouse moves into the video, it is necessary to monitor the mouse movement events in the video in real time to ensure that the latest mouse position can be obtained in real time. When the mouse moves out of the video, it is also necessary to remove the monitoring of mouse movement events to maintain browser performance. By monitoring the mouse movement events in the video and obtaining the real-time position of the mouse, a data foundation can be laid for subsequent partial zooming operations on the video.

[0066] In some embodiments, before listening for mouse movement events in the video, a video drawing area needs to be created in advance. This video drawing area is mainly to provide a space for the subsequently obtained zoomed-in or zoomed-out area of ​​the video. This space can be defined as a component container that holds the zoomed-in video area. The creation of this component container is mainly achieved using the canvas plugin in the Google Chrome extension package. In order to ensure that the subsequently obtained local zoomed-in video area can be fully displayed in the created drawing area (or component container) without affecting other user operations, the canvas plugin can be pre-configured as follows:

[0067] S1: Insert the drawing plugin (canvas plugin) into the outermost node of the current page and set the page background color to transparent;

[0068] S2: Set the width and height of the video drawing area created by the drawing plugin (canvas plugin) to be the same as the current monitor (screen) to ensure that the enlarged video content can be fully displayed in the currently created area;

[0069] S3: Set the pointer-events property of the drawing plugin (canvas plugin) to none to avoid interfering with other user operations.

[0070] The above settings not only provide a component container for the subsequently obtained video zoom area, but also ensure that the zoomed video area (including video content) can be fully displayed in the component container. Furthermore, it also ensures that the component container holding the local zoomed video area (including video content) will not affect the user's viewing of other video areas besides the zoomed area video when it moves in the video, greatly improving the user's viewing experience.

[0071] In some embodiments, determining the relative position of the mouse in the video based on the real-time position of the mouse can, in specific implementations, include:

[0072] S1: Obtain the display method of the video in the display box;

[0073] S2: Determine the offset information of the video relative to the display frame according to the display method;

[0074] S3: Determine the relative position of the mouse in the video based on the offset information and the real-time position of the mouse.

[0075] In some embodiments, the way the video is displayed in the display frame may include at least one of the following: the video completely fills the display frame, the video fills the display frame vertically, or the video fills the display frame horizontally.

[0076] The vertical filling of the video in the display frame can include: the video filling the entire display frame vertically and the video being horizontally centered in the display frame; the horizontal filling of the video in the display frame can include: the video filling the entire display frame horizontally and the video being vertically centered in the display frame.

[0077] In some real-time examples, the above-mentioned method of obtaining the display method of the video in the display box can be implemented in the following way:

[0078] S1: Obtain the aspect ratio of the video and the aspect ratio of the display frame;

[0079] S2: Perform difference processing on the aspect ratio of the video and the aspect ratio of the display frame to obtain difference data;

[0080] S3: Based on the difference data, obtain the display method of the video in the display frame.

[0081] In some real-time examples, when the difference is 0 (i.e., the aspect ratio of the video is equal to the aspect ratio of the display frame), the video completely fills the display frame. When the difference is less than 0 (i.e., the aspect ratio of the video is less than the aspect ratio of the display frame), the video fills the display frame vertically (i.e., the video fills the display frame vertically and is centered horizontally). When the difference is greater than 0 (i.e., the aspect ratio of the video is greater than the aspect ratio of the display frame), the video fills the display frame horizontally (i.e., the video fills the display frame horizontally and is centered vertically). By considering several possible rendering scenarios during video playback, such as the discrepancy between the actual video size and the current display frame size, a data foundation is laid for accurately calculating the relative position of the mouse within the video under corresponding rendering conditions, ensuring the completeness and reliability of the calculation. Considering the possible rendering scenarios also ensures the consistency of the drawing center point between the subsequently obtained local zoomed area of ​​the video and the area to be zoomed.

[0082] In some embodiments, determining the video offset information relative to the display frame based on the display method may, in specific implementations, include:

[0083] S1: When the video completely fills the display frame, determine that the offset information of the video relative to the display frame is 0;

[0084] S2: When the video is vertically filled in the display frame, determine the offset of the video relative to the left and right boundaries of the display frame as a first preset distance;

[0085] S3: When the video is horizontally filled in the display frame, determine the offset of the video relative to the upper and lower boundaries of the display frame as a second preset distance.

[0086] In some embodiments, when the above video is completely filled in the display box, that is, when the aspect ratio of the video is equal to the aspect ratio of the display box, the offset information of the video relative to the display box is determined to be 0; when the above video is vertically filled in the display box, that is, when the aspect ratio of the video is less than the aspect ratio of the display box, the offsets of the video relative to the left and right boundaries of the display box are determined to be a first preset distance; when the above video is horizontally filled in the display box, that is, when the aspect ratio of the video is greater than the aspect ratio of the display box, the offsets of the video relative to the upper and lower boundaries of the display box are determined to be a first preset distance. It should be noted that the display modes of the video vertically or horizontally in the display box considered in this specification can be centered display, so the left and right boundaries are equal, and the upper and lower boundaries are equal. When calculating specifically, only one of the equal boundaries needs to be calculated, such as calculating the left boundary and the upper boundary. For the sake of clear expression, the right boundary will be replaced by the left boundary and the lower boundary will be replaced by the upper boundary in the subsequent parts of this specification.

[0087] In some embodiments, the above first preset distance can be calculated in the following manner:

[0088] If vw / vh < rw / rh, then pt = 0, pl = (rw - rh * vw / vh) / 2

[0089] Where, vw / vh represents the aspect ratio of the video, vw represents the width of the video, vh represents the height of the video, rw / rh represents the aspect ratio of the display box, rw represents the width of the display box, rh represents the height of the display box, pt represents the second preset distance, and pl represents the first preset distance.

[0090] In some embodiments, the above second preset distance can be calculated in the following manner:

[0091] [ If vw / vh > rw / rh, then pl = 0, pt = (rh - rw * vh / vw) / 2

[0092] Where, vw / vh represents the aspect ratio of the video, vw represents the width of the video, vh represents the height of the video, rw / rh represents the aspect ratio of the display box, rw represents the width of the display box, rh represents the height of the display box, pl represents the first preset distance, and pt represents the second preset distance.

[0093] In some embodiments, the width and height of the above video and the width and height of the display box can be obtained by calling relevant code attributes. For example, the width attribute of the video can be set or the value of the width attribute of the video can be returned. The width attribute of the video returns a number which represents the width of the video. This specification does not make specific limitations on this.

[0094] In some embodiments, determining the relative position of the mouse in the video based on the offset information and the real-time position of the mouse can, in specific implementations, include:

[0095] S1: Determine the position of the mouse relative to the target page based on the real-time position of the mouse; wherein, the target page contains a video;

[0096] S2: Determine the relative position of the mouse in the video based on the position of the mouse relative to the target page and the offset information.

[0097] In some embodiments, the mouse position relative to the target page may include: the mouse position relative to the left boundary of the target page and the mouse position relative to the top boundary of the target page. It should be noted that all relative position calculations in this specification are based on the top-left corner of the browser as the vertex. The mouse position relative to the target page can also be obtained by triggering a mouse listener event and calling relevant functions for calculation. Subsequently, the mouse position relative to the target page can be used as the center point for subsequent video rendering, or the mouse's relative position in the video can be used as the rendering center point. Then, relevant rendering plugins can be called to draw the shape of the video area to be scaled according to the user's preference. The shape of the video area to be scaled drawn by the rendering plugin will be explained separately later and will not be elaborated upon here.

[0098] In some embodiments, the relative position of the mouse in the video may include: the mouse relative to the left edge of the video and the mouse relative to the top edge of the video. The relative position of the mouse in the video, determined based on the mouse's position relative to the target page and the offset information, can be calculated using the following formula:

[0099] mx = ml - vl - pl

[0100] my = mt-vt–pt

[0101] Where mx is the left edge of the mouse relative to the video, ml is the left edge of the mouse relative to the target page, vl is the left edge of the video relative to the target page, pl is the first preset distance, my is the top edge of the mouse relative to the video, mt is the top edge of the mouse relative to the target page, vt is the top edge of the video relative to the target page, and pt is the second preset distance.

[0102] The left boundary of the video relative to the target page and the top boundary of the video relative to the target page can both be calculated by calling relevant code functions, which will not be elaborated here.

[0103] S104: Determine the area to be scaled in the video based on the relative position.

[0104] In some embodiments, when the scaling parameter includes a scaling range, determining the area to be scaled of the video based on the relative position may further include: determining the area to be scaled of the video based on the relative position and the scaling range.

[0105] In some embodiments, when the scaling parameters include a scaling range, determining the area to be scaled in the video based on the relative position can be further implemented by: determining the area to be scaled in the video based on the relative position and the scaling range when the scaling parameters include a scaling range. Specifically, this process can involve: drawing an area with the relative position as the center point and the scaling range as the radius or length using a drawing plugin, and then using this area as the area to be scaled in the video. The shape of the area to be scaled can be set according to the user's daily usage habits. For example, the shape clipping function in the canvas plugin of the Google Chrome extension package can be used to draw the area to be scaled as a circle, facilitating the user's viewing of local details in the video.

[0106] In some embodiments, after determining the area to be scaled in the video as described above, the process may further include: calculating the coordinate values ​​of pixels within the area to be scaled; wherein the image within the area to be scaled is composed of several small squares, each small square being called a pixel, and the grid formed by these pixels is called a "raster." The computer represents the entire image by representing information such as the position, color, and brightness of these pixels. Calculating the coordinate values ​​of pixels within the area to be scaled lays a data foundation for subsequently obtaining the coordinate values ​​of pixels within the scaled area and achieving local scaling of the video.

[0107] S105: The area to be scaled is scaled according to the scaling parameters.

[0108] In some embodiments, the scaling process of the area to be scaled according to the scaling parameters described above may include, in specific implementation, the scaling process may include: the process of enlarging or shrinking the area to be scaled, and the process of displaying the dynamic image after the area to be scaled is enlarged or shrunk.

[0109] In some embodiments, the above-described scaling process of the region to be scaled according to the scaling parameters (the process of enlarging or shrinking the region to be scaled) may, in specific implementation, include: scaling the region to be scaled according to the pixel coordinate values ​​of the pixels within the region to be scaled and the scaling parameters. By sequentially calculating the pixel coordinate values ​​of all pixels within the region to be scaled, and then assigning the calculated pixel coordinate values, combined with the scaling parameters, to the region to be enlarged or shrunk, the enlargement or shrinking of all pixels in the region to be scaled is achieved, thus realizing the enlargement or shrinking of the region to be scaled.

[0110] In some embodiments, taking the scenario of magnifying the area to be scaled as an example, the specific magnification process can be understood as follows: Calculate the pixel coordinates of all pixels in the area to be magnified, and then, based on the pixel coordinates of the pixels in the area to be magnified and the scaling parameters, calculate the coordinates of the pixels in the area to be magnified or reduced (video magnification area) sequentially from left to right and from top to bottom, thereby achieving the magnification of the area to be magnified. Specifically, the pixel coordinates of one pixel in the area to be magnified can be calculated according to the following formula (since the area to be magnified has multiple pixels, but the calculation method for the pixel coordinates of each pixel is similar, the calculation of the pixel coordinates of one pixel is taken as an example):

[0111] x = mx - area / 2

[0112] y = my - area / 2

[0113] Where x is the left coordinate of a pixel in the area to be magnified, y is the top coordinate of a pixel in the area to be magnified, mx is the left boundary of the mouse relative to the video, my is the top boundary of the mouse relative to the video, and area is the magnification radius or length.

[0114] In some embodiments, after calculating the pixel coordinates of a pixel in the area to be magnified, the coordinates of a pixel in the magnified area are then calculated in combination with the scaling parameters. Specifically, the calculation can be performed according to the following formula:

[0115] dx = x + area / 2 - area*ratio / 2

[0116] dy = y + area / 2 - area*ratio / 2

[0117] x = ml - area / 2

[0118] y = mt - area / 2

[0119] Based on the above formula, we can deduce that:

[0120] dx = ml - area * ratio / 2

[0121] dy = mt - area * ratio / 2

[0122] Where dx is the left coordinate of a pixel within the video magnification area, dy is the top coordinate of a pixel within the video magnification area, x is the left coordinate of a pixel in the area to be magnified, y is the top coordinate of a pixel in the area to be magnified, ml is the left edge of the mouse relative to the target page, ml is the top edge of the mouse relative to the target page, area is the magnification radius or length, and ratio is the magnification factor.

[0123] By traversing each pixel within the video magnification area using this method, the magnification process of the area to be magnified can be completed.

[0124] In some real-time examples, depending on the user's actual needs, if it is necessary to shrink a local area of ​​the video, the process of shrinking the local area is the same as the process of zooming in described above, and this manual will not elaborate on this.

[0125] In some embodiments, when the scaling parameters include a scaling ratio, the scaling process of the area to be scaled according to the scaling parameters (the process of displaying the dynamic image after enlarging or shrinking the area to be scaled) may further include:

[0126] S1: Obtain the real-time dynamic image of the area to be scaled;

[0127] S2: Display the real-time dynamic image according to the scaling ratio.

[0128] In some embodiments, the above-mentioned acquisition of real-time dynamic images in the area to be scaled can be achieved by the following method: when the mouse hovers over the video, the browser's timed loop operation interface (requestAnimationFrame) needs to be called. By continuously executing requestAnimationFrame, multiple frames of images within a certain period of time can be obtained. For example, by executing requestAnimationFrame, 60 frames of images within one second can be obtained, thereby realizing the real-time dynamic images of the area to be scaled and the currently playing video images to be played smoothly in sync.

[0129] In some embodiments, displaying the real-time dynamic image according to the scaling ratio can be understood as: by combining the scaling ratio (which can be a scaling factor), the real-time dynamic image of the area to be scaled is enlarged or reduced to obtain an enlarged or reduced area (containing the image) and displayed therein. Simultaneously, the image within this enlarged or reduced area is also a real-time dynamic image. It should be noted that the image in the enlarged or reduced area can be displayed by adding a layer, creating a new plugin window to display the scaled image content, or directly overlaying the original video display area for scaling.

[0130] The above method will be described below with reference to a specific embodiment. However, it is worth noting that this specific embodiment is only for better illustration of this application and does not constitute an improper limitation of this application.

[0131] Before implementation, the system first checks if a video exists on the target page. If a video is confirmed, a video scaling parameter setting plugin is pushed to the user. Next, the user makes the corresponding settings according to the scaling parameter form provided by the plugin. This form can pre-store default scaling range parameters. Users can choose the default value or reset the scaling range. After the user completes the settings, the plugin stores the configured scaling parameters, allowing users to directly access the stored data for video scaling later. Finally, when the user completes the scaling parameter settings and activates the video scaling button in the pop-up plugin, the background will perform a series of preparations for video scaling, such as: creating a video drawing area, which provides a component container for the subsequently obtained local video scaling area; listening for mouse movement events and continuously updating the latest mouse position based on the mouse movement in the video; when the mouse is in the video, determining the display method of the video in the display box during current video playback (i.e., determining the several possible rendering scenarios of the video); and by considering the video rendering scenarios, determining the relative position of the mouse in the video and the mouse drawing center point, thus achieving the positioning of the mouse and video positions. These steps complete the series of preparations before video scaling. In specific implementation, based on the relative position of the mouse and the scaling range, the area to be scaled is determined, and the coordinate values ​​of the pixels in the area to be scaled are calculated. Then, based on the scaling ratio, the video magnification area is determined, and the coordinate values ​​of the pixels in the local video scaling area are calculated based on the coordinate values ​​of the pixels in the area to be scaled, thus achieving the magnification or reduction of the area to be scaled. Meanwhile, to synchronize the zoomed-in or zoomed-out area of ​​the video with the currently playing video, relevant plugins need to be continuously executed to obtain multiple frames within a short period of time, ensuring smooth playback of the zoomed-in or zoomed-out area. Through these methods, partial zooming of browser videos can be achieved simply and quickly, while meeting individual user habits and usage needs.

[0132] In a specific scenario example, see Figure 2 As shown, the methods provided in this manual can be used to store scaling parameters for multiple pages. In practical implementation, a pop-up plugin and a content plugin allow users to set independent parameters for multiple pages, enabling independent and isolated scaling configurations for each page. Simultaneously, the scaling parameters set by the user for each page are stored in a storage plugin (background plugin), allowing users to easily and quickly apply different settings to videos on multiple pages simultaneously.

[0133] See Figure 3 As shown, Figure 3This refers to three rendering scenarios during video playback, representing three display methods of the video within the display frame: 01, where the video completely fills the display frame; 02, where the video fills the display frame horizontally and is vertically centered within it; and 03, where the video fills the display frame vertically and is horizontally centered within it. In practical implementation, this can be done as follows:

[0134] S1: Obtain the aspect ratio of the video and the aspect ratio of the display frame;

[0135] S2: Perform difference processing on the aspect ratio of the video and the aspect ratio of the display frame to obtain difference data;

[0136] S3: Based on the difference data, obtain the display method of the video in the display frame.

[0137] When the difference between the aspect ratio of the video and the aspect ratio of the display frame is 0, it corresponds to 01 (the case where the video completely fills the display frame).

[0138] When the difference between the aspect ratio of the video and the aspect ratio of the display frame is greater than 0, it corresponds to 02 (the case where the video is horizontally filled in the display frame: that is, the video is horizontally filled in the display frame and vertically centered in the display frame).

[0139] When the difference between the aspect ratio of the video and the aspect ratio of the display frame is less than 0, it corresponds to 03 (the case where the video is vertically filled in the display frame: that is, the video is vertically filled in the display frame and horizontally centered in the display frame).

[0140] See Figure 4 As shown, Figure 4 The outermost border represents a page in the browser. `vt` is the top boundary of the video relative to the target page, `vl` is the left boundary of the video relative to the target page, `mt` is the top boundary of the mouse relative to the target page, `ml` is the left boundary of the mouse relative to the target page, `pt` is the second preset distance, and `pl` is the first preset distance. The method provided in this specification can be used to calculate the relative position of the mouse within the video. Before implementation, first calculate the aspect ratio of the video and the aspect ratio of the display frame. Based on the difference in aspect ratios, determine the display mode of the video within the display frame, and then determine the offset information of the video relative to the display frame under different display modes. During implementation, the first and second preset distances can be determined based on the offset information of the video relative to the display frame under different display modes. Then, determine the position of the mouse relative to the target page and the position of the video relative to the target page. Finally, calculate the relative position of the mouse within the video.

[0141] Specifically, it can be calculated using the following formula:

[0142] mx = ml - vl - pl

[0143] my = mt-vt–pt

[0144] See Figure 5 As shown, Figure 5 This is a before-and-after comparison of a video portion in a specific scenario described in this manual. The black circular area represents the area to be magnified, and the gray circular area represents the magnified area. Using the methods provided in this manual, the pixel coordinates of a pixel within the black circular area can be calculated as follows:

[0145] x = mx - area / 2

[0146] y = my - area / 2

[0147] Where x is the left coordinate of a pixel in the area to be magnified, y is the top coordinate of a pixel in the area to be magnified, mx is the left boundary of the mouse relative to the video, my is the top boundary of the mouse relative to the video, and area is the magnification radius or length.

[0148] After calculating the pixel coordinates of a pixel in the area to be magnified, and then combining the scaling parameters, the coordinates of a pixel within the magnified area can be calculated using the following formula:

[0149] dx = x + area / 2 - area*ratio / 2

[0150] dy = y + area / 2 - area*ratio / 2

[0151] x = ml - area / 2

[0152] y = mt - area / 2

[0153] Based on the above formula, we can deduce that:

[0154] dx = ml - area * ratio / 2

[0155] dy = mt - area * ratio / 2

[0156] Where dx is the left coordinate of a pixel within the magnified area, dy is the top coordinate of a pixel within the magnified area, x is the left coordinate of a pixel within the area to be magnified, y is the top coordinate of a pixel within the area to be magnified, ml is the left edge of the mouse relative to the target page, ml is the top edge of the mouse relative to the target page, area is the magnification radius or length, and ratio is the magnification factor. By iterating through each pixel within the magnified area of ​​the video in this way, the magnification process of the area to be magnified can be completed. It should be noted that the total number of pixels within the gray circular area is generally the same as the total number of pixels within the black circular area.

[0157] This application also provides a computer device, including a processor and a memory for storing processor-executable instructions. Specifically, the processor can perform the following steps according to the instructions: when it is determined that a video exists on a target page, it pushes a video scaling parameter setting plugin; it receives scaling parameters set by the user through the plugin; when it is determined that the mouse has moved into the video, it determines the relative position of the mouse in the video; based on the relative position, it determines the area of ​​the video to be scaled; and it scales the area to be scaled according to the scaling parameters.

[0158] To execute the above instructions more accurately, please refer to... Figure 6 This application also provides another specific computer device, wherein the computer device includes a network communication port 601, a processor 602 and a memory 603, and the above structures are connected by internal cables so that the various structures can perform specific data interaction.

[0159] Specifically, the network communication port 601 can be used to push a video scaling parameter setting plugin when it is determined that a video exists on the target page; and to receive the scaling parameters set by the user through the plugin.

[0160] Specifically, the processor 602 can be used to determine the relative position of the mouse in the video when it is determined that the mouse has moved into the video; determine the area of ​​the video to be scaled based on the relative position; and scale the area to be scaled based on the scaling parameters.

[0161] The memory 603 can be used to store the corresponding instruction program.

[0162] In this embodiment, the network communication port 601 can be a virtual port bound to different communication protocols, thereby enabling the sending or receiving of different data. For example, the network communication port can be a port responsible for web data communication, a port responsible for FTP data communication, or a port responsible for email data communication. Furthermore, the network communication port can also be a physical communication interface or communication chip. For example, it can be a wireless mobile network communication chip, such as GSM or CDMA; it can also be a Wi-Fi chip; or it can be a Bluetooth chip.

[0163] In this embodiment, the processor 602 can be implemented in any suitable manner. For example, the processor can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers, etc. This specification is not limiting.

[0164] In this embodiment, the memory 603 may include multiple layers. In a digital system, anything that can store binary data can be a memory. In an integrated circuit, a circuit with storage function but no physical form is also called a memory, such as RAM, FIFO, etc. In a system, a storage device with a physical form is also called a memory, such as a memory stick, TF card, etc.

[0165] This application also provides a computer storage medium for partial scaling of browser videos, wherein the computer storage medium stores computer program instructions that, when executed, implement the following: when it is determined that a video exists on the target page, push a video scaling parameter setting plugin; receive scaling parameters set by the user through the plugin; when it is determined that the mouse has moved into the video, determine the relative position of the mouse in the video; determine the area to be scaled in the video based on the relative position; and scale the area to be scaled according to the scaling parameters.

[0166] In this embodiment, the storage medium includes, but is not limited to, Random Access Memory (RAM), Read-Only Memory (ROM), cache, hard disk drive (HDD), or memory card. The memory can be used to store computer program instructions. The network communication unit can be an interface configured according to standards specified in the communication protocol for network connection communication.

[0167] In this embodiment, the specific functions and effects implemented by the program instructions stored in the computer storage medium can be explained in comparison with other implementation methods, and will not be repeated here.

[0168] This application also provides a computer program product, including a non-transitory computer-readable storage medium storing a computer program operable to cause a computer to perform the following steps: upon determining that a video exists on a target page, pushing a video scaling parameter setting plugin; receiving scaling parameters set by a user through the plugin; upon determining that a mouse has moved into the video, determining the relative position of the mouse in the video; determining the area to be scaled in the video based on the relative position; and scaling the area to be scaled according to the scaling parameters.

[0169] See Figure 7 As shown, at the software level, this application also provides a device for partial scaling of browser videos, which may specifically include the following structural modules:

[0170] The scaling parameter acquisition module 701 can be used to push a video scaling parameter setting plugin when it is determined that a video exists on the target page; and to receive the scaling parameters set by the user through the plugin.

[0171] The positioning module 702 can be specifically used to determine the relative position of the mouse in the video when it is determined that the mouse has moved into the video.

[0172] The region determination module 703 can be specifically used to determine the region to be scaled in the video based on the relative position;

[0173] The scaling module 704 can be used to scale the area to be scaled according to the scaling parameters.

[0174] In some embodiments, the scaling parameters in the scaling parameter acquisition module 701 may specifically include at least one of the following: scaling range and scaling ratio.

[0175] In some embodiments, the positioning module 702 described above can be implemented in the following manner: when it is determined that the mouse has moved into the video, the mouse movement event in the video is monitored; the real-time position of the mouse is determined based on the mouse movement event in the video; and the relative position of the mouse in the video is determined based on the real-time position of the mouse.

[0176] In some embodiments, determining the relative position of the mouse in the video based on the real-time position of the mouse may specifically include:

[0177] Obtain the display method of the video in the display frame;

[0178] Based on the display method, determine the offset information of the video relative to the display frame;

[0179] The relative position of the mouse in the video is determined based on the offset information and the real-time position of the mouse.

[0180] In some embodiments, the display method of the video in the display frame may specifically include at least one of the following: the video completely fills the display frame, the video fills the display frame vertically, or the video fills the display frame horizontally.

[0181] In some embodiments, determining the video offset information relative to the display frame based on the display method may specifically include:

[0182] When the video completely fills the display frame, the offset information of the video relative to the display frame is determined to be 0;

[0183] When the video is vertically filled in the display frame, the offset of the video relative to the left and right boundaries of the display frame is determined to be a first preset distance;

[0184] When the video is horizontally filled in the display frame, the offset of the video relative to the upper and lower boundaries of the display frame is determined as a second preset distance.

[0185] In some embodiments, when the scaling module 704 is specifically implemented, it can be done in the following manner: when the scaling parameters include a scaling ratio, the scaling process of the area to be scaled according to the scaling parameters may specifically include:

[0186] Capture real-time dynamic images of the area to be scaled;

[0187] The real-time dynamic images are displayed according to the scaling ratio.

[0188] It should be noted that the units, devices, or modules described in the above embodiments can be implemented by computer chips or physical entities, or by products with certain functions. For ease of description, the above devices are described by dividing them into various modules according to their functions. Of course, in implementing this specification, the functions of each module can be implemented in one or more software and / or hardware, or the module that implements the same function can be implemented by a combination of multiple sub-modules or sub-units, etc. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection between the devices or units shown or discussed can be through some interfaces, and the indirect coupling or communication connection between devices or units can be electrical, mechanical, or other forms.

[0189] As can be seen from the above, based on the browser video local scaling device provided in this application, on the one hand, the scaling parameters of the local area of ​​the video can be set according to the user's personal habits and usage needs, so that the user's needs for viewing local details of the browser video can be met based on the scaling parameters; on the other hand, considering the problem that the actual size of the video may not be proportional to the current display frame size during video playback, that is, considering that the video has different display modes in the display frame, it can lay a data foundation for accurately calculating the relative position of the mouse in the video under different display modes in the display frame, effectively ensuring the integrity and reliability of the calculation of the relative position of the mouse. At the same time, considering the possible display modes of the video can also ensure the consistency of the drawing center point of the final video local scaling area with the area to be scaled. Thus, while meeting the user's personal preferences and usage needs, browser video local scaling can be achieved simply and quickly through mouse positioning and scaling parameters.

[0190] While this specification provides the steps of operation for the methods described in the embodiments or flowcharts, more or fewer steps may be included based on conventional or non-inventive means. The order of steps listed in the embodiments is merely one possible order of execution among many steps and does not represent the only possible order. In actual device or client product execution, the methods shown in the embodiments or drawings may be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment, or even a distributed data processing environment). The terms "comprising," "including," or any other variations thereof are intended to cover a non-exclusive inclusion, such that a process, method, product, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, product, or apparatus. Without further limitations, the presence of other identical or equivalent elements in a process, method, product, or apparatus that includes said elements is not excluded. The terms "first," "second," etc., are used to denote names and do not indicate any particular order.

[0191] Those skilled in the art will also know that, besides implementing the controller using purely computer-readable program code, the same functions can be achieved by logically programming the method steps, making the controller function as logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers (PLCs), and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the devices within it used to implement various functions can also be considered structures within that hardware component. Alternatively, the devices used to implement various functions can be considered as both software modules implementing the method and structures within a hardware component.

[0192] This specification can be described in the general context of computer-executable instructions that are executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, classes, etc., that perform a specific task or implement a specific abstract data type. This specification can also be practiced in distributed computing environments, where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0193] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that this specification can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions of this specification can essentially be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, mobile terminal, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments of this specification.

[0194] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to interchangeably. Each embodiment focuses on its differences from other embodiments. This specification can be used in numerous general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable electronic devices, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices, etc.

[0195] Although this specification has been described by way of examples, those skilled in the art will recognize that many variations and modifications are possible without departing from the spirit of this specification, and it is intended that the appended claims cover such variations and modifications without departing from the spirit of this specification.

Claims

1. A method for browser video partial zooming, characterized in that, The method comprises the following steps: In a case where it is determined that a video exists in a target page, a video zoom parameter setting plug-in is pushed; the video zoom parameter setting plug-in is a popup plug-in and a content plug-in in an extension package of a Google browser plug-in, the popup plug-in is used to realize interaction with a user, and the user opens or closes video zoom or sets a video zoom parameter through the popup plug-in, and the content plug-in is used to realize detection of the video, positioning of a video position, and video zoom; A zoom parameter set by the user through the plug-in is received; The zoom parameter comprises a zoom range. In a case where it is determined that a mouse moves into the video, a relative position of the mouse in the video is determined. The determination of the relative position of the mouse in the video comprises the following steps: in a case where it is determined that the mouse moves into the video, a movement event of the mouse in the video is listened to; a real-time position of the mouse is determined according to the movement event of the mouse in the video; and the relative position of the mouse in the video is determined according to the real-time position of the mouse. A to-be-zoomed region of the video is determined according to the relative position; the determination of the to-be-zoomed region of the video comprises the following steps: a drawing plug-in is called to draw a region with the relative position as a center point and the zoom range as a radius or a length according to the relative position and the zoom range, and the region is taken as the to-be-zoomed region of the video. The to-be-zoomed region is zoomed according to the zoom parameter; the zooming of the to-be-zoomed region according to the zoom parameter comprises the following steps: pixel coordinate values of all pixel points in the to-be-zoomed region are calculated in sequence, and the calculated pixel coordinate values of the pixel points are combined with the zoom parameter and assigned to a region to be enlarged or reduced finally, so that the to-be-zoomed region is enlarged or reduced.

2. The method of claim 1, wherein, The determination of the relative position of the mouse in the video according to the real-time position of the mouse comprises the following steps: A display mode of the video in a display box is acquired; Offset information of the video relative to the display box is determined according to the display mode; The relative position of the mouse in the video is determined according to the offset information and the real-time position of the mouse.

3. The method of claim 2, wherein, The display mode of the video in the display box comprises at least one of the following: the video completely fills in the display box, the video fills in the display box vertically, and the video fills in the display box horizontally.

4. The method of claim 3, wherein, The determination of the offset information of the video relative to the display box according to the display mode comprises the following steps: In a case where the video completely fills in the display box, the offset information of the video relative to the display box is determined to be 0; In a case where the video fills in the display box vertically, offset amounts of the video relative to left and right boundaries of the display box are determined to be a first preset distance; In a case where the video fills in the display box horizontally, offset amounts of the video relative to upper and lower boundaries of the display box are determined to be a second preset distance.

5. The method of claim 1, wherein, The zoom parameter further comprises a zoom ratio.

6. The method of claim 5, wherein, In a case where the scaling parameter comprises a scaling ratio, the scaling processing of the region to be scaled according to the scaling parameter comprises: acquiring a real-time dynamic picture in the region to be scaled; displaying the real-time dynamic picture according to the scaling ratio.

7. An apparatus for browser video partial zooming, the apparatus comprising: comprise: a scaling parameter acquisition module, configured to push a video scaling parameter setting plug-in in a case where it is determined that a target page contains a video; the video scaling parameter setting plug-in is a popup plug-in and a content plug-in in an extension package of a Google browser plug-in, the popup plug-in is used to realize interaction with a user, and the user starts or stops video scaling or sets a video scaling parameter through the popup plug-in, and the content plug-in is used to realize detection of a video, positioning of a video position, and video scaling; receiving a scaling parameter set by the user through the plug-in; the scaling parameter comprises a scaling range; a positioning module, configured to determine a relative position of a mouse in the video in a case where it is determined that the mouse moves into the video; the determination of the relative position of the mouse in the video comprises: listening to a movement event of the mouse in the video in a case where it is determined that the mouse moves into the video; determining a real-time position of the mouse according to the movement event of the mouse in the video; and determining the relative position of the mouse in the video according to the real-time position of the mouse; a region determination module, configured to determine a region to be scaled of the video according to the relative position; the determination of the region to be scaled of the video comprises: calling a drawing plug-in to draw a region with a relative position as a center point and a scaling range as a radius or a length according to the relative position and the scaling range, and taking the region as the region to be scaled of the video; a scaling module, configured to perform scaling processing on the region to be scaled according to the scaling parameter; the scaling processing of the region to be scaled according to the scaling parameter comprises: calculating pixel coordinate values of all pixel points in the region to be scaled in sequence, and then assigning the calculated pixel coordinate values of the pixel points to a region to be enlarged or reduced finally in combination with the scaling parameter, so as to realize enlargement or reduction of all pixel points in the region to be scaled.

8. An apparatus for browser video partial zooming, the apparatus comprising: comprise a processor and a memory for storing processor-executable instructions, and the processor executes the instructions to implement the steps of the method in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, a computer program, which is executed by a processor to implement the method in any one of claims 1-6.

10. A computer program product, characterised in that, a computer program, which is executed by a processor to implement the method in any one of claims 1-6.

Images