Fullscreen

Guide to allow Player Layer to work in a fullscreen video player

Player Layer doesn’t encapsulate the logic to work when the video player is in fullscreen. Player Layer renders itself in provided HTML Element container. To support Player Layer while your player is in fullscreen please follow the guide below.

Method 1 - Supported Platforms

Desktop browsers

• Firefox >= 10

• Chrome >= 15

• MS Edge >= 12

• Safari >= 5.1

Mobile browsers

• iOS Safari and Webview (iPad) >= 12

• Android Chrome (Phones and Tablets) >= 18

Method 2 - Unsupported Platforms

• iOS Safari and Webview (iPhone)

• Android Webview (Phones and Tablets)

Most Modern versions of desktop browsers support the fullscreen API while Android Webview and iOS Mobile devices don’t. However there are workaround which are descibed below.

Implementation

Method 1 - Desktop and mobile browsers which support fullscreen

Fullscreen support is implemented using the DOM API which provides the ability to display any HTML Element fullscreen. To Facilitate this you need to layout your video player and Player Layer in a specific way. This layout should consist of a common container with your video player and Player Layer inside.

<div class=“container”>
    <video style="width: 100%; height: 100%;"></video>
    <div style="width: 100%; height: 100%;">
        // player layer is rendered here
    </div>
</div>

You also need to implement two actions: 'enter full screen' and 'exit full screen'. For the enter full screen action we need to disable the default fullscreen button on video player (as it will fullscreen only video but not the container) OR intercept and invoke a handler. The code of both actions provided below:

const container = document.querySelector('.container');

// assume the handlers below are attached 
// to events, e.g. mouse click/touch or 
// keyboard button pressed

const enterFullScreen = () => {
  if (container.webkitRequestFullscreen) {
    container.webkitRequestFullscreen();
  } else if (container.requestFullscreen) {
    container.requestFullscreen();
  }
}

const exitFullScreen = () => {
  if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

Once enterFullScreen() is invoked the '.container' html element will be taken to the fullscreen and as such the video and Player Layer container will be stretched to its size.

Method 2 - Mobile browsers which don’t support fullscreen

As long as fullscreen is not support on mobile webviews and iPhones we have to implement a workaround.

The main idea of the workaround is that we need to stretch the container with your video and Player Layer to the full size of the screen and prevent mobile devices intercepting the video stream so that video is not played in the native mobile player.

1. Add playsinline property for tag to disable native playback interception.

   <video playsinline></video>

2. Implement a custom fullscreen button that will take the container and overtake the content of the whole page.

   <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%">
       <video style="width: 100%; height: 100%;"></video>
       <div>
           // player layer is rendered here
       </div>
   </div>