// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-brown; icon-glyph: magic-wand;
//https://github.com/video-dev/hls.js
let alert = new Alert();
var url = URLScheme.parameter("message");
alert.message="The m3u8 URL is " + url;
alert.addCancelAction("Cancel")
alert.presentAlert();
let html = `
<style>
body {
margin: 0;
padding 0;
background: black;
}
.vid {
width: 100%;
height: 100%;
}
</style>
<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
let hls_url = url;
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(hls_url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hls_url;
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
`
Okay, when you are using template literals you need to use dollar and brace expressions for substituting in JavaScript variables, and I think you would then also need quotes to delimit the URL too. I can see from running the shortcut and test (you might want to share the shortcut too in future as it will save typing for others and hopefully any typos … I’m hoping I entered everything correctly.
I think therefore that…
let hls_url = url;
… would become …
let hls_url = "${url}";
Note also that you are using a URL scheme for the call, but the latest Scriptable actions in Shortcuts would be a more up to date way of passing this in.
However, when I tried to simplify the HTML down a bit and put it into Scriptable only )as a separate test case), I couldn’t get any stream to display.
Here’s what I put in:
let html = `
<html><body>
<style>
body {
margin: 0;
padding 0;
background: black;
color: white;
}
.vid {
width: 100%;
height: 100%;
}
</style>
<h2>This is the start of the player DIV section</h2>
<div id="player"></div>
<h2>This is the start of the HLS script</h2>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<h2>This is start of the video section</h2>
<video id="video"></video>
<h2>This is the start of the additional script section</h2>
<script>
let hls_url = "https://dwstream4-lh.akamaihd.net/i/dwstream4_live@131329/master.m3u8";
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(hls_url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hls_url;
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
<h2>This is the end of the body</h2>
</body></html>
`;
WebView.loadHTML(html, null, new Size(0, 202));
You might want to check this, I could have a typo, but the end result was that I got no video, and I’m assuming I should have.
