stream.html

$def with ()
$var title: Live Stream

<div id=stream></div>
<script>
document.addEventListener('DOMContentLoaded', ev => {
  fetch('/stream-stats')
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(data => {
      const streams = data.getElementsByTagName('stream')
      if (streams.length) {
        window.injectStylesheet('/assets/video.js-5.8.8.css')
        window.injectScript('/assets/video.js-5.8.8.js')
        window.injectScript('/assets/video.js-contrib-hls-3.6.12.js')

        document.querySelector('#stream').innerHTML = `
          <video id=livestream class="video-js vjs-default-skin" controls>
            <source src=$tx.origin/hls/foo.m3u8 type=application/x-mpegURL>
          </video>
          <div style=font-size:.75em>started <span id=streamduration></span>
          minutes ago</div>
        `
        player = videojs('livestream', {fluid: true})
        player.play()

        const ms = parseInt(streams[0].getElementsByTagName('time')[0].textContent)
        document.querySelector('#streamduration').innerHTML = Math.round(ms / 1000 / 60)
      }
    })
})
</script>