Explanation of H5 Video Being Hijacked by Browsers
1. What is "Browser Hijacking of Video Playback"
In mobile H5 environments, browsers forcibly replace the webpage's <video> tag with a system-level native player (also known as "hijacking").
This window is detached from the webpage rendering layer, and frontend CSS/JS cannot modify its style, z-index, or behavior.
| Typical Phenomenon | Can Be Fixed by Frontend |
|---|---|
| Clicking play forces fullscreen, covering the entire page | ❌ |
| Automatically inserts browser ads, download, speed control, picture-in-picture buttons | ❌ |
| Danmaku, popups, floating buttons are permanently obscured by the video area (z-index invalid) | ❌ |
| Some devices show "playback failed" white screen (common in Xiaomi/Huawei built-in browsers) | ❌ |
| Floating player persists after returning or screen off | ❌ |
The above behaviors are system-level strategies, not frontend code defects.
2. Root Cause of Hijacking
- To save power, enable hardware decoding, and unify ad plugins, browsers replace the
<video>tag with a "native player" — a system-level window detached from the Web rendering layer. Therefore, CSS/JS can no longer control its z-index or style. - This hijacking is intentionally implemented by vendors. In the past, a "whitelist" was available, allowing large company domains to bypass hijacking; currently, the whitelist is mostly closed, and ordinary sites cannot apply.
3. Common Browser Hijacking Phenomena
| Browser / Built-in Environment | UI Hijacking Level | Common Hijacking Phenomena |
|---|---|---|
| WeChat Built-in Browser (Android & iOS) | Moderate (System UI) | Gestures, speed control, floating window |
| QQ Browser | Severe (Custom UI) | Download, speed control, screenshot, screencast |
| UC Browser | Severe (Custom UI) | Download, speed control, screenshot, screencast |
| Quark Browser | Severe (Custom UI) | Download, speed control, screenshot, screencast |
| Xiaomi Built-in Browser | Moderate (System UI) | Download, floating window |
| Huawei/Redmi/Meizu Built-in | Moderate (System UI) | Similar to Xiaomi |
| iOS Safari | Severe (iOS Native UI) | Early default fullscreen; Picture-in-Picture, AirPlay |
4. Mitigation Measures We Have Implemented
Full Inline Attributes (Compatible with video playback issues; style hijacking unavoidable)
Default output of multiple attribute configurations such asplaysinline / webkit-playsinline / x5-playsinline / x5-video-player-type="h5".Canvas Frame Rendering Solution (VOD VMR13 Encryption)
Completely bypasses the<video>tag; the interaction layer is no longer obscured, though page performance may decrease.
5. Industry-Level Limitations (Cannot Be Solved by Frontend)
- Z-index always on top: After hijacking, it belongs to a system window; webpage DOM cannot overlay it.
- Extra ad/download buttons: Inserted by the browser itself; frontend cannot disable them.
- Playback failure on some devices: Xiaomi/Huawei built-in browsers redirect requests to the system player; if the format or response headers do not match, a white screen appears.
6. Summary in One Sentence
"Video hijacking" is a system-level strategy of mobile browsers that cannot be fundamentally fixed by frontend;
We have minimized its impact through attributes, same-layer rendering, Canvas, etc., but cannot eliminate it 100%;
For full control, consider a native solution.
