Display a video player with a script

[clem]

Hello,

I need to integrate a video player on my Bubble app. When I paste this code into an HTML element, it’s not visible.

How can I solve this problem?

here’s the code:

<div id="playerDiv"></div>
<script src="//demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20210825"></script>
<script>
var player;
var bintuStreamIds = ["afa6b4fa-cb1a-4bdb-817b-f396453397a9"];
var config = {
    "source": {
        "startIndex": 0,
        "entries": [
            {
                "index": 0,
                "bintu": {
                    "apiurl": "https://bintu.nanocosmos.de",
                    "streamid": bintuStreamIds[0]
                }
            }
        ]
    },
    "playback": {
        "autoplay": false,
        "automute": false,
        "muted": false
    },
    "style": {
        "width": "auto",
        "height": "auto",
        "displayMutedAutoplay": true,
    }
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer("playerDiv");
    player.setup(config).then(function (config) {
        console.log("setup success");
        console.log("config: " + JSON.stringify(config, undefined, 4));
    }, function (error) {
        console.log(error.message);
    });
});
</script>

Thank you
Clem

[dorilama]

the DOMContentLoaded event probably fires before the execution of your script because it’s added dynamically to the page.
You can either add the listener in the page head or check whether loading is already complete

[clem]

Thank you @dorilama !

I’m now trying with this code but it style doesn’t work :

<div id="playerDiv"></div>
<script src="//demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20210825"></script>
<script>
var player;
var bintuStreamIds = ["afa6b4fa-cb1a-4bdb-817b-f396453397a9"];
var config = {
    "source": {
        "startIndex": 0,
        "entries": [
            {
                "index": 0,
                "bintu": {
                    "apiurl": "https://bintu.nanocosmos.de",
                    "streamid": bintuStreamIds[0]
                }
            }
        ]
    },
    "playback": {
        "autoplay": false,
        "automute": false,
        "muted": false
    },
    "style": {
        "width": "100%",
        "height": "100%",
        "displayMutedAutoplay": true,

    }
};

function initializePlayer() {
    player = new NanoPlayer("playerDiv");
    player.setup(config).then(function (config) {
        console.log("setup success");
        console.log("config: " + JSON.stringify(config, undefined, 4));
    }, function (error) {
        console.log(error.message);
    });
}

if (document.readyState === 'loading') {

DOMContentLoaded.
document.addEventListener(‘DOMContentLoaded’, initializePlayer);
} else {

    initializePlayer();
}
</script>

Any idea ?

[dorilama]

Are you referring to the style in the config object?
You need to check the documentation of the library that you are using to understand how they apply styles and why it doesn’t work.