Cross-platform video playing system

Abstract

The invention provides a cross-platform video playing system, which relates to the technical field of radio and television, and comprises the following steps: constructing a player component, storing player attributes of the player component, setting a state monitoring callback function of the player component, and defining and setting an operation function of the player component; rendering the player component to a corresponding aspect ratio according to the display state, switching a corresponding player skin and adjusting a progress bar position of the player component; player attributes, state monitoring callback functions and operation functions of the player components are defined in the first tool class and the second tool class, the first tool class is imported when the compiling target platform is a Web platform, and the second tool class is imported when the compiling target platform is other platforms. The method has the beneficial effects that the state change of the player is obtained in real time for corresponding processing; the requirements of a user for controlling the player and individuation are met; and the problem of cross-platform compatibility is avoided, so that an automatic cross-platform function is realized.

Description

Technical Field

[0001] The present invention relates to the field of broadcasting and television technology, and in particular to a cross-platform video playback system. Background Art

[0002] In the broadcasting and television industry, video playback, as an indispensable core function, is constantly evolving with the innovation of digitalization and Internet technology. Traditional broadcasting and television systems are gradually transforming towards networking and intelligence to meet the growing diversified and personalized needs of users. Today, users not only expect to obtain basic playback control functions (play, pause, fast forward, etc.), but also hope to enjoy a seamless cross-platform playback experience on multiple platforms (such as mobile terminals and Web terminals), as well as rich interactive functions and highly customizable player interfaces.

[0003] However, existing players still have many deficiencies in realizing these advanced functions:

[0004] High cost of player interface customization: Many players on the market do not provide built-in player skins or interface templates, which requires developers to design and implement player interfaces from scratch. This not only increases development costs, but may also extend the project delivery cycle.

[0005] Incomplete full-screen playback function: Although some players support full-screen playback, the implementation method often depends on the specific platform or technology stack. In cross-platform applications, the implementation of full-screen playback function may involve complex issues such as screen direction changes and interface layout adjustments, which brings additional challenges to developers.

[0006] Lack of status monitoring and callback mechanism: Existing players often have deficiencies in status monitoring and callback mechanism. For example, it is impossible to obtain the playback status (such as buffering progress, playback errors, etc.) in real time, which limits the developer's ability to finely control and monitor the player's behavior.

[0007] Limited support for gestures: In real applications, users expect to control the player more conveniently through gestures (such as double-clicking to play / pause, sliding to adjust volume and brightness). However, many existing players do not directly support these gestures, resulting in a poor user experience.

[0008] Cross-platform compatibility issues: In cross-platform applications, the differences between different platforms (such as iOS, Android, and Web) often require a lot of player adaptation work when implementing the same functions. This not only increases the difficulty of development, but may also affect the stability and consistency of the player. Summary of the invention

[0009] In view of the problems existing in the prior art, the present invention provides a cross-platform video playback system, comprising:

[0010] A player construction module is used to construct a player component, save the player properties of the player component, set the state monitoring callback function of the player component, and define and set the operation function of the player component;

[0011] A rendering module, connected to the player construction module, for rendering the player component to a corresponding aspect ratio according to a display state, switching a corresponding player skin, and adjusting a progress bar position of the player component;

[0012] A compilation module, connected to the rendering module, is used to define the player properties, the state monitoring callback function and the operation function of the player component in both the first tool class and the second tool class, and import the first tool class when the compilation target platform is a Web platform, and import the second tool class when the compilation target platform is other platforms.

[0013] Preferably, the player attributes include a plurality of gesture event callback functions, and each gesture event callback function is called when a gesture event is triggered.

[0014] Preferably, the gesture events include custom gesture events and default gesture events;

[0015] The custom gesture events include: click event, horizontal slide start event, horizontal slide middle event, horizontal slide end event, up and down slide start event, up and down slide middle event, up and down slide end event, up and down slide event of the left half of the video screen, up and down slide event of the right half of the video screen;

[0016] The default gesture events include progress adjustment gestures, brightness adjustment gestures and volume adjustment gestures.

[0017] Preferably, the status monitoring callback function includes a playback error callback, a playback start callback, a playback pause callback, a playback end callback, and a playback callback.

[0018] Preferably, the playback callback supports two callback frequencies: millisecond level and second level.

[0019] Preferably, the operation functions include a play parameter function, a video loading function, a play start function, a play pause function, a jump function, a full screen switch function, a display / hide play controller function and a screenshot function.

[0020] Preferably, the player skin switching process in the rendering module includes:

[0021] According to the display state, the player skin of the player component is set to the corresponding custom skin attribute, or the children attribute of the player component is set, or the custom skin component corresponding to the display state is used to replace the default player skin of the player component to complete the switching of the player skin.

[0022] Preferably, the process of replacing the default player skin of the player component with the custom skin component corresponding to the display state comprises:

[0023] Replace the default progress bar style of the player component, replace the default playback progress percentage information window style displayed when sliding horizontally, replace the default system brightness percentage information window style displayed when the left half of the video screen slides up and down, and replace the default system volume percentage information window style displayed when the right half of the video screen slides up and down.

[0024] Preferably, the player attributes include a full-screen state attribute and a non-full-screen state attribute, and the process of adjusting the position of the progress bar in the rendering module includes:

[0025] When the display state is full screen, the progress bar position is set according to the full screen state attribute, and when the display state is non-full screen, the progress bar position is set according to the non-full screen state attribute.

[0026] Preferably, in the full-screen state attribute, the position of the progress bar is set to be displayed within the video screen, or displayed outside the video screen; in the non-full-screen state attribute, the position of the progress bar is set to be displayed within the video screen, or displayed outside the video screen.

[0027] The above technical solution has the following advantages or beneficial effects:

[0028] 1) Through the status monitoring callback function, the system can obtain the status changes of the player in real time (such as start, pause, end, etc. of playback), and perform corresponding processing;

[0029] 2) The operation functions of the player component (such as play, pause, fast forward, rewind, etc.) are defined and set to meet the user's needs for controlling the player;

[0030] 3) The rendering module supports switching different player skins to meet the personalized needs of users, making the player interface customization cost low;

[0031] 4) Ensure that different implementation classes are referenced when compiling packages for different platforms, so that the system can adapt well to the characteristics of different platforms, avoid cross-platform compatibility issues, and thus realize automatic cross-platform functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 The figure is a schematic structural diagram of a cross-platform video playback system in a preferred embodiment of the present invention. DETAILED DESCRIPTION

[0033] The present invention is described in detail below in conjunction with the accompanying drawings and specific embodiments. The present invention is not limited to this embodiment, and other embodiments may also fall within the scope of the present invention as long as they conform to the gist of the present invention.

[0034] In a preferred embodiment of the present invention, based on the above problems existing in the prior art, a cross-platform video playback system is provided. Figure 1 Said, including:

[0035] The player construction module 1 is used to construct a player component, save the player properties of the player component, set the state monitoring callback function of the player component, and define and set the operation function of the player component;

[0036] Rendering module 2, connected to player construction module 1, for rendering the player component to a corresponding aspect ratio according to the display state, switching the corresponding player skin, and adjusting the progress bar position of the player component;

[0037] The compilation module 3 is connected to the rendering module 2, and is used to define the player properties, status monitoring callback functions and operation functions of the player component in both the first tool class and the second tool class, and import the first tool class when the compilation target platform is the Web platform, and import the second tool class when the compilation target platform is other platforms.

[0038] Specifically, in this embodiment, the problems existing in the cross-platform video playback system mentioned in the background technology are effectively solved through a series of innovative technical means.

[0039] Furthermore, this embodiment is based on Flutter (Flutter is an open source framework launched by Google and is widely used to build cross-platform high-performance mobile applications) to illustrate how to solve the technical problems in the prior art.

[0040] In the Flutter ecosystem, the video_player plug-in, as a basic video playback component, provides basic video playback functions, but it still has many shortcomings in meeting the complex and changing video playback needs of the broadcasting and television industry.

[0041] In this embodiment, the player construction module is used to construct the player control layer, which holds the controller object of the flutter player component, gesture event callbacks, and player properties such as video address, playback status, and full screen status. Player instances that meet various needs can be flexibly constructed, and the properties of the player component (such as playback address, volume, playback speed, etc.) can be modified or queried when necessary.

[0042] Furthermore, based on the ChangeNotifier provided by flutter, the state monitoring callback function is set, and the system can obtain the state changes of the player (such as start, pause, end, etc.) in real time, so as to call the corresponding callback function for corresponding processing. This solves the problem of the lack of state callback mechanism mentioned in the background technology.

[0043] Furthermore, the operation functions of the player component (such as play, pause, fast forward, rewind, etc.) are defined and set so that the user can control the behavior of the player through these functions.

[0044] Specifically, the rendering module in this embodiment constructs a player rendering layer, dynamically switches the player skin style and the position of the playback progress bar according to the full screen or horizontal and vertical screen state, and uses AspectRatio (AspectRatio is a layout widget in the flutter framework that forces its subcomponents to render at a given aspect ratio.) The player rendering layer supports arbitrary aspect ratios. The rendering module supports switching of different player skins to meet the personalized needs of users. This solves the problem of high player interface customization cost mentioned in the background technology. The rendering module can also adjust the position and style of the progress bar according to user preferences or player layout requirements.

[0045] Specifically, in this embodiment, the compilation module defines the custom skin attributes and custom gesture response components of the player rendering layer, and defines the tool classes with the same name in two files (the first tool class AUtil.dart and the second tool class BUtil.dart), respectively. By using the flutter conditional import feature, through the "import'AUtil.dart'if(dart.library.html)'BUtil.dart'" method, it is ensured that different implementation classes are referenced when compiling packages for different platforms, so that the system can adapt well to the characteristics of different platforms, solve the cross-platform compatibility issues mentioned in the background technology, and thus realize the automatic cross-platform function. This enables the system to achieve consistent visual effects and user interaction experience on different platforms.

[0046] In summary, the innovative design of the player construction module, rendering module and compilation module in this embodiment effectively solves the problems existing in the cross-platform video playback system mentioned in the background technology. These technical means not only improve the flexibility and scalability of the system, but also greatly improve the user experience.

[0047] In a preferred embodiment, the player attributes include multiple gesture event callback functions, and each gesture event callback function is called when a gesture event is triggered.

[0048] In a preferred embodiment, the gesture events include custom gesture events and default gesture events;

[0049] Custom gesture events include: click event, horizontal slide start event, horizontal slide middle event, horizontal slide end event, up and down slide start event, up and down slide middle event, up and down slide end event, up and down slide event on the left half of the video screen, up and down slide event on the right half of the video screen;

[0050] The default gesture events include progress adjustment gestures, brightness adjustment gestures, and volume adjustment gestures.

[0051] Specifically, in actual applications, users expect to control the player more conveniently through gesture operations (such as double-clicking to play / pause, sliding to adjust volume and brightness). However, the video_player plug-in in the flutter framework does not directly support these gesture operations, and developers need to implement and integrate them by themselves.

[0052] Therefore, in this embodiment, multiple gesture event callback functions are also defined and set when constructing the player component. Each gesture event callback function is called when a gesture event is triggered, meeting the user's needs to control the player more conveniently through gesture operations (such as double-clicking to play / pause, sliding to adjust volume and brightness).

[0053] To be more specific, the click event and the horizontal sliding event are used as examples for explanation:

[0054] Custom gesture event: click event; Scenario description: The user wants to perform the play / pause operation by clicking the screen. Implementation method:

[0055] Define a click event callback function, which is triggered when the user clicks the player screen.

[0056] In the callback function, check the current state of the player (playing / paused).

[0057] If the player is in the playing state, the pause function is called; if it is in the paused state, the play function is called.

[0058] User experience: Users can easily switch between play and pause by simply clicking the screen. The operation is intuitive and convenient.

[0059] Example of custom gesture event: horizontal sliding start, middle, and end events; Scenario description: The user wants to adjust the playback progress by sliding the screen horizontally. Implementation method:

[0060] Define callback functions for horizontal sliding start, middle, and end events.

[0061] The initial position is recorded at the beginning of sliding, the sliding distance is calculated in real time during sliding, and the new playback progress is calculated based on the sliding distance and total playback time at the end of sliding.

[0062] Call the player's progress adjustment interface to set the new playback progress to the player.

[0063] User experience: Users can intuitively adjust the playback progress and realize fast forward / rewind functions by sliding the screen horizontally, and the operation is smooth and natural.

[0064] It can be seen that it can meet the user's needs for more convenient control of the player.

[0065] In a preferred embodiment, the status monitoring callback function includes a playback error callback, a playback start callback, a playback pause callback, a playback end callback, and a playback callback.

[0066] Preferably, the playback callback supports two callback frequencies: millisecond level and second level.

[0067] Specifically, in this embodiment, a variety of status monitoring callback functions are set to solve the technical problems of imperfect callback mechanism and inability to obtain the playback status in real time in the prior art:

[0068] Playback error callback: When an error occurs during playback (such as failure to load the media file or decoding error, etc.), you can use this callback function to obtain error information and handle it accordingly. This helps developers capture and properly handle errors in a timely manner, thereby improving the user experience.

[0069] Start playback callback: triggered when the player starts playing. Developers can perform some initialization operations or record the start time of playback in this callback function.

[0070] Pause playback callback: triggered when the player pauses playback. Developers can pause related operations or update the playback status in this callback function.

[0071] Playback end callback: triggered when the player finishes playing normally or stops playing for some reason. The developer can perform some cleanup work or record the time when playback ends in this callback function.

[0072] Playback callback: supports millisecond and second callback frequencies, which allows developers to monitor the status changes during playback more precisely. For example, at the millisecond callback frequency, developers can obtain the player's buffering progress, playback speed and other information in real time; at the second callback frequency, developers can regularly check the player's playback status to perform some scheduled tasks or update the UI interface.

[0073] In a preferred embodiment, the operation functions include a playback parameter function, a video loading function, a start playback function, a pause playback function, a jump function, a full screen switch function, a display\hide playback controller function, and a screenshot function.

[0074] The operation functions in the above preferred embodiments are intended to solve the technical problems in the prior art such as single player function, inflexible operation and poor user experience. The following is a detailed description of the technical problems that these operation functions can solve:

[0075] Through the playback parameter function, users can easily adjust the playback speed, volume, screen brightness and other parameters to achieve a more personalized playback experience. This solves the technical problem that existing players may not be flexible enough in playback parameter settings and cannot meet users' personalized needs for playback speed, volume, brightness and other parameters.

[0076] The start play function ensures that the player responds quickly after receiving the play command and starts playing the video accurately. This solves the problem that the existing player may have a response delay or fail to start accurately when starting playback.

[0077] The pause function ensures that the player responds quickly after receiving the pause command and accurately pauses the currently playing video.

[0078] The jump function allows the user to enter or select a specific time point, and then the player will jump to that time point to continue playing, thus meeting the user's need for flexible control of the video playback progress. This solves the problem that the user may not be able to conveniently jump to a specified time point for playback during video playback in existing players.

[0079] The full-screen switching function ensures that the player correctly switches the video playback interface to full-screen mode after receiving the full-screen command, while keeping the interface clear and stable. This solves the problem in the prior art that the player may have a disordered interface or cannot display correctly when switching to full-screen mode.

[0080] The display / hide playback controller function allows users to conveniently display or hide the playback controller as needed, thereby avoiding the playback controller from interfering with the video playback interface and improving the user experience. This solves the problem that the display and hiding of the playback controller of existing players during playback may not be flexible enough, affecting the user experience.

[0081] The screenshot function allows users to take screenshots at any time during video playback and save the screenshots to a specified location, thereby meeting users' needs for saving and sharing video content. This solves the problem in the prior art that the player may not support the screenshot function, resulting in users being unable to conveniently save or share the wonderful moments in the video.

[0082] These operation functions solve the technical problems in the prior art such as single player function, inflexible operation and poor user experience by providing flexible and diverse functions, providing users with a more convenient and efficient video playback experience.

[0083] Specifically, the screenshot function and full-screen switching function in this embodiment are implemented on both the web and mobile terminals and automatically adapt to different platforms. Furthermore, the full-screen function on the web terminal is not only implemented in full screen for the player rendering layer, but also includes a customized playback progress controller, business customized skin functions, including but not limited to watermarks, bullet screens, and drawing boards.

[0084] In a preferred embodiment, the process of switching the player skin in the rendering module includes:

[0085] According to the display state, the player skin of the player component is set to the corresponding custom skin property, or the children property of the player component is set, or the custom skin component corresponding to the display state is used to replace the default player skin of the player component to complete the switching of the player skin.

[0086] Specifically, in this embodiment, multiple ways of switching player skins are provided, and users can flexibly switch player skins according to personal preferences or current usage scenarios, thereby enjoying a more personalized playback experience. In addition, the player skin can be independently set in different display states (full screen or horizontal or vertical screen), further enriching the user's personalized settings.

[0087] In a preferred embodiment, the process of replacing the default player skin of the player component with the custom skin component corresponding to the display state includes:

[0088] Replace the default progress bar style of the player component, replace the default playback progress percentage information window style displayed when sliding horizontally, replace the default system brightness percentage information window style displayed when the left half of the video screen slides up and down, and replace the default system volume percentage information window style displayed when the right half of the video screen slides up and down.

[0089] Specifically, in this embodiment, various styles in the default player skin of the player component can be personalized and replaced.

[0090] In a preferred embodiment, the player attributes include a full-screen state attribute and a non-full-screen state attribute, and the process of adjusting the position of the progress bar in the rendering module includes:

[0091] When the display state is full screen, the progress bar position is set according to the full screen state attribute, and when the display state is non-full screen, the progress bar position is set according to the non-full screen state attribute.

[0092] In a preferred embodiment, the position of the progress bar is set to be displayed in the video screen or outside the video screen in the full screen state attributes; the position of the progress bar is set to be displayed in the video screen or outside the video screen in the non-full screen state attributes.

[0093] Specifically, in this embodiment, the position of the progress bar can be set in a full-screen state or a non-full-screen state, and the position of the progress bar can be displayed within the video screen or outside the video screen as required.

[0094] Further, an embodiment is provided below to fully illustrate the construction process of the cross-platform video player of the present invention:

[0095] Step 1: Construct a player instance.

[0096] Step 1-1: Construct a player control layer instance and set the playback progress bar outside the screen.

[0097] Step 1-2: Create a player page, call the interface to obtain the video address, and monitor the horizontal and vertical screen switching of the page. In the horizontal and vertical screen switching callback function, construct the player rendering layer instance and pass it into the player control layer instance in step 1.

[0098] Step 1-3: Set the player rendering layer aspect ratio.

[0099] Steps 1-4: Set up custom player progress bar and other custom player skin components.

[0100] Step 1-5: Set the player video address in the interface callback and call the player control layer loading function.

[0101] Step 2: Trigger the player to full screen.

[0102] Step 2-1: Determine whether the current platform is a mobile terminal or a web terminal: if it is a mobile terminal, go to step 2-2; if it is a web terminal, go to step 2-5;

[0103] Step 2-2: On the mobile terminal, call the system screen rotation method to trigger the player page rotation.

[0104] Step 2-3: In the screen rotation monitoring, if the current screen is horizontal, set the player height to the screen height, the width to the screen width, hide other views except the player on the page, and set the player full screen state to True.

[0105] Step 2-4: In the screen rotation monitor, if the current screen is vertical, set the player aspect ratio to the default value when constructing the player instance, restore other views in the player page, and set the player full screen state to False.

[0106] Step 2-5: On the web side, use the document.querySelector method to retrieve the "flt-glass-pane" object in the page. This object is the player container object.

[0107] Step 2-6: Use the document.querySelector method to retrieve the "video" object in the page. This object is the player object.

[0108] Step 2-7: Set the "x5-video-orientation" property of the video object according to the full screen state of the player.

[0109] Step 2-8: Call element.requestFullscreen method to set the player container to full screen.

[0110] Step 2-9: Call document.exitFullscreen method to exit the full screen player container.

[0111] Step 3: Take a screenshot of the current player screen.

[0112] Step 3-1: Construct a VideoElement object.

[0113] Step 3-2: Set the onLoadedMetadata listener of videoElement.

[0114] Step 3-3: Set the onSeeked listener of videoElement.

[0115] Step 3-4: Set the src attribute of videoElement to the video address.

[0116] Step 3-5: Set the currentTime property of videoElement to the current timestamp of the player in the onLoadedMetadata callback.

[0117] Step 3-6: In the onSeeked callback, construct a CanvasElement object and obtain its CanvasRenderingContext2D object.

[0118] Step 3-7: Calculate the canvas size based on the width and height of the player, and draw the current frame of the videoElement on the CanvasRenderingContext2D.

[0119] Step 3-8: Convert the drawn CanvasElement into binary data and return it.

[0120] In this embodiment, the player construction module of the present invention is used to construct the player, and the player properties, status monitoring callback function, and operation function are set to meet the customized settings of the player's skin and progress bar, as well as the monitoring of the player status and corresponding operations, to achieve cross-platform playback, as well as entering full screen, exiting full screen operations, and screenshot operations.

[0121] The above are only preferred embodiments of the present invention, and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should be aware that all solutions obtained by equivalent substitutions and obvious changes made using the contents of this specification and illustrations should be included in the protection scope of the present invention.

Claims

1. A cross-platform video playback system, characterized in that: include: A player construction module is used to construct a player component, save the player properties of the player component, set the state monitoring callback function of the player component, and define and set the operation function of the player component; A rendering module, connected to the player construction module, for rendering the player component to a corresponding aspect ratio according to a display state, switching a corresponding player skin, and adjusting a progress bar position of the player component; A compilation module, connected to the rendering module, is used to define the player properties, the state monitoring callback function and the operation function of the player component in both the first tool class and the second tool class, and import the first tool class when the compilation target platform is a Web platform, and import the second tool class when the compilation target platform is other platforms.

2. The cross-platform video playback system according to claim 1, characterized in that: The player attributes include a plurality of gesture event callback functions, each of which is called when a gesture event is triggered.

3. The cross-platform video playback system according to claim 2, characterized in that: The gesture events include custom gesture events and default gesture events; The custom gesture events include: click event, horizontal slide start event, horizontal slide middle event, horizontal slide end event, up and down slide start event, up and down slide middle event, up and down slide end event, up and down slide event of the left half of the video screen, up and down slide event of the right half of the video screen; The default gesture events include progress adjustment gestures, brightness adjustment gestures and volume adjustment gestures.

4. The cross-platform video playback system according to claim 1, characterized in that: The status monitoring callback function includes a playback error callback function, a start playback callback function, a pause playback callback function, a playback end callback function and a playback callback function.

5. The cross-platform video playback system according to claim 4, characterized in that: The playback callback function supports two callback frequencies: millisecond level and second level.

6. The cross-platform video playback system according to claim 1, characterized in that: The operation functions include a play parameter function, a video loading function, a start play function, a play pause function, a jump function, a full screen switch function, a display\hide play controller function and a screenshot function.

7. The cross-platform video playback system according to claim 1, characterized in that: The player skin switching process in the rendering module includes: According to the display state, the player skin of the player component is set to the corresponding custom skin attribute, or the children attribute of the player component is set, or the custom skin component corresponding to the display state is used to replace the default player skin of the player component to complete the switching of the player skin.

8. The cross-platform video playback system according to claim 7, characterized in that: The process of replacing the default player skin of the player component with the custom skin component corresponding to the display state includes: Replace the default progress bar style of the player component, replace the default playback progress percentage information window style displayed when sliding horizontally, replace the default system brightness percentage information window style displayed when the left half of the video screen slides up and down, and replace the default system volume percentage information window style displayed when the right half of the video screen slides up and down.

9. The cross-platform video playback system according to claim 1, characterized in that: The player attributes include a full-screen state attribute and a non-full-screen state attribute, and the process of adjusting the position of the progress bar in the rendering module includes: When the display state is full screen, the progress bar position is set according to the full screen state attribute, and when the display state is non-full screen, the progress bar position is set according to the non-full screen state attribute.

10. The cross-platform video playback system according to claim 9, characterized in that: In the full-screen state attribute, the position of the progress bar is set to be displayed within the video screen or outside the video screen; in the non-full-screen state attribute, the position of the progress bar is set to be displayed within the video screen or outside the video screen.

Images