How do I embed the bitmovin player in an iframe?

Support
, , , ,
1

Hi, team! I’m wondering if there is an example of how I would be able to embed the Bitmovin player via an iFrame? I’m thinking of sending the stream URLs via the iframe URL parameters.

Thanks!

2

Here is a possible example showing how to embed the player into a iframe and pass the source configuration through query parameters:

Embed code :

<html>
<iframe src="iframe.html?dash=https%3A%2F%2Ftestdomain/stream.mpd&hls=stream.m3u8"
    title="description"></iframe>

</html>

Iframe code (get the source urls from the query paramers)

        var player;

        var conf = {
            key: 'YOUR_KEY_HERE'
        };

        const urlParams = new URLSearchParams(window.location.search);
        const dashParam = urlParams.get('dash');
        const hlsParam = urlParams.get('hls');

        var source = {
            dash: dashParam,
            hls: hlsParam,
        };

        player = new bitmovin.player.Player(document.getElementById('player'), conf);

        player.load(source).then(function() {
            console.log('Successfully loaded source'); // Success!
        }, function() {
            console.log('Error while loading source'); // Error!
        });
3 Likes