Unsupported platforms and fallback mechanisms

If you were to find yourself in the unlikely situation that THEOplayer does not support the platform you or one of your users are using to view content, you might still want to support them with a different option.

You can find a full support matrix in our knowledge base: Support Matrix

For really old or uncommon browser you can still provide what is commonly called a fallback mechanism.

THEOplayer allows you to set this up very easily through the unsupportedPlatform event thrown by the player API. In this article we'll show you a very easy way to do just that.

To get started we'll put two elements in our web page:

<div id="playerContainer"></div>
<div id="playerNotSupportedMessage" style="display: none;">This platform is not supported for playback of video, please use Internet Explorer 10+, Firefox, Chrome, Safari, Opera or Vivaldi browser on Windows, OS X, Linux, Android, iOS or Windows Phone.</div>

The first <div> element is the one we'll be showing our THEOplayer instance in.

In the second <div> we're putting a message that tells our user that he's using a platform that's unsupported by THEOplayer. Notice that we have put this element to display: none; to hide it from view on the initial load of the page.

Next we'll add some JavaScript to the page to handle the logic of switching between the two <div> elements, depending on which one should be shown.

For starters, we'll make some variables that point to our elements on the page:

    var playerContainer = document.getElementById('playerContainer');
    var playerNotSupportedMessage = document.getElementById('playerNotSupportedMessage');

Now we'll need a video, because in nearly every case THEOplayer will be supporting your browser. We assume you already have one, but for this article we'll use the following:

    var video = document.createElement('video');
    video.controls = 'controls';
    video.src = 'http://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8';
    video.poster = 'http://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg';
    video.style = "width:100%; height:auto;";

Now that we've got all the elements we need, we can put in the logic:

theoplayer.onReady = function () {
    var player = theoplayer(video);
    player.addEventListener('unsupportedPlatform', function () {
        // The current platform is not supported, we should provide a fallback scenario for the user here.
        console.log('This platform is not supported by THEOplayer.');
        playerContainer.style.display = 'none';
        playerNotSupportedMessage.style.display = 'block';

 And to prove it to you, we've put a box at the end of this article that will tell you if THEOplayer support the platform and browser you are currently using.

This platform is supported for playback of video.