trying to get this to work:

<?php
declare(strict_types=1);

namespace app\widgets;

use yii\base\Widget;
use yii\helpers\Html;

use app\assets\VideoPlayerAsset;

/**
* Video Player
* Use the widget in your Yii2 View:
* 
* 	use app\widgets\VideoPlayerWidget;
* 	
* 	echo VideoPlayerWidget::widget([
* 		'videoSources' => [
* 			['src' => Yii::getAlias('@web/videos/sample.webm'), 'type' => 'video/webm'],
* 			['src' => Yii::getAlias('@web/videos/sample.mp4'), 'type' => 'video/mp4'],
* 		],
* 		'poster' => Yii::getAlias('@web/images/poster.jpg'),
* 	]);
*/
class VideoPlayer extends Widget
{
	public $videoSources = [];// array of ['src' => url, 'type' => mime-type]
	public $poster = null;
	public $width = '100%';
	public $height = 'auto';
	public $containerOptions = [];
	public $videoOptions = [];
	
	public function run()
	{
		VideoPlayerAsset::register($this->getView());
		
		$id = $this->getId();
		Html::addCssClass($this->containerOptions, 'video-player-widget container my-4 position-relative');
		
		$videoOptions = array_merge([
			'id' => $id . '-video',
			'class' => 'video-player w-100 rounded',
			'width' => $this->width,
			'height' => $this->height,
			'preload' => 'metadata',
			'controls' => false,// Custom controls
			'poster' => $this->poster,
			'playsinline' => true,
			'tabindex' => 0,// make video focusable for keyboard controls
		], $this->videoOptions);
		
		$sourcesHtml = '';
		foreach ($this->videoSources as $source)
		{
			$src = Html::encode($source['src']);
			$type = Html::encode($source['type']);
			$sourcesHtml .= "<source src=\"{$src}\" type=\"{$type}\">";
		}
		
		$fallback = Html::tag('p', 'Your browser does not support HTML5 video playback. ' .
			Html::a('Download Video', $this->videoSources[0]['src'] ?? '#', ['download' => true])
		);
		
		$html = Html::beginTag('div', $this->containerOptions)
			. Html::tag('video', $sourcesHtml . $fallback, $videoOptions)
			. $this->renderControls($id)
			. Html::endTag('div');
		
		return $html;
	}
	
	protected function renderControls($id)
	{
		$bufferBarId = $id . '-buffer-bar';
		$progressId = $id . '-progress';
		
		return <<<HTML
			<div id="{$id}-controls" class="mt-2 d-flex align-items-center gap-3 flex-wrap">
				<button type="button" id="{$id}-playpause" class="btn btn-primary btn-sm" title="Play/Pause">Play</button>
				<div class="flex-grow-1" style="min-width: 150px;">
					<div class="progress-container" aria-label="Video buffering progress">
						<div id="{$bufferBarId}" class="buffer-bar"></div>
						<input type="range" id="{$progressId}" class="form-range progress-bar" min="0" max="100" value="0" step="0.1" aria-label="Video Progress" />
					</div><!-- progress-container -->
					<span id="{$id}-time" class="text-nowrap">0:00 / 0:00</span>
					<button type="button" id="{$id}-mute" class="btn btn-secondary btn-sm" title="Mute/Unmute">Unmute</button>
					<input type="range" id="{$id}-volume" class="form-range volume" min="0" max="1" step="0.05" value="1" style="width: 100px;" aria-label="Volume">
					<button type="button" id="{$id}-fullscreen" class="btn btn-secondary btn-sm" title="Fullscreen">Fullscreen</button>
				</div><!-- .flex-grow-1 -->
			</div><!-- controls -->
			<div id="{$id}-loading" class="loading-spinner" aria-hidden="true"></div>
		HTML;
	}
}

<?php
declare(strict_types=1);

namespace app\assets;

use yii\web\AssetBundle;

class VideoPlayerAsset extends AssetBundle
{
	public $sourcePath = '@app/assets/videoPlayer';
	
	public $css = [
		'videoPlayer.css',
	];
	
	public $js = [
		'videoPlayer.js',
	];
	
	public $depends = [
		'yii\web\YiiAsset',
		// Bootstrap 5 css (assumed you use yii2-bootstrap5)
		'yii\bootstrap5\BootstrapAsset',
    ];
}

document.addEventListener('DOMContentLoaded', function () {
    const players = document.querySelectorAll('.video-player-widget');

    players.forEach(player => {
        const video = player.querySelector('video.video-player');
        if (!video) return;

        // assign unique ID base – from video id attribute
        const baseId = video.id;

        const playPauseBtn = player.querySelector(`#${baseId}-playpause`);
        const muteBtn = player.querySelector(`#${baseId}-mute`);
        const progress = player.querySelector(`#${baseId}-progress`);
        const volume = player.querySelector(`#${baseId}-volume`);
        const timeDisplay = player.querySelector(`#${baseId}-time`);
        const fullscreenBtn = player.querySelector(`#${baseId}-fullscreen`);
        const bufferBar = player.querySelector(`#${baseId}-buffer-bar`);
        const loadingSpinner = player.querySelector(`#${baseId}-loading`);

        function formatTime(seconds) {
            seconds = Math.floor(seconds);
            let m = Math.floor(seconds / 60);
            let s = seconds % 60;
            return m + ":" + (s < 10 ? "0" + s : s);
        }

        // Play/pause toggle
        playPauseBtn.addEventListener('click', () => {
            if (video.paused || video.ended) {
                video.play();
            } else {
                video.pause();
            }
        });

        video.addEventListener('play', () => {
            playPauseBtn.textContent = 'Pause';
            hideSpinner();
        });

        video.addEventListener('pause', () => {
            playPauseBtn.textContent = 'Play';
        });

        // Time and progress update
        video.addEventListener('timeupdate', () => {
            if (!progress.dragging) {
                const percent = (video.currentTime / video.duration) * 100 || 0;
                progress.value = percent;
            }
            timeDisplay.textContent = formatTime(video.currentTime) + ' / ' + formatTime(video.duration);
            updateBufferBar();
        });

        // Seek on progress bar change
        progress.addEventListener('input', () => {
            progress.dragging = true;
        });
        progress.addEventListener('change', () => {
            const seekTime = (progress.value / 100) * video.duration;
            video.currentTime = seekTime;
            progress.dragging = false;
        });

        // Mute/unmute toggle
        muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
            volume.value = video.muted ? 0 : video.volume;
        });

        // Volume control
        volume.addEventListener('input', () => {
            video.volume = volume.value;
            video.muted = volume.value == 0;
            muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
        });

        // Fullscreen toggle
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                if (video.requestFullscreen) {
                    video.requestFullscreen();
                } else if (video.webkitRequestFullscreen) { /* Safari */
                    video.webkitRequestFullscreen();
                } else if (video.msRequestFullscreen) { /* IE11 */
                    video.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        });

        // Buffer bar update function
        function updateBufferBar() {
            if (!video.buffered || video.buffered.length === 0) {
                bufferBar.style.width = "0%";
                return;
            }
            let bufferedEnd = 0;
            for (let i = 0; i < video.buffered.length; i++) {
                if (video.currentTime >= video.buffered.start(i) && video.currentTime <= video.buffered.end(i)) {
                    bufferedEnd = video.buffered.end(i);
                    break;
                }
            }
            if (bufferedEnd === 0) {
                bufferedEnd = video.buffered.end(video.buffered.length - 1);
            }
            const percent = (bufferedEnd / video.duration) * 100 || 0;
            bufferBar.style.width = percent + '%';
        }

        // Loading spinner show/hide
        function showSpinner() {
            loadingSpinner.style.display = 'block';
            loadingSpinner.setAttribute('aria-hidden', 'false');
        }
        function hideSpinner() {
            loadingSpinner.style.display = 'none';
            loadingSpinner.setAttribute('aria-hidden', 'true');
        }

        // Show spinner on waiting/seeking
        video.addEventListener('waiting', showSpinner);
        video.addEventListener('seeking', showSpinner);
        video.addEventListener('canplay', hideSpinner);
        video.addEventListener('playing', hideSpinner);
        video.addEventListener('seeked', hideSpinner);

        // Initialize volume slider and mute button
        volume.value = video.volume;
        muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';

        // Initial buffer update (in case buffered already)
        updateBufferBar();

        // Keyboard shortcuts inside video element
        video.tabIndex = 0;
        video.addEventListener('keydown', (e) => {
            switch (e.key) {
                case ' ':
                case 'k':
                    e.preventDefault();
                    if (video.paused) video.play();
                    else video.pause();
                    break;
                case 'm':
                    e.preventDefault();
                    video.muted = !video.muted;
                    muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
                    volume.value = video.muted ? 0 : video.volume;
                    break;
                case 'f':
                    e.preventDefault();
                    fullscreenBtn.click();
                    break;
            }
        });
    });
});


.video-player-widget video.video-player {
    background-color: #000;
    display: block;
    border-radius: 0.375rem; /* Bootstrap rounded */
    outline: none;
    user-select: none;
    cursor: pointer;
}

.video-player-widget #player1-controls {
    user-select: none;
}

.video-player-widget button {
    min-width: 80px;
}

/* Buffer bar container */
.video-player-widget .progress-container {
    position: relative;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

/* Buffer bar fill */
.video-player-widget .buffer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #adb5bd; /* grayish */
    z-index: 1;
    width: 0%;
    pointer-events: none;
    transition: width 0.3s ease;
}

/* Progress bar (slider), positioned above buffer bar */
.video-player-widget input[type="range"].progress-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    position: relative;
    background: transparent;
    z-index: 2;
    height: 8px;
    cursor: pointer;
}
.video-player-widget input[type="range"].progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #0d6efd; /* bootstrap primary */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px;
    border: none;
    box-shadow: 0 0 4px rgba(13, 110, 253, 0.7);
}
.video-player-widget input[type="range"].progress-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #0d6efd;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Volume slider */
.video-player-widget input[type="range"].volume {
    width: 100px;
}

/* Loading Spinner */
.video-player-widget .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border: 6px solid rgba(13, 110, 253, 0.2);
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spinner 1s linear infinite;
    display: none;
}

@keyframes spinner {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

i see the video file it loads the assets...

<div class="video-player-widget container my-4 position-relative"><video id="w0-video" class="video-player w-100 rounded" width="100%" height="auto" preload="metadata" playsinline tabindex="0"><source src="/uploads/test.mp4" type="video/mp4"><p>Your browser does not support HTML5 video playback. <a href="/uploads/test.mp4" download>Download Video</a></p></video>	<div id="w0-controls" class="mt-2 d-flex align-items-center gap-3 flex-wrap">
		<button type="button" id="w0-playpause" class="btn btn-primary btn-sm" title="Play/Pause">Play</button>
		<div class="flex-grow-1" style="min-width: 150px;">
			<div class="progress-container" aria-label="Video buffering progress">
				<div id="w0-buffer-bar" class="buffer-bar"></div>
				<input type="range" id="w0-progress" class="form-range progress-bar" min="0" max="100" value="0" step="0.1" aria-label="Video Progress" />
			</div><!-- progress-container -->
			<span id="w0-time" class="text-nowrap">0:00 / 0:00</span>
			<button type="button" id="w0-mute" class="btn btn-secondary btn-sm" title="Mute/Unmute">Unmute</button>
			<input type="range" id="w0-volume" class="form-range volume" min="0" max="1" step="0.05" value="1" style="width: 100px;" aria-label="Volume">
			<button type="button" id="w0-fullscreen" class="btn btn-secondary btn-sm" title="Fullscreen">Fullscreen</button>
		</div><!-- .flex-grow-1 -->
	</div><!-- controls -->
	<div id="w0-loading" class="loading-spinner" aria-hidden="true"></div></div>

but does not work, the buttons dont do anything..