Initiate Video Player on Full screen

Knowledge
1

Dear Bitmovin Team,

We need your guidance to load a player full screen when we click on the button on our page.
We want to reload the source and start the player from a new source with fullscreen (We are using Bitmovin 8).

We are getting the below error message from the browser
Uncaught (in promise) TypeError: Permissions check failed.

Please check and let us know possible ways to resolve this issue.

2

@nihar.te thanks for reaching out to us.

I just gave it a try and it seems to work as expected :

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bitmovin Player Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8" />

    <!-- Bitmovin Player -->
    <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>

    <style>
        .player-wrapper {
            width: 90%;
            margin: 20px auto;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
        }
    </style>
</head>

<body>
    <div class="player-wrapper">
        <div id="player"></div>
        <button onclick="reloadFullscreen()">Reload in fullscreen</button>
    </div>
    <script type="text/javascript">
        var conf = {
            key: 'XXXXXXXXX'
        };
        var source = {
            dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
            hls: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
            progressive: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
            poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/poster.jpg',
        };
        var player = new bitmovin.player.Player(document.getElementById('player'), conf);
        player.load(source);
        var reloadFullscreen = function() {
            player.load(source).then(function() {
                player.setViewMode("fullscreen")
            })
        }
    </script>

</body>

</html>

Please feel free to provide a modified version of the above test page if needed to reproduce your use-case closer. I’d then be happy to look into it further.