const mpdUrl = 'https://mpd';
        const kid = '550727de4c96ef1ecff874905493580f';
        const key = '550727de4c96ef1ecff874905493580f';

        let player;
        let ui;

        function initApp() {
            shaka.polyfill.installAll();

            shaka.Player.probeSupport().then(function() {
                const video = document.getElementById('video');
                player = new shaka.Player(video);

                // Attach the player to the window to make it easy to access in the console
                window.player = player;

                const drmConfig = {
                    drm: {
                        clearKeys: {
                            [kid]: key // Set Clear Key
                        }
                    }
                };
                player.configure(drmConfig);

                player.load(mpdUrl).then(function() {
                    console.log('The video has now been loaded!');
                }).catch(onPlayerError);

                initializeUI(video);
            }).catch(onPlayerError);
        }

        function initializeUI(video) {
            const container = document.querySelector('[data-shaka-player-container]');

            // Create UI elements with Shaka's default configuration
            ui = new shaka.ui.Overlay(player, container, video);
            ui.getControls(); // This loads the default controls

            // Set fullscreen button visibility if needed
            ui.getControls().setEnabled(true);
        }

        function onPlayerError(event) {
            console.error('Player error', event);
        }

        document.addEventListener('DOMContentLoaded', initApp);