bitmovin-player-ui

import { Player } from 'bitmovin-player'; // Requires 'bitmovin-player' v8.x import { UIFactory } from 'bitmovin-player-ui'; import 'bitmovin-player-ui/dist/css/bitmovinplayer-ui.css'; // Essential for styling // 1. Get a reference to the container element where the player will be rendered const playerContainer = document.getElementById('player-container'); if (!playerContainer) { console.error('Player container element not found! Make sure an element with id="player-container" exists in your HTML.'); // In a real application, you might throw an error or handle this gracefully } else { // 2. Initialize the Bitmovin Player with your license key const playerConfig = { key: process.env.BITMOVIN_PLAYER_KEY ?? 'YOUR_BITMOVIN_PLAYER_LICENSE_KEY_HERE', // Replace with your actual license key // Other player configurations can go here }; const player = new Player(playerConfig); // 3. Initialize the UI factory and build the default UI for the player const uiFactory = new UIFactory(); const uiManager = uiFactory.build(player, playerContainer); // 4. Load a video source player.load({ dash: 'https://bitmovin-a.akamaihd.net/content/MIUI_Sample/MIUI_Sample.mpd', // Other source configurations }).then(() => { console.log('Bitmovin Player UI and source loaded successfully!'); // player.play(); // Uncomment to auto-play after loading }).catch((error) => { console.error('Error loading player source:', error); }); // For debugging or global access, expose player and uiManager (window as any).bitmovinPlayer = player; (window as any).bitmovinUIManager = uiManager; }