<!DOCTYPE html>
<html>
<head>
<title>TV</title>
<style>
#video-container {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio (change as needed) */
position: relative;
}
#video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="video-container">
<video id="video" controls autoplay></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.7/shaka-player.compiled.min.js"></script>
<script>
(async () => {
try {
await shaka.polyfill.installAll();
if (!shaka.Player.isBrowserSupported()) {
throw new Error('Browser not supported');
}
const video = document.getElementById('video');
const player = new shaka.Player(video);
const drmConfig = {
clearKeys: {
'0000000000000': '000000000000' // Replace with your ClearKey key ID and key
}
};
await player.configure({
drm: drmConfig
});
await player.load('http://.mpd');
console.log('Video loaded successfully!');
} catch (error) {
console.error('Error loading video:', error);
}
})();
</script>
</body>
</html>
