Mutation Observer Video Player Calling in Web Pages
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing browser technologies fail to effectively call a non-built-in video player when only a small quantity of elements, such as a video label, are updated in a web page, leading to non-responsive video playback during user interactions like clicking a new video in a player, as the event of injecting JS cannot be triggered in non-refresh web page loading events.
Innovation Solution
A video player calling method and apparatus that creates a mutation observer process to monitor the page node tree during page loading events, registering a playing callback event to modify the video player function when a video label is detected, allowing the browser to play videos using a non-built-in video player even in non-refresh web page loading scenarios.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If a timer-based JS injection method is used to search for and modify video labels, then the built-in video player can be replaced with a non-built-in video player during full page loading, but the method fails to trigger JS injection events during non-refresh web page loading events when only small quantities of elements are updated
Solution Approach 1:
The patent introduces a mutation observer as an intermediary mechanism between page updates and video player replacement. Instead of relying on timer-based JS injection that only triggers on full page loads, the mutation observer continuously monitors DOM changes and triggers the video player replacement logic whenever specific DOM mutations occur, such as when a video label is added or modified. This intermediary ensures reliable detection of video elements across both full page loads and incremental updates.
Solution Approach 2:
The system implements self-service by having the mutation observer automatically detect and respond to DOM changes without external intervention. When the observer detects a video label in the DOM tree, it automatically triggers the callback function to replace the video player, eliminating the need for manual page refreshes or timer-based polling. The system serves itself by monitoring its own state changes and taking appropriate action.
2Reliability
If full page refresh is required to trigger JS injection and video player replacement, then video player replacement can be reliably implemented, but user experience deteriorates due to unnecessary full page reloads and loss of incremental update benefits
Solution Approach 1:
The patent transforms the static, timer-based video player replacement mechanism into a dynamic, event-driven system. The mutation observer continuously monitors DOM changes and triggers video player replacement dynamically based on actual DOM mutations rather than fixed time intervals. This dynamic approach ensures the replacement occurs exactly when needed - when video elements are added or modified - without requiring full page refreshes or waiting for timer cycles.
Solution Approach 2:
The system performs preliminary action by pre-registering the mutation observer and configuring it to watch for specific DOM changes related to video elements. This preparation ensures that when video labels are added or modified in the DOM, the system is already in position to detect and respond to these changes immediately, without requiring full page reloads or delayed timer-based detection.
Data Source
AI summary
The present disclosure provides a video player calling method, apparatus, and storage medium. The method includes: creating a mutation observer process; registering a playing callback event in the mutation observer process, wherein the mutation observer process is configured for monitoring a page node tree in a page loading event according to an observation option configured in the playing callback event; the page node tree comprises a video label; the page loading event comprises an event of loading a video in a web page; and the playing callback event is configured for modifying a function of calling a video player in the web page; monitoring the page node tree by running the mutation observer process; performing the playing callback event when the video label exists in the page node tree; and playing the video in the web page by using the video player identified in the playing callback event.