It's a protected m3u8 file, I provided its corresponding key id and key to Shaka Player but cannot be played.
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.11/shaka-player.ui.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.11/controls.min.css"
/>
</head>
<body>
<div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="07AEE832">
<video autoplay data-shaka-player id="video" style="width: 100%; height: 100%"></video>
</div>
<script>
const manifestUri = "list.m3u8";
async function init() {
const video = document.getElementById("video");
const ui = video["ui"];
const controls = ui.getControls();
const player = controls.getPlayer();
player.configure({
drm: {
// First value is the key-id, second value is the encryption key
clearKeys: {
bbd230ea4874420ea798872d6ea2019a: "52ee68eaddf6b390589450214e48a661",
},
},
});
window.player = player;
window.ui = ui;
player.addEventListener("error", onPlayerErrorEvent);
controls.addEventListener("error", onUIErrorEvent);
try {
await player.load(manifestUri);
console.log("The video has now been loaded!");
} catch (error) {
onPlayerError(error);
}
}
function onPlayerErrorEvent(errorEvent) {
onPlayerError(event.detail);
}
function onPlayerError(error) {
console.error("Error code", error.code, "object", error);
}
function onUIErrorEvent(errorEvent) {
onPlayerError(event.detail);
}
function initFailed(errorEvent) {
console.error("Unable to load the UI library!");
}
document.addEventListener("shaka-ui-loaded", init);
document.addEventListener("shaka-ui-load-failed", initFailed);
</script>
</body>
</html>
list.m3u8
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:6
#EXT-X-PLAYLIST-TYPE:EVENT
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PROGRAM-DATE-TIME:2024-03-04T23:59:58.967Z
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed",KEYFORMATVERSIONS="1",URI="data:text/plain;base64,AAAAMnBzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAABISELvSMOpIdEIOp5iHLW6iAZo="
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="com.microsoft.playready",KEYFORMATVERSIONS="1",URI="data:text/plain;charset=UTF-16;base64,xAEAAAEAAQC6ATwAVwBSAE0ASABFAEEARABFAFIAIAB4AG0AbABuAHMAPQAiAGgAdAB0AHAAOgAvAC8AcwBjAGgAZQBtAGEAcwAuAG0AaQBjAHIAbwBzAG8AZgB0AC4AYwBvAG0ALwBEAFIATQAvADIAMAAwADcALwAwADMALwBQAGwAYQB5AFIAZQBhAGQAeQBIAGUAYQBkAGUAcgAiACAAdgBlAHIAcwBpAG8AbgA9ACIANAAuADAALgAwAC4AMAAiAD4APABEAEEAVABBAD4APABQAFIATwBUAEUAQwBUAEkATgBGAE8APgA8AEsARQBZAEwARQBOAD4AMQA2ADwALwBLAEUAWQBMAEUATgA+ADwAQQBMAEcASQBEAD4AQQBFAFMAQwBUAFIAPAAvAEEATABHAEkARAA+ADwALwBQAFIATwBUAEUAQwBUAEkATgBGAE8APgA8AEsASQBEAD4ANgBqAEQAUwB1ADMAUgBJAEQAawBLAG4AbQBJAGMAdABiAHEASQBCAG0AZwA9AD0APAAvAEsASQBEAD4APAAvAEQAQQBUAEEAPgA8AC8AVwBSAE0ASABFAEEARABFAFIAPgA="
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="PRMNAGRA",KEYFORMATVERSIONS="1",URI="data:text/plain;base64,eyJrZXktaWQiOiJiYmQyMzBlYS00ODc0LTQyMGUtYTc5OC04NzJkNmVhMjAxOWEiLCJlbWkiOiJjdHIiLCJwcm0iOiJleUpqYjI1MFpXNTBTV1FpT2lKamRISWlMQ0pyWlhsSlpDSTZJbUppWkRJek1HVmhMVFE0TnpRdE5ESXdaUzFoTnprNExUZzNNbVEyWldFeU1ERTVZU0o5In0="
#EXT-X-MAP:URI="map.mp4"
#EXTINF:0.834166667,
58_967.mp4
#EXTINF:5.005,
59_801.mp4
#EXTINF:5.005,
04_806.mp4
#EXTINF:5.005,
09_811.mp4
#EXTINF:5.005,
14_816.mp4
#EXTINF:5.005,
19_821.mp4
#EXTINF:5.005,
24_826.mp4
#EXTINF:5.005,
29_831.mp4
...
I'm using the live server from VSCode and all the files mp4's, list.m3u8 and index.html are in the same folder. The console says "The video has now been loaded!"
Almost all the code is a copy/paste from the documentation, I added the part player.configure.