JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitmovin SDK - Getting Started WEB SDK</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- STEP 1 - SDK Installation-->
</head>
<script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>
<body>
<!-- STEP 2 - Provide a player container element-->
<div id="my-player"></div>
</body>
</html>
JavaScript
var playerConfig = {
"key": "",
"playback": {
"muted": true,
"autoplay": false
}
}
//<!-- STEP 4 - Configure and load a Source for the player -->
var container = document.getElementById('my-player');
var player = new bitmovin.player.Player(container, playerConfig);
var sourceConfig = {
"title": "Default Demo Source Config",
"description": "Select another example in \"Step 4 - Load a Source\" to test it here",
"dash": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa1.mpd",
"hls": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
"smooth": "https://test.playready.microsoft.com/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/manifest",
"progressive": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
"poster": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}
player.load(sourceConfig).then(function() {
console.log('Successfully loaded Source Config!');
}).catch(function(reason) {
console.log('Error while loading source:', reason);
}
);
player.on(bitmovin.player.PlayerEvent.Error, function(data) {
if(data.code == 1208){
console.log("Lets add an overlay");
var elem = document.createElement("img");
elem.setAttribute("src", "https://previews.123rf.com/images/ionutparvu/ionutparvu1801/ionutparvu180109294/94052166-painting-with-come-back-soon-message-on-blue-wallpaper-with-flowers-illustration.jpg?fj=1");
elem.setAttribute("z-index", "9999999 !important");
document.getElementById("my-player").appendChild(elem);
player.destroy();
}
});