hls-test.md

[Final result here]

<script src="./hls.js"></script>
<marquee direction="up"><h1>HLS STREAMING</h1></marquee>
<video id="video" controls></video>
<marquee direction="left"><h1>SO</h1></marquee>
<marquee direction="right"><h1>COOL</h1></marquee>
<
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    video.muted = 'muted';
    var hls = new Hls();
    hls.loadSource('./ld51-controller-demo-hls.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

I downloaded hls.js and served it locally.

I transcoded an mp4 to HLS (m3u8 playlist + ts video file(s)) with ffmpeg (thanks to this gist):

ffmpeg -i filename.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls filename.m3u8

This is what the final directory looks like:

[~/Videos/hls-test]$ ls
hls.js  hls-test.html  ld51-controller-demo-hls0.ts  ld51-controller-demo-hls.m3u8

I uploaded the files directory to my Digital Ocean Spaces and set them to public and it Just Worked!