index.html

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />

<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  ></video>
<script>
  const basePath = "http://localhost:8080";
  const video = document.getElementById('my-video');
  if(Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(`${basePath}/media/1/stream/`);
    hls.attachMedia(video);
    video.addEventListener('click',function() {
      video.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = `${basePath}/media/1/stream/`;
    video.addEventListener('click',function() {
      video.play();
    });
  }
</script>