How to Achieve Consistent Fullscreen Video Playback on iOS and Android

Uniform Playback Effect

The objective is to play HTML5 video fullscreen without the native system UI (progress bar, play button, etc.) and to allow custom overlay elements such as a skip button.

iOS

iOS renders pages with the system Safari/WebKit engine. By default a video element launches a native fullscreen player that hides any custom overlay. Starting with iOS 10 Safari supports the unprefixed playsinline attribute (the older webkit-playsinline works on earlier versions but may cause audio‑only playback on iOS 9).

<video id="video" class="video" preload="auto" playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>

For broader compatibility the iphone-inline-video library (https://github.com/bfred-it/iphone-inline-video) can be combined with the markup above.

Android (WeChat / TBS engine)

Android browsers differ, and the article focuses on WeChat which uses the TBS rendering engine. Android does not support playsinline. Inline playback in WeChat requires a whitelist on older kernels, but TBS versions ≥ 036849 provide a “same‑layer player” that works without a whitelist.

<video src="..." x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

Compatibility Summary

TBS < 036849 – same‑layer player not supported.

036849 ≤ TBS < 036900 – same‑layer player supported; exiting fullscreen triggers x5videoenterfullscreen, entering fullscreen triggers x5videoexitfullscreen.

TBS ≥ 036900 – same‑layer player supported; exiting fullscreen triggers x5videoexitfullscreen, entering fullscreen triggers x5videoenterfullscreen.

Listen to the corresponding events to track playback state:

document.getElementById('video').addEventListener('x5videoexitfullscreen', function(){
  alert('exit fullscreen');
});

document.getElementById('video').addEventListener('x5videoenterfullscreen', function(){
  alert('enter fullscreen');
});

Video Events

The video element emits many events, but the most reliable cross‑platform events are timeupdate (periodic playback position updates) and ended (when playback finishes).

video.addEventListener('timeupdate', function(e){
  console.log(video.currentTime); // current playback position
});

video.addEventListener('ended', function(e){
  // playback finished
});

Video Centering

Because video aspect ratios are fixed while device screens vary, a width‑first scaling strategy is used. The function below computes a vertical margin to keep the video centered.

function handleResize(){
  var sWidth = 9;
  var sHeight = 16;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var marginTop = height - (width * sHeight) / sWidth;
  marginTop = Math.round(marginTop);
  if (marginTop < -2){
    video.$wrapper.css('marginTop', marginTop / 2 + 'px');
  } else {
    video.$wrapper.css('marginTop', '0');
  }
}

References

https://www.w3.org/wiki/HTML/Elements/video

http://caniuse.com/#search=video

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events

http://zhaoda.net/2014/10/30/html5-video-optimization

https://webkit.org/blog/6784/new-video-policies-for-ios/

https://github.com/bfred-it/iphone-inline-video