<!DOCTYPE html>
<html>
<head>
<title>Shaka Player DRM Test</title>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@4.0.0/dist/shaka-player.compiled.js"></script>
<style>
#video-container { width: 800px; margin: 20px auto; }
#video { width: 100%; height: auto; }
</style>
</head>
<body>
<div id="video-container">
<video id="video" autoplay controls crossorigin="anonymous"></video>
</div>
<script>
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
</html>
function initApp() {
// 1. Install polyfills
shaka.polyfill.installAll();
// 2. Check for browser support
if (!shaka.Player.is || !shaka.Player.isSupported()) {
console.error('Browser does not support EME/MSE/DASH required for Shaka Player.');
return;
}
// 3. Initialize the Player
const video = document.getElementById('video');
const player = new shaka.Player(video);
// Set up error handling (recommended)
player.addEventListener('error', onErrorEvent);
// The MPD (Manifest) URL from the last line of your KODIPROP list
const manifestUri = 'mpd link';
player.configure({
drm: {
clearkey: {
'keyid': 'key'
}
}
});
// 5. Load the manifest
player.load(manifestUri).then(function() {
// Success!
console.log('The video has been loaded and should be playing!');
}).catch(onError);
}
function onErrorEvent(event) {
// Log the error
onError(event.detail);
}
function onError(error) {
// Display the error on the console
console.error('Error code', error.code, 'object', error);
// You can also display a user-friendly message here
// alert('Playback Error: ' + error.message);
}
Fill in the mpd link, key id and key from the channels. Then self host or just run a local server.