Cross-platform video playing integration method and device, equipment and medium

Abstract

The invention relates to the technical field of infrastructure operation and maintenance and the field of financial science and technology, and discloses a cross-platform video playing integration method, which comprises the following steps of: creating a user-defined view class, packaging video playing functions of different platforms, defining a playing control interface in the view class, generating a global unique identifier and registering the global unique identifier to a cross-platform framework; and creating a new interface component through a cross-platform framework, configuring the component to quote the original video playing component, adding the interface component into a user interface of an application program, and establishing a communication mechanism between the component and the original video playing component. According to the method and the device, the consistency of video players in a cross-platform environment is realized by creating the user-defined view class and packaging video playing functions of different platforms. By defining a unified control interface, the development complexity caused by platform difference is reduced, and the cross-platform function adaptation process is simplified. By establishing a communication mechanism between the interface component and the original video playing component, the real-time performance and fluency of video playing are enhanced.

Description

Technical Field

[0001] The present invention relates to the fields of infrastructure operation and maintenance technology and financial technology, and in particular to a cross-platform video playback integration method, device, equipment and storage medium. Background Art

[0002] In the financial field, video players are widely used in financial live broadcast, remote customer service, training and education, investment analysis and other scenarios. The video players in the existing technology usually rely on the system's own player solution and the technical framework based on external textures. However, these existing technologies have significant shortcomings in practical applications, especially in cross-platform and high-performance demand scenarios, and face many challenges.

[0003] First, traditional external texture solutions rely on system interfaces provided by the platform for video rendering, such as CVPixelBufferRef on iOS and SurfaceTexture on Android. These solutions transfer image frame data through shared memory, and then the player renders it to the interface. However, this processing method involves multiple threads and rendering processes, which is prone to delays. Especially in complex high-frequency trading or financial data visualization scenarios, the freeze and delay of the video stream will directly affect the user's decision-making speed and judgment.

[0004] Secondly, existing players are usually limited to a single platform or specific hardware and lack cross-platform compatibility. In financial services, applications need to support multiple operating systems (such as iOS, Android, Windows, etc.) at the same time, and the performance of existing technologies in these systems is often uneven, especially when processing video rendering, there are performance differences, resulting in poor cross-platform consistency.

[0005] Therefore, existing technologies cannot fully meet the requirements for high-performance video playback in the financial field, especially in scenarios that require cross-platform compatibility and high real-time processing. How to improve the cross-platform compatibility of video players, optimize the video rendering process, and improve system resource utilization has become a technical problem that needs to be solved urgently. Summary of the invention

[0006] The main purpose of the present invention is to provide a cross-platform video playback integration method, device, equipment and storage medium, aiming to solve the technical problem that the video player in the prior art cannot run efficiently and consistently on different platforms in a cross-platform environment due to its reliance on external texture solutions, resulting in poor compatibility and performance issues.

[0007] To achieve the above object, the present invention provides a cross-platform video playback integration method, comprising:

[0008] Creating a custom view class, encapsulating video playback functions in different platform environments in the custom view class;

[0009] A video playback control interface is defined in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations;

[0010] Generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0011] Using the component creation method provided by the cross-platform framework, a new interface component is created, and the interface component is configured to reference the registered native video playback component;

[0012] The interface component is added to the user interface layout of the cross-platform application, and the properties of the interface component are configured, wherein the properties include size, position and video source, and a communication mechanism between the interface component and the native video playback component is established.

[0013] Furthermore, to achieve the above-mentioned purpose, the present invention provides a cross-platform video playback integrated device, comprising:

[0014] A view encapsulation module, used to create a custom view class, in which the video playback function under different platform environments is encapsulated;

[0015] A control interface module, used to define a video playback control interface in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations;

[0016] A component registration module, used to generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0017] An interface creation and configuration module, used to create a new interface component using a component creation method provided by a cross-platform framework, and configure the interface component to reference the registered native video playback component;

[0018] The interface layout and communication module is used to add the interface component to the user interface layout of the cross-platform application, configure the properties of the interface component, including size, position and video source, and establish a communication mechanism between the interface component and the native video playback component.

[0019] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a computer device, which includes a memory, a processor, and a cross-platform video playback integration program stored in the memory and executable on the processor, and the cross-platform video playback integration program, when executed by the processor, implements the steps of the cross-platform video playback integration method described above.

[0020] Furthermore, to achieve the above objectives, the present invention also provides a computer-readable storage medium, on which a cross-platform video playback integration program is stored, and when the cross-platform video playback integration program is executed by a processor, the steps of the cross-platform video playback integration method as described above are implemented.

[0021] Beneficial effects: The present invention relates to the fields of infrastructure operation and maintenance technology and financial technology, and discloses a cross-platform video playback integration method, which encapsulates the video playback functions of different platforms by creating a custom view class, defines a playback control interface in the view class, generates a globally unique identifier and registers it to a cross-platform framework, creates a new interface component through the cross-platform framework, configures the component to reference the native video playback component, adds the interface component to the user interface of the application, and establishes a communication mechanism between the component and the native video playback component. The present invention achieves the consistency of the video player in a cross-platform environment by creating a custom view class and encapsulating the video playback functions of different platforms. By defining a unified control interface, the development complexity caused by platform differences is reduced, and the adaptation process of cross-platform functions is simplified. In addition, by establishing a communication mechanism between the interface component and the native video playback component, efficient collaboration between the cross-platform application and the native system is achieved, and the real-time and smoothness of video playback are enhanced. The present invention significantly improves the overall performance of the cross-platform video player by reducing development workload, improving compatibility, optimizing video playback performance, and improving user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The present invention will be further described below with reference to the accompanying drawings and embodiments, in which:

[0023] Figure 1 A schematic diagram of an application environment of a cross-platform video playback integration method in an embodiment of the present invention;

[0024] Figure 2 A schematic diagram of a flow chart of an embodiment of a cross-platform video playback integration method of the present invention;

[0025] Figure 3 A schematic diagram of functional modules of a preferred embodiment of the cross-platform video playback integrated device of the present invention;

[0026] Figure 4 A schematic diagram of the structure of a computer device in one embodiment of the present invention;

[0027] Figure 5 FIG. 4 is another schematic diagram of the structure of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0028] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0029] The cross-platform video playback integration method provided by the embodiment of the present invention can be applied in the following aspects: Figure 1 In an application environment, the user end communicates with the server end through a network. The server end can create a custom view class through the user end, encapsulate the video playback function of different platforms, define the playback control interface in the view class, generate a globally unique identifier and register it to the cross-platform framework, create a new interface component through the cross-platform framework, configure the component to reference the native video playback component, add the interface component to the user interface of the application, and establish a communication mechanism between the component and the native video playback component. The present invention achieves the consistency of the video player in a cross-platform environment by creating a custom view class and encapsulating the video playback function of different platforms. By defining a unified control interface, the development complexity caused by platform differences is reduced and the adaptation process of cross-platform functions is simplified. In addition, by establishing a communication mechanism between the interface component and the native video playback component, efficient collaboration between the cross-platform application and the native system is achieved, and the real-time and smoothness of video playback are enhanced. The present invention significantly improves the overall performance of the cross-platform video player by reducing development workload, improving compatibility, optimizing video playback performance and improving user experience. Among them, the user end can be but not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices. The server end can be implemented with an independent server or a server cluster consisting of multiple servers. The present invention is described in detail below through specific embodiments.

[0030] See also Figure 2 , Figure 2 This is a flow chart of an embodiment of a cross-platform video playback integration method provided by the present invention. It should be noted that although a logical sequence is shown in the flow chart, in some cases, the steps shown or described may be performed in a different order than that shown here.

[0031] like Figure 2 As shown, the cross-platform video playback integration method proposed by the present invention includes the following steps:

[0032] S10, creating a custom view class, encapsulating video playback functions in different platform environments in the custom view class;

[0033] In this embodiment, the purpose of creating a custom view class is to provide a unified view layer interface in cross-platform applications, while encapsulating the native video playback functions of different platforms (such as iOS, Android, etc.). The custom view class is an abstract layer that associates the operations in the cross-platform framework with the view implementation of a specific platform. Each view class encapsulates a specific playback function according to the platform environment, ensuring that the video playback operation is transparent to the user, that is, no matter which platform is used, the video playback interface and control operations are the same.

[0034] Define a video playback view class that can support multiple platforms through code. The main function of a custom view class is to encapsulate the video playback function of a specific platform. Different platforms have different video playback APIs. For example, SurfaceView or TextureView can be used on Android, while system playback components such as UIView or AVPlayer can be used on iOS. The creation of a custom view class needs to take into account the characteristics of different platforms so that a unified interface call can be implemented on each operating system.

[0035] For example, on the iOS platform, the developer creates a class that inherits from UIView, such as CustomVideoView, which internally encapsulates the iOS AVPlayer component for rendering and controlling the playback of video content.

[0036] On the Android platform, developers create a custom class that inherits from SurfaceView or TextureView, such as CustomVideoSurfaceView, which implements the video playback function by encapsulating Android's MediaPlayer or ExoPlayer.

[0037] During the cross-platform framework integration process, these platform-specific view classes are integrated with the unified interface in the application through the cross-platform framework (such as Flutter, ReactNative). Developers can write common calling logic in the custom view class, while the platform-specific view class implements the details. In this way, through a unified interface, the application can call the player functions of each platform without having to deal with the implementation differences of each platform separately.

[0038] Encapsulating the video playback functions of different platforms means that developers implement a unified interface in the custom view class, abstracting the video playback operations of platforms such as iOS and Android, and avoiding repeated processing of the playback logic of each platform in cross-platform development. This encapsulation process includes encapsulating platform-specific APIs (such as iOS's AVPlayer and Android's MediaPlayer) into a unified playback interface, ensuring that cross-platform applications can use the same code to operate video playback without having to worry about the technical details of each platform.

[0039] In the process of iOS platform packaging, developers can use the AVPlayer interface to implement operations such as play, pause, and adjust volume, and integrate these functions in a custom UIView subclass. By providing a public method such as play(), when the method is called externally, the actual call is to the AVPlayer playback function.

[0040] On the Android platform, similarly, on the Android platform, the video playback function is implemented through MediaPlayer or ExoPlayer, and these native functions are encapsulated into subclasses of SurfaceView or TextureView. By encapsulating the playback function into a unified interface, such as play(), the same method can be called on different platforms to start playback.

[0041] Example description: In a live streaming service application in the financial field, users can watch real-time financial analysis videos on iOS and Android devices through a custom view class. This view class encapsulates the video playback logic of the two platforms, so that users do not need to perceive the platform differences when operating, and the playback experience remains consistent. This encapsulation improves the responsiveness of the video playback function and ensures that users can quickly receive real-time video analysis at critical moments such as market fluctuations.

[0042] By encapsulating the video playback functions of different platforms in custom view classes, the consistency and simplification of video playback operations on different platforms such as iOS and Android are achieved for cross-platform applications. This effectively reduces the complexity caused by platform differences, improves development efficiency, reduces repeated code writing, and improves the maintainability and scalability of the application.

[0043] S20, defining a video playback control interface in the custom view class, wherein the control interface includes play, pause, fast forward and fast rewind operations;

[0044] In this embodiment, the video playback control interface is an important part of the custom view class, and its function is to provide standardized playback control operations to the outside. These interfaces usually include basic video operation functions, such as play, pause, fast forward, fast rewind, etc. By defining these interfaces, the application layer does not need to directly process the native playback logic, but implements cross-platform operations by calling standardized interfaces. The design of this interface needs to ensure that a unified operation method is provided to the outside, while it is responsible for calling the native video control API of the corresponding platform.

[0045] The process of defining the playback control interface includes declaring a series of methods, such as play(), pause(), fastForward(), and rewind(). These methods should meet the needs of multi-platform applications. The specific implementation of each platform should comply with its native API standard, such as AVPlayer for iOS and MediaPlayer or ExoPlayer for Android. The interface should be provided to the application in a unified form. Developers only need to call these interfaces without worrying about the implementation details of the platform.

[0046] For each interface, the corresponding operations are performed in the implementation class of different platforms. For example, on iOS, the play() method calls AVPlayer.play(), while on Android, play() calls MediaPlayer.start() or ExoPlayer.play(). Similarly, the pause() method calls AVPlayer.pause() on iOS and MediaPlayer.pause() on Android.

[0047] Responsible for starting the video playback operation, the logic of starting the video is encapsulated in the custom view class. When the play() method is called externally, the playback logic corresponding to the platform will be executed inside the view class.

[0048] Provides a pause function that allows users to pause the video during playback. When the pause() method is called externally, the custom view class calls the pause function of the native platform.

[0049] The fast forward function allows users to skip part of the content by adjusting the playback progress. When fastForward() is called, the current playback time of the video will be adjusted internally according to the platform API.

[0050] The rewind function is similar to fast forward, allowing users to rewind to previous content. When rewind() is called, the internal logic adjusts the video playback progress to rewind to the specified time point.

[0051] Example description: In mobile applications in the financial field, users can easily control the playback, pause, fast forward and rewind of real-time financial news or market analysis videos through the control interface defined in the custom view class. This flexible operation method helps users pause or fast forward when important information is displayed, so as to obtain the required data more efficiently, improving the practicality and interactivity of financial services.

[0052] By defining a unified video playback control interface, cross-platform applications can seamlessly call video playback functions without having to worry about the specific implementation of each platform. This not only simplifies the development process, but also improves the maintainability and scalability of video control, ensures a consistent user experience on different platforms, and reduces development complexity.

[0053] S30, generating a globally unique identifier for the custom view class, and registering the custom view class and the globally unique identifier in a cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0054] In this embodiment, in a cross-platform application, in order to effectively manage and reference custom view classes, each view class instance requires a globally unique identifier (UUID). This identifier ensures that each view instance can be uniquely identified in the application and prevents repeated references or conflicts. The process of generating a globally unique identifier can be implemented through a common library of the platform (such as UUID.randomUUID() in Java or the NSUUID class in iOS), ensuring that the identifiers generated on different platforms are globally unique.

[0055] When the application starts, the system generates a unique identifier for each custom view class instance. For the Android platform, you can use UUID.randomUUID() to generate a unique identifier; on the iOS platform, you can use the UUID() method of the NSUUID class to generate a UUID. Each platform generates a unique identifier in its own way and ensures that the identifier remains consistent throughout the application life cycle.

[0056] The generated identifier needs to be stored in the application's registry or similar data structure so that it can be passed or referenced between different components. At the same time, the registry will save the mapping relationship between each view class and its UUID to ensure that the instance of the view class can be quickly found when needed.

[0057] The cross-platform framework needs to manage custom view class instances for different platforms. By registering the view class with its globally unique identifier with the framework, you can ensure that the framework can correctly identify and call these instances at runtime. The registration process is not just a simple mapping of identifiers to view classes, but also requires the cross-platform framework to automatically load and manage these view classes each time the application starts.

[0058] When a cross-platform application is started, the system automatically calls a registration function to register the generated global unique identifier and the custom view class with the cross-platform framework. For example, in ReactNative or Flutter, use the corresponding plug-in management tool (such as React Native's AppRegistry or Flutter's PluginRegistrar) to register these components with the framework. In this way, during the life cycle of the application, each view class can be correctly called and managed through its unique identifier.

[0059] Through the registration mechanism of UUID and view class, the framework can dynamically load and reference the native video playback component at runtime. Whenever a new view class needs to be instantiated, the framework will automatically identify and call the instantiation method of the class based on the UUID and load it into the interface.

[0060] The native video playback component is an encapsulation layer of the system player that integrates with the cross-platform framework, allowing custom view classes to directly call the platform's video playback functions. By associating these components with custom view classes, applications can call video playback functions on different platforms without having to deal with the differences of each platform separately. The registration process ensures that the playback components of each platform can be called by the cross-platform framework under a unified interface.

[0061] When a cross-platform app is started, in addition to registering the custom view class, the system also registers the corresponding native video playback component. These components are usually implemented on each platform, such as AVPlayer on iOS and MediaPlayer on Android. The framework associates the custom view class with the native playback component through UUID so that these functions can be called in the app.

[0062] Example description: In cross-platform applications in the financial field, real-time video playback is critical, such as real-time financial live broadcasts or video conferencing services. By generating a globally unique identifier for each video playback component and registering it with the cross-platform framework, the consistency and efficient management of video playback components on different platforms (such as Android and iOS) are ensured. In a large financial live broadcast platform, when users need to watch different real-time live broadcasts or market analysis, the system can quickly call the corresponding video playback component through the unique identifier, ensuring that each user can seamlessly switch video streams, providing a smooth viewing experience, and reducing the inconvenience caused by platform compatibility issues.

[0063] By generating a globally unique identifier for the custom view class and registering it with the cross-platform framework when the application starts, the problem of complex reference and management of video playback components on different platforms is solved. The management efficiency of video playback components in cross-platform applications is improved, the uniqueness and accuracy of each video playback component is ensured, and the development and maintenance process of cross-platform applications is simplified, improving the stability and performance of the system.

[0064] S40, using a component creation method provided by a cross-platform framework to create a new interface component, and configuring the interface component to reference the registered native video playback component;

[0065] In this embodiment, cross-platform frameworks (such as Flutter, ReactNative) usually provide standardized APIs for creating user interface components on different platforms. Through the component creation methods of these frameworks, developers can define and build cross-platform UI interfaces to ensure that applications perform consistently on different operating systems. The focus of this step is to use the interface provided by the framework to generate a new interface component so that it can further reference the native video playback component that has been registered before.

[0066] In a cross-platform framework, developers create a new UI component instance by calling a standard API (such as Flutter's create method or ReactNative's View component). In Flutter, you can create cross-platform views through the PlatformView component, allowing Flutter applications to use native views of iOS and Android. In ReactNative, you can use the NativeModules bridge to interact with native components.

[0067] The newly created component will be initialized through the framework's lifecycle methods. During this process, developers can configure the basic properties of the interface components (such as width, height, display position, etc.) to ensure that the interface is adapted to various devices and screen resolutions.

[0068] The interface components in the cross-platform framework need to be able to reference the previously registered native video playback components. In this way, the interface components can call the native playback logic to implement video playback functions on different operating systems. The purpose of this configuration is to establish a mapping relationship between the interface components and the native video playback components, so that the interface components can control video playback by calling the framework interface.

[0069] After creating a new UI component, developers need to associate it with the previously registered native video player component through the interface provided by the framework. In Flutter, use PlatformView to bind the Flutter view to the native view. In React Native, you can use NativeModules or RCTView to reference the native video player to ensure that user operations can be passed to the native video player component.

[0070] In the interface component, you also need to configure the relevant properties of the native playback component, such as the video URL, playback control, volume settings, etc. Developers can use the interface provided by the framework to correspond these properties to the functions of the native component, so that the interface component can directly control the native video playback operation.

[0071] Example description: In a mobile application in the financial field, users can watch real-time market analysis and video conferences through a newly created interface component. The developer created a UI component using a cross-platform framework and referenced it to the native video playback component by configuring the component properties. When operating the interface component, the user can directly control operations such as video playback, pause, and fast forward, ensuring the consistency and efficiency of the video on Android and iOS platforms. This implementation method greatly improves the user's interactive experience in financial applications, especially in scenarios where rapid response to market changes is required, ensuring the real-time and accuracy of user operations.

[0072] By using the component creation method provided by the cross-platform framework, developers can quickly generate new user interface components and establish close associations with native video playback components. This ensures the consistency and efficiency of video playback functions on different platforms, reducing the complexity of development. It ensures the smoothness of cross-platform video playback operations, improves user experience, and greatly simplifies the integration process of video components.

[0073] S50, adding the interface component to the user interface layout of the cross-platform application, configuring the properties of the interface component, the properties including size, position and video source, and establishing a communication mechanism between the interface component and the native video playback component.

[0074] In this embodiment, the created and configured interface components are embedded into the UI layout of the cross-platform application so that the video player can display normally and respond to user operations. Cross-platform frameworks (such as Flutter, React Native) provide a layout system that allows developers to arrange components according to layout rules (such as horizontal, vertical layout, or relative layout). By adding interface components to the layout, the video player can be displayed as an independent view in the application.

[0075] In a cross-platform framework, developers need to define a layout structure to accommodate newly created interface components. The UI elements are organized through the layout management system provided by the framework (such as Column, Row in Flutter or Flexbox layout in ReactNative) and the video player component is embedded in it. Developers can define the position and size of the component on the page and its relative relationship with other components according to their needs.

[0076] When the application is running, the interface components are loaded into the user interface according to the defined layout. At this point, the video player component becomes part of the application interface, and users can interact with the player through the UI.

[0077] Configuring the properties of UI components is part of ensuring the display and functionality of the video player. Key properties include:

[0078] Dimensions: Determine the width and height of the video player to ensure it fits across devices and screen resolutions.

[0079] Position: Defines the relative position of the component in the layout (such as at the top, bottom, or center) to ensure that users can easily view the video content.

[0080] Video source: refers to the path or URL of the video file played by the video player. The video source can be a local file or video content provided by network streaming media.

[0081] Developers can dynamically set the width and height attributes of the player according to the size of the device screen to ensure that the video player can be displayed properly on all devices. For example, in Flutter, you can use MediaQuery to obtain the screen size and set the size of the video player as needed. Set the position of the video player in the interface through a layout manager (such as position in ReactNative or Align in Flutter) to ensure that it is displayed in the expected position in the application layout. When the video player is initialized, the developer needs to specify a video source for the player (such as a network streaming URL or a local video file path). This video source will be passed to the player component for it to play the video content.

[0082] The communication mechanism is the key to ensure that the interface component (cross-platform framework part) and the native video player component (platform-specific part) can interact in real time. Through this mechanism, the interface component can send commands (such as play, pause, jump) to the native player component and receive status feedback from the native player (such as buffer status, playback progress, error information, etc.).

[0083] Developers need to design a communication protocol between the interface component and the native video playback component to define how to transmit playback control commands and how to feedback status information. Usually, this communication is achieved through channels provided by cross-platform frameworks (such as Flutter's Platform Channels or React Native's NativeModules).

[0084] During the communication process, the interface component will pass commands to the native video playback component by calling specific interfaces (such as play, pause), and the native component will pass the current playback status (such as end of playback, buffering completion, etc.) to the interface component through callback functions or event listeners to ensure that the interface and playback status are updated synchronously.

[0085] Example description: In financial applications, real-time video playback is used to display market analysis and real-time data streams. For example, when a user opens a stock market analysis application, the application can create a video player component through a cross-platform framework, embed it into the UI layout, and configure the component's size and video source (such as the URL of the real-time market data stream). Through the communication mechanism, users can control the playback and pause of the video, and receive feedback on the video playback status (such as buffering completion and real-time playback progress), thereby ensuring that users get the best viewing experience and effectively improve their grasp of the market.

[0086] By adding the interface component to the application layout and configuring its properties, the video playback function can be seamlessly integrated into the cross-platform application. Combined with the communication mechanism, the interface component and the native video playback component can interact in real time to ensure the consistency of feedback between user operations and playback status. This enhances the smoothness of video playback and user experience, and simplifies the integration difficulty of the video player during cross-platform development.

[0087] The present invention relates to the fields of infrastructure operation and maintenance technology and financial technology, and discloses a cross-platform video playback integration method, which encapsulates video playback functions of different platforms by creating a custom view class, defines a playback control interface in the view class, generates a globally unique identifier and registers it to a cross-platform framework, creates a new interface component through the cross-platform framework, configures the component to reference a native video playback component, adds the interface component to the user interface of an application, and establishes a communication mechanism between the component and the native video playback component. The present invention achieves consistency of video players in a cross-platform environment by creating a custom view class and encapsulating video playback functions of different platforms. By defining a unified control interface, the development complexity caused by platform differences is reduced, and the adaptation process of cross-platform functions is simplified. In addition, by establishing a communication mechanism between the interface component and the native video playback component, efficient collaboration between cross-platform applications and native systems is achieved, and the real-time and smoothness of video playback are enhanced. The present invention significantly improves the overall performance of a cross-platform video player by reducing development workload, improving compatibility, optimizing video playback performance, and improving user experience.

[0088] In one embodiment, in the above S10, encapsulating the video playback function in different platform environments in the custom view class includes:

[0089] S101, develop independent video playback function modules that can run on different platform environments;

[0090] S102, defining a unified interface for the independent video playback function module;

[0091] S103, creating an adapter class, wherein the adapter class is used to convert the method of the unified interface into a video playback API call of a target platform environment;

[0092] S104, associating the adapter class with the custom view class, so that the custom view class can call the video playback function of the target platform environment through a unified interface.

[0093] In this embodiment, in a cross-platform application, since different platforms (such as iOS and Android) have their own system architecture and video playback API, it is necessary to develop an independent video playback function module that can run in different platform environments. The main goal of the encapsulation is to create a common view class so that it can call the respective playback API on different platforms to achieve consistent video playback operations.

[0094] On each platform, developers need to implement a video playback module that interfaces with the system API. For example, AVPlayer can be used on iOS, while MediaPlayer or ExoPlayer can be used on Android. These modules encapsulate the specific video playback logic and can respond to operations such as play, pause, and fast forward. The independent modules of each platform ensure that they have the same capabilities (such as supporting local and network video sources) in implementing the basic functions of video playback.

[0095] When a cross-platform application is started, the system will dynamically load the independent video playback module of each platform and associate it with the interface component. According to user operations, the independent module will be triggered to realize the playback function.

[0096] In order to ensure the simplicity and consistency of cross-platform applications, a unified interface must be defined for the independent video playback function modules of each platform. This interface abstracts the common operations of video playback, such as play(), pause(), seekTo(), etc., to ensure that when calling on different platforms, developers do not need to worry about the differences in specific platforms.

[0097] Developers need to design a unified interface that includes common video operations. For example, define the IVideoPlayer interface, which includes methods such as play(), pause(), and seekTo(intposition). Each independent module of each platform needs to implement this interface and provide an implementation corresponding to the platform API. This interface serves as a unified entry point for cross-platform calls. When the application layer calls this interface, it does not need to care about the underlying platform details. The framework automatically selects the appropriate implementation based on the platform.

[0098] The adapter class is used to connect the unified interface with the video playback API of different platforms. Through the adapter mode, platform-specific API calls can be hidden in the adapter class to ensure that the logic of cross-platform applications is not affected by the underlying implementation.

[0099] Developers need to design corresponding adapter classes for each platform, such as iOSVideoPlayerAdapter and AndroidVideoPlayerAdapter. These adapter classes convert the methods of the cross-platform interface into API calls for the corresponding platform. For example, in the iOS adapter class, the play() method calls AVPlayer.play(), while in the Android adapter class, the play() method calls MediaPlayer.start() or ExoPlayer.play(). The adapter ensures the consistency of video playback operations on each platform and simplifies development by converting calls to the unified interface into calls to the API of each platform.

[0100] The custom view class is the view layer of a cross-platform application. It interacts with the APIs of each platform by calling methods in the adapter class. By associating the adapter class with the custom view class, you can ensure that the custom view class can uniformly call the adapter method, thereby indirectly calling the platform-specific API.

[0101] In the custom view class, developers need to instantiate the corresponding adapter class for each platform. By determining the currently running operating system, the custom view class will select the appropriate adapter class to associate with it. For example, if the application is running on iOS, the custom view class will call iOSVideoPlayerAdapter; if it is running on Android, it will call AndroidVideoPlayerAdapter. Once the adapter class is associated with the custom view class, the operations in the custom view class (such as play()) will be passed to the playback API of the underlying platform through the adapter, ensuring consistent video playback functionality on all platforms.

[0102] This embodiment simplifies the development of video playback functions in cross-platform applications by encapsulating video playback functions in different platform environments and using a unified interface and adapter mode. Developers do not need to write different codes for each platform separately, but only need to call the platform-specific playback API through a unified interface. This reduces development and maintenance costs, improves code reusability and consistency, and ensures the uniformity and smoothness of video playback experience in cross-platform applications.

[0103] In one embodiment, in the above S30, generating a globally unique identifier for the custom view class, and registering the custom view class and the identifier in the cross-platform framework when the cross-platform application is started, includes:

[0104] S301, determining a strategy for generating a globally unique identifier based on compatibility requirements and application scenarios;

[0105] S302, generating the globally unique identifier for the custom view class based on the generation strategy;

[0106] S303, constructing a registration function, wherein the registration function is used to register the association relationship between the custom view class and the globally unique identifier in the cross-platform framework;

[0107] S304, when the cross-platform application is started, calling the registration function, and adding the association relationship between the custom view class and the globally unique identifier to the registration center of the cross-platform framework;

[0108] S305: Record the mapping relationship between the custom view class and the globally unique identifier in the registration center.

[0109] In this embodiment, in order to ensure that each custom view class instance in a cross-platform application can be uniquely identified, a universally unique identifier (UUID) needs to be generated for it. The generation strategy should be determined based on the platform compatibility and application scenarios, including considering the characteristics of different operating systems (such as iOS and Android) and how to manage the life cycle and persistent data of view classes on these platforms. This generation strategy ensures that all platforms can use a standardized identifier mechanism to avoid identification conflicts.

[0110] Developers can choose to generate identifiers based on the UUID standard (such as RFC 4122) to generate compatible UUIDs on various platforms. For example, the Android platform can use UUID.randomUUID(), while iOS uses the UUID() method of the NSUUID class to generate globally unique identifiers. This approach ensures that the identifiers generated in a cross-platform environment are globally unique and avoid duplication and conflict.

[0111] According to the generation strategy determined above, a unique identifier is generated for each custom view class during the life cycle of the application. The identifier should remain consistent in different runtime environments to ensure that each view class can be uniquely identified by the identifier in different operating systems.

[0112] When the application starts, the system generates a UUID for the custom view class according to the API provided by the platform. On the iOS platform, use NSUUID to generate a UUID object and return an identifier; on the Android platform, use UUID.randomUUID() to generate a UUID. This identifier will be used as the unique identifier of the view class to ensure its consistency in subsequent operations.

[0113] The registration function is responsible for associating the custom view class with the generated globally unique identifier. This step ensures that the custom view class can be correctly referenced and managed by its identifier when the application is running. The main task of the registration function is to bind the identifier to the view class instance and establish a mapping relationship in the cross-platform framework.

[0114] Developers need to build a registration function that is called when the application starts and is responsible for associating the view class instance with its identifier. This registration function may be called through the API provided by the cross-platform framework (such as Flutter's PluginRegistrar or React Native's AppRegistry). The registration function uses the identifier as the key and the view class instance as the value to store it in the registry.

[0115] When the application starts, the cross-platform framework needs to automatically call the registration function, associate each view class with its unique identifier, and add it to the framework's registry. The registry is a storage structure that maintains a mapping between view classes and their identifiers, ensuring that the corresponding view class can be accessed by the identifier in any part of the application.

[0116] When the application starts, the system automatically calls the registration function to register each custom view class and its generated globally unique identifier in the cross-platform framework registration center. This process ensures that each view class in the application can be uniquely identified and accessed through the identifier.

[0117] The main role of the registry is to maintain the mapping between view classes and globally unique identifiers. Through this mapping, cross-platform frameworks can quickly find and reference view class instances when needed. The registry acts as a central storage structure to ensure that all view classes can be accessed by their identifiers.

[0118] In the registration center, the system stores instances of custom view classes and their identifiers in the form of key-value pairs. Developers can call these mapping relationships through the API provided by the cross-platform framework to quickly find and use these view class instances in different scenarios.

[0119] This embodiment generates a globally unique identifier for the custom view class and registers it with the cross-platform framework, thereby ensuring the uniqueness and consistency of the view class instance in the cross-platform environment. This registration mechanism can effectively manage the life cycle of the view class, prevent identifier conflicts, and simplify the reference and management of components applied on different platforms, thereby improving the scalability and maintainability of the system.

[0120] In one embodiment, the above S40 includes:

[0121] S401, obtaining a globally unique identifier corresponding to the custom view class from a registration center of the cross-platform framework;

[0122] S402, using the component creation method provided by the cross-platform framework to initialize a new interface component instance;

[0123] S403, according to the globally unique identifier, retrieve and instantiate a corresponding registered native video playback component from the cross-platform framework;

[0124] S404: Associating the instantiated native video playback component with the newly created interface component.

[0125] In this embodiment, the registration center of the cross-platform framework stores all custom view classes and their corresponding globally unique identifiers. When creating a new component, it is first necessary to obtain the unique identifier associated with the target custom view class from the registration center to ensure that the correct native video playback component is referenced. This step ensures that the newly created interface component can be correctly associated with the previously registered native component.

[0126] By calling the API provided by the cross-platform framework (such as PluginRegistrar in Flutter or AppRegistry in ReactNative), obtain the globally unique identifier corresponding to the custom view class from the registration center. This identifier is the key to correctly locate and associate the native video playback component when creating a new interface component.

[0127] The cross-platform framework provides standardized APIs for creating new interface components in applications. Through these creation methods, developers can generate new components that conform to platform characteristics and embed them into the user interface of the application. This step aims to use the framework's component creation methods to generate a new, operational video playback interface.

[0128] Developers use cross-platform framework APIs, such as Flutter's PlatformView or ReactNative's View, to initialize a new interface component instance. This component will serve as a container for the video playback function, allowing users to perform interactive operations on video playback. During the initialization process, developers can configure the basic properties of the interface component (such as size, position, style, etc.) to ensure that its appearance and interactive functions meet application requirements.

[0129] With the globally unique identifier obtained in the previous step, developers can retrieve the registered native video playback component instance in the cross-platform framework. The goal of this step is to find the component instance corresponding to the identifier from the framework and load its functions so that it can be used in the newly created interface component.

[0130] The cross-platform framework's registration center stores the mapping between each component's unique identifier and its native implementation. By calling the API, the registered native video player component is retrieved based on the identifier. Flutter can use PlatformChannels to communicate with native code, while React Native can use NativeModules to retrieve and instantiate the corresponding native video player component. Once the native video player component is retrieved, the developer needs to instantiate it so that it can be called and operated in the newly created interface component.

[0131] The last step is to associate the instantiated native video playback component with the newly created UI component. This association enables users to actually control the underlying native video playback function when operating the UI component in the cross-platform application. This association ensures that the video playback logic of the cross-platform application is consistent with that of the native platform.

[0132] Through the interface provided by the cross-platform framework, developers can bind the interface component to the instantiated native video player component. Through this binding, the operations of the interface component (such as play, pause, fast forward, etc.) will be directly passed to the underlying native video player component, ensuring the normal operation of the function and the consistency of the user experience.

[0133] This embodiment generates an interface component by using a component creation method of a cross-platform framework and associates it with a native video playback component, thereby effectively managing the video playback function in a cross-platform application. This not only simplifies the development process, but also ensures consistency on different platforms, thereby optimizing native performance and improving cross-platform experience.

[0134] In one embodiment, in the above S50, adding the interface component to the user interface layout of the cross-platform application and configuring the properties of the interface component include:

[0135] S501, determining video content to be played, and allocating a video source to the interface component based on the video content, wherein the video source includes a network stream address or a local file path;

[0136] S502, designing a user interface layout according to the size of the video content and the screen size of the target device;

[0137] S503, configuring the size, position and style of the interface component according to the video content and user interface layout requirements;

[0138] S504, integrating a play control in the interface component, wherein the play control includes a play button, a progress bar or a volume control;

[0139] S505: Add the interface component to the user interface layout.

[0140] In this embodiment, the core of video playback lies in the selection of video source. The video source can be a local file path or a network streaming media address. This step requires determining the specific type of the video source according to the user's needs or scenarios, and assigning the video source to the interface component so that the component can load and play the corresponding video content.

[0141] If the video content is stored locally on the device, developers can pass it to the video player via the file path. For example, use Uri.parse() on Android to parse the local file path, and use the NSURL object on iOS.

[0142] For online videos, developers need to pass the video stream address as the video source to the UI component. Set the video stream URL through the API of the cross-platform framework (such as Flutter's NetworkPlayer or React Native's Video component).

[0143] The display effect of video content is closely related to the size of the device screen. In order to ensure the best user experience for video playback, the layout design of interface components needs to be combined with the video resolution and device screen size to ensure that the proportion and position of the video content can be adapted on different devices.

[0144] Developers can adjust the aspect ratio of the video component by obtaining the device's screen size (such as using MediaQuery in Flutter and Dimensions in ReactNative), and dynamically set the size of the component according to the resolution of different screens to ensure that the video is not stretched or cropped during playback.

[0145] Design the user interface using the layout system of a cross-platform framework (such as Align or AspectRatio in Flutter, Flexbox layout in React Native) to ensure that the video is properly positioned in the app layout to provide the best viewing experience.

[0146] The video player interface component needs to configure its display properties according to the characteristics of the video content (such as aspect ratio, resolution) and the overall layout requirements of the user interface (such as page structure, user operation habits). Ensure that the size, position and style (such as borders, background color, etc.) of the video component can provide a consistent experience on different devices.

[0147] When creating a video playback interface component, developers need to configure the width and height of the component according to the screen size and the actual resolution of the video. For example, developers can fix the aspect ratio of the video to 16:9 or 4:3, and dynamically adjust its position according to the screen size to ensure the complete display of the video.

[0148] According to the UI design specifications of the application, configure style properties for the video playback component, such as borders, background colors, shadow effects, etc., to ensure consistency with other interface elements.

[0149] In order to facilitate users to control the playback of videos, playback controls need to be integrated into the interface components, including play buttons, progress bars, volume controls, etc. These controls allow users to interact with video playback, such as controlling playback progress, adjusting volume, or pausing / resume playback.

[0150] Design a play / pause button in the interface component and use the interactive controls provided by the cross-platform framework (such as IconButton in Flutter or TouchableOpacity in ReactNative) to capture the user's playback operation.

[0151] Use a progress bar control (such as Slider in Flutter and ProgressBar in ReactNative) to show the playback progress of the video and allow users to drag the progress bar to jump to any time point in the video.

[0152] Provide users with controls (such as sliders or buttons) to adjust the volume, and control volume settings by calling native platform APIs.

[0153] After completing the configuration of the interface component and the integration of controls, you need to add the component to the overall layout of the application to make it part of the application UI, allowing users to watch and control video playback.

[0154] Use the layout system of a cross-platform framework (such as Flutter's Column, Row layout or React Native's View component) to embed the configured video playback component and its control elements (such as buttons and progress bars) into the user interface so that it can work with other interface elements.

[0155] This embodiment ensures the complete integration and smooth interaction of the video playback function by determining the video source, configuring the size and style of the interface components, integrating the playback controls, and adding the components to the user interface layout, so that cross-platform applications can provide a consistent video viewing experience on different devices and allow users to freely control the playback progress, volume, and other functions.

[0156] In one embodiment, in the above S50, establishing a communication mechanism between the interface component and the native video playback component includes:

[0157] S506, designing a communication protocol between the interface component and the native video playback component, wherein the communication protocol is used to determine a format and rules for exchanging information between the interface component and the native video playback component;

[0158] S507, defining a message transmission interface between the interface component and the native video playback component, wherein the message transmission interface is used for the interface component to send commands and receive events from the native video playback component;

[0159] S508, creating an event listener in the interface component to monitor user interaction and send corresponding commands to the native video playback component;

[0160] S509, setting a status callback mechanism in the native video playback component to notify the interface component of a playback status change;

[0161] S510, configuring a data channel between the interface component and the native video playback component, wherein the data channel is used to transfer video metadata between the interface component and the native video playback component.

[0162] In this embodiment, the communication protocol is the basis for the interaction between the interface component and the native video playback component. The purpose of designing the communication protocol is to ensure that the two components can exchange information through the same rules and formats. The communication protocol needs to define the format for transmitting commands (such as play, pause, fast forward, etc.) and receiving status feedback (such as playback status, buffer status, error information, etc.).

[0163] The communication protocol needs to define the format of the message, such as using JSON or binary data to describe the transmitted information. Developers can specify the specific format of each command, including command name, parameter type (such as timestamp, progress, volume value, etc.) and return value.

[0164] In addition to the format, rules for information exchange must also be specified, including sending frequency, response time, etc. This ensures that the interface components and native video playback components can communicate effectively at the right time.

[0165] The message passing interface is responsible for the two-way communication between the interface component and the native video playback component. The interface component sends commands (such as play, pause, adjust volume, etc.) through this interface, and the native video playback component feeds back events (such as playback status, error, end, etc.) to the interface component through this interface.

[0166] Through the API provided by the cross-platform framework (such as Flutter's MethodChannel or ReactNative's NativeModules), the interface component can call the message passing interface to send control commands to the native component. These commands will be passed to the native playback component according to the format and rules of the communication protocol.

[0167] The native video playback component can send state changes, such as the current playback progress, buffering status, or error status, to the interface component through a callback mechanism or event listener through a messaging interface.

[0168] Event listeners are used to capture user interactions (such as clicking the play button, dragging the progress bar, etc.) and send corresponding control commands to the native video playback component based on these operations. Event listeners ensure that user operations can be reflected in the video playback in real time and that the interface components can respond to user operations.

[0169] Set multiple event listeners in the interface components, such as click, drag and other operations. Through these listeners, the system can capture the user's needs for operations such as play, pause, fast forward, volume control, etc.

[0170] After capturing the user interaction, the event listener will call the message passing interface to send the corresponding command to the native video playback component. This can be implemented through the API of the cross-platform framework, such as onPressed in Flutter or onPress in ReactNative.

[0171] The state callback mechanism ensures that the native video playback component can notify the interface component of its own state changes (such as playback progress, buffering completion, playback end, etc.) in real time. The interface component can update the UI through these callbacks, such as updating the progress bar or prompting the completion of playback.

[0172] The native video playback component needs to design a callback mechanism to monitor its own state changes and notify the interface component through the message passing interface. For example, when the playback progress changes, the progress callback method is called to send the current playback time.

[0173] When the state of a native component changes, the system will pass the state information to the interface component through a callback mechanism. The interface component can adjust the UI based on this state information, such as updating the progress bar, displaying a playback completion message, etc.

[0174] The data channel is used to transfer video metadata (such as video duration, current playback time, resolution, format, etc.) between the UI component and the native video player component. This provides important runtime information for the video player component, helping the UI component and the native component stay in sync.

[0175] Through cross-platform framework APIs (such as Flutter's EventChannel or React Native's Bridge), developers can configure data channels to transmit video metadata. The data channel can continuously update the video's playback progress, duration, and other information, allowing the interface component to display the current playback status.

[0176] Through the data channel, the interface component can receive metadata from the native video playback component and display it to the user, ensuring the synchronous update of the playback progress and metadata.

[0177] This embodiment achieves efficient interaction between the interface component and the native video playback component by establishing a communication mechanism between the two. The communication protocol ensures that the format and rules of information exchange are consistent, the message passing interface provides a channel for command and event transmission, and the event listener and status callback mechanism ensure real-time synchronization of user operations and video playback status. The data channel further ensures the transmission and display of metadata, providing a smooth and seamless video playback experience.

[0178] In one embodiment, in the above S20, defining a video playback control interface in the custom view class includes:

[0179] S201, analyzing the requirements of the video playback function and determining the required control commands;

[0180] S202, defining the specifications of the video playback control interface in the custom view class, including the name of the control command, parameter type and return value type.

[0181] In this embodiment, before defining the video playback control interface, it is first necessary to analyze the specific requirements of user interaction and video playback in the application scenario. Based on these requirements, the developer needs to determine which control commands are needed to implement basic playback functions. Common control commands include: play, pause, stop, fast forward, fast rewind, adjust volume, mute, etc. Each control command needs to have clear input (such as user operation) and output (such as player status feedback).

[0182] Developers need to work with the product design team to analyze the scenarios in which users use the video player and determine which commands are necessary. For example, for an app that requires users to frequently skip ads, a fast-forward command will be essential; while in an educational app, pause and replay functions are key.

[0183] According to the analysis results, determine the specific control command. For example, the following command can be determined:

[0184] play(): Start playing the video;

[0185] pause(): Pause the currently playing video;

[0186] stop(): stop playing;

[0187] seekTo(intposition): jump to the specified time point;

[0188] setVolume(float volume): Set the volume.

[0189] After determining the functional requirements and control commands for video playback, the next step is to define the interface specifications for these commands. The specifications include the name of the control command, parameter type, return value type, etc. Each interface should clearly describe its function, as well as the parameter type it requires (such as time, volume, etc.) and the return value after execution (such as success or failure, or the current playback status).

[0190] Define clear names for each video control operation, such as play(), pause(), seekTo(intposition), etc. These names need to be unified and have clear meanings to facilitate developers to call.

[0191] Each control command needs to define the required parameter type according to actual needs. For example:

[0192] play(): No parameters are required, start playing directly;

[0193] seekTo(int position): requires an integer parameter, indicating the time point to jump to (milliseconds or seconds);

[0194] setVolume(float volume): requires a floating-point parameter, which indicates the volume (0.0 to 1.0).

[0195] Define the return value type of each interface, such as a Boolean value (true / false) indicating whether the operation is successful, or returning the current playback status. For example:

[0196] play(): Returns a Boolean value indicating whether the video is played successfully;

[0197] seekTo(): ​​Returns a Boolean value indicating whether the jump operation was successful.

[0198] By analyzing the requirements of the video playback function and defining the specifications of the control interface, the developer can create an interface system with a clear structure, simplifying the application layer's call to the video playback function. This not only makes the control operation more intuitive, but also makes the function more stable and easy to maintain through clear parameter and return value types.

[0199] In one embodiment, a cross-platform video playback integrated device is provided, and the cross-platform video playback integrated device corresponds to the cross-platform video playback integrated method in the above embodiment. Figure 3 , Figure 3 This is a functional module diagram of a preferred embodiment of the cross-platform video playback integrated device of the present invention. View encapsulation module 10, control interface module 20, component registration module 30, interface creation and configuration module 40 and interface layout and communication module 50. The functional modules are described in detail as follows:

[0200] A view encapsulation module 10 is used to create a custom view class, in which the video playback function under different platform environments is encapsulated;

[0201] A control interface module 20, used to define a video playback control interface in the custom view class, wherein the control interface includes play, pause, fast forward and fast rewind operations;

[0202] A component registration module 30, configured to generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in a cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0203] The interface creation and configuration module 40 is used to create a new interface component using the component creation method provided by the cross-platform framework, and configure the interface component to reference the registered native video playback component;

[0204] The interface layout and communication module 50 is used to add the interface component to the user interface layout of the cross-platform application, configure the properties of the interface component, including size, position and video source, and establish a communication mechanism between the interface component and the native video playback component.

[0205] In one embodiment, the view encapsulation module 10 is specifically used for:

[0206] Develop independent video playback function modules that can run on different platform environments;

[0207] Defining a unified interface for the independent video playback function module;

[0208] Creating an adapter class, the adapter class is used to convert the method of the unified interface into a video playback API call of a target platform environment;

[0209] The adapter class is associated with the custom view class, so that the custom view class can call the video playback function of the target platform environment through a unified interface.

[0210] In one embodiment, the component registration module 30 is specifically used to:

[0211] Determine the strategy for generating a globally unique identifier based on compatibility requirements and application scenarios;

[0212] Based on the generation strategy, generate the globally unique identifier for the custom view class;

[0213] Constructing a registration function, wherein the registration function is used to register the association relationship between the custom view class and the globally unique identifier in the cross-platform framework;

[0214] When the cross-platform application is started, the registration function is called to add the association relationship between the custom view class and the globally unique identifier to the registration center of the cross-platform framework;

[0215] The mapping relationship between the custom view class and the globally unique identifier is recorded in the registration center.

[0216] In one embodiment, the interface creation and configuration module 40 is specifically used to:

[0217] Obtaining a globally unique identifier corresponding to the custom view class from a registration center of the cross-platform framework;

[0218] Use the component creation method provided by the cross-platform framework to initialize a new interface component instance;

[0219] According to the globally unique identifier, retrieve and instantiate a corresponding registered native video playback component from the cross-platform framework;

[0220] Associate the instantiated native video player component with the newly created UI component.

[0221] In one embodiment, the interface layout and communication module 50 is specifically used for:

[0222] Determine the video content to be played, and allocate a video source to the interface component based on the video content, wherein the video source includes a network stream address or a local file path;

[0223] Designing user interface layouts based on the dimensions of the video content and the screen size of the target device;

[0224] Configuring the size, position and style of the interface components according to the video content and user interface layout requirements;

[0225] Integrating playback controls in the interface component, the playback controls including a play button, a progress bar or a volume control;

[0226] The interface component is added to the user interface layout.

[0227] In one embodiment, the interface layout and communication module 50 is specifically used for:

[0228] Designing a communication protocol between the interface component and the native video playback component, wherein the communication protocol is used to determine the format and rules for exchanging information between the interface component and the native video playback component;

[0229] A message transmission interface is defined between the interface component and the native video playback component, wherein the message transmission interface is used for the interface component to send commands and receive events from the native video playback component;

[0230] Creating an event listener in the interface component to monitor user interactions and send corresponding commands to the native video playback component;

[0231] A state callback mechanism is set in the native video playback component to notify the interface component of playback state changes;

[0232] A data channel is configured between the interface component and the native video playback component, and the data channel is used to transfer video metadata between the interface component and the native video playback component.

[0233] In one embodiment, the control interface module 20 is specifically used for:

[0234] Analyze the requirements of the video playback function and determine the required control commands;

[0235] The specification of the video playback control interface is defined in the custom view class, including the name of the control command, parameter type and return value type.

[0236] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 4 As shown. The computer device includes a processor, a memory, a network interface and a database connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile and / or volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external user terminal via a network connection. When the computer program is executed by the processor, the functions or steps on the server side of a cross-platform video playback integration method are implemented.

[0237] In one embodiment, a computer device is provided. The computer device may be a user terminal, and its internal structure diagram may be as follows: Figure 5 As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server via a network connection. When the computer program is executed by the processor, it realizes the functions or steps on the user side of a cross-platform video playback integration method

[0238] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the following steps are implemented:

[0239] Creating a custom view class, encapsulating video playback functions in different platform environments in the custom view class;

[0240] A video playback control interface is defined in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations;

[0241] Generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0242] Using the component creation method provided by the cross-platform framework, a new interface component is created, and the interface component is configured to reference the registered native video playback component;

[0243] The interface component is added to the user interface layout of the cross-platform application, and the properties of the interface component are configured, wherein the properties include size, position and video source, and a communication mechanism between the interface component and the native video playback component is established.

[0244] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0245] Creating a custom view class, encapsulating video playback functions in different platform environments in the custom view class;

[0246] A video playback control interface is defined in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations;

[0247] Generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component;

[0248] Using the component creation method provided by the cross-platform framework, a new interface component is created, and the interface component is configured to reference the registered native video playback component;

[0249] The interface component is added to the user interface layout of the cross-platform application, and the properties of the interface component are configured, wherein the properties include size, position and video source, and a communication mechanism between the interface component and the native video playback component is established.

[0250] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can refer to the relevant descriptions on the server side and the user side in the aforementioned method embodiment. To avoid repetition, they will not be described one by one here.

[0251] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0252] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0253] It should be noted that if software tools or components other than those of the Company appear in the embodiments of the present application, they are only used for illustration and do not represent actual use. The above-described embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit them; although the present invention has been described in detail with reference to the above-mentioned embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the above-mentioned embodiments can still be modified, or some of the technical features thereof can be replaced by equivalents; and these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A cross-platform video playback integration method, characterized in that: The following steps are involved: Creating a custom view class, encapsulating video playback functions in different platform environments in the custom view class; A video playback control interface is defined in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations; Generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component; Using the component creation method provided by the cross-platform framework, a new interface component is created, and the interface component is configured to reference the registered native video playback component; The interface component is added to the user interface layout of the cross-platform application, and the properties of the interface component are configured, wherein the properties include size, position and video source, and a communication mechanism between the interface component and the native video playback component is established.

2. The cross-platform video playback integration method according to claim 1, characterized in that: The video playback functions in different platform environments are encapsulated in the custom view class, including: Develop independent video playback function modules that can run on different platform environments; Defining a unified interface for the independent video playback function module; Creating an adapter class, the adapter class is used to convert the method of the unified interface into a video playback API call of a target platform environment; The adapter class is associated with the custom view class, so that the custom view class can call the video playback function of the target platform environment through a unified interface.

3. The cross-platform video playback integration method according to claim 1, characterized in that: Generate a globally unique identifier for the custom view class, and register the custom view class and the identifier in a cross-platform framework when the cross-platform application is started, including: Determine the strategy for generating a globally unique identifier based on compatibility requirements and application scenarios; Based on the generation strategy, generate the globally unique identifier for the custom view class; Constructing a registration function, wherein the registration function is used to register the association relationship between the custom view class and the globally unique identifier in the cross-platform framework; When the cross-platform application is started, the registration function is called to add the association relationship between the custom view class and the globally unique identifier to the registration center of the cross-platform framework; The mapping relationship between the custom view class and the globally unique identifier is recorded in the registration center.

4. The cross-platform video playback integration method according to claim 1, characterized in that: Use the component creation method provided by the cross-platform framework to create a new interface component, and configure the interface component to reference the registered native video playback component, including: Obtaining a globally unique identifier corresponding to the custom view class from a registration center of the cross-platform framework; Use the component creation method provided by the cross-platform framework to initialize a new interface component instance; According to the globally unique identifier, retrieve and instantiate a corresponding registered native video playback component from the cross-platform framework; Associate the instantiated native video player component with the newly created UI component.

5. The cross-platform video playback integration method according to claim 1, characterized in that: Add the interface component to the user interface layout of the cross-platform application, and configure the properties of the interface component, including: Determine the video content to be played, and allocate a video source to the interface component based on the video content, wherein the video source includes a network stream address or a local file path; Designing user interface layouts based on the dimensions of the video content and the screen size of the target device; Configuring the size, position and style of the interface components according to the video content and user interface layout requirements; Integrating playback controls in the interface component, the playback controls including a play button, a progress bar or a volume control; The interface component is added to the user interface layout.

6. The cross-platform video playback integration method as claimed in claim 1, characterized in that: Establish a communication mechanism between the interface component and the native video playback component, including: Designing a communication protocol between the interface component and the native video playback component, wherein the communication protocol is used to determine the format and rules for exchanging information between the interface component and the native video playback component; A message transmission interface is defined between the interface component and the native video playback component, wherein the message transmission interface is used for the interface component to send commands and receive events from the native video playback component; Creating an event listener in the interface component to monitor user interactions and send corresponding commands to the native video playback component; A state callback mechanism is set in the native video playback component to notify the interface component of playback state changes; A data channel is configured between the interface component and the native video playback component, and the data channel is used to transfer video metadata between the interface component and the native video playback component.

7. The cross-platform video playback integration method according to claim 1, characterized in that: The video playback control interface is defined in the custom view class, including: Analyze the requirements of the video playback function and determine the required control commands; The specification of the video playback control interface is defined in the custom view class, including the name of the control command, parameter type and return value type.

8. A cross-platform video playback integrated device, characterized in that: The cross-platform video playback integrated device comprises: A view encapsulation module, used to create a custom view class, in which the video playback function under different platform environments is encapsulated; A control interface module, used to define a video playback control interface in the custom view class, wherein the control interface includes play, pause, fast forward and rewind operations; A component registration module, used to generate a globally unique identifier for the custom view class, and register the custom view class and the globally unique identifier in the cross-platform framework when the cross-platform application is started, so as to register a native video playback component; An interface creation and configuration module, used to create a new interface component using a component creation method provided by a cross-platform framework, and configure the interface component to reference the registered native video playback component; The interface layout and communication module is used to add the interface component to the user interface layout of the cross-platform application, configure the properties of the interface component, including size, position and video source, and establish a communication mechanism between the interface component and the native video playback component.

9. A computer device, characterized in that: The computer device includes a memory, a processor, and a cross-platform video playback integration program stored in the memory and executable on the processor. When the cross-platform video playback integration program is executed by the processor, the steps of the cross-platform video playback integration method as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The storage medium stores a cross-platform video playback integration program, which, when executed by a processor, implements the steps of the cross-platform video playback integration method according to any one of claims 1 to 7.

Images