player.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.7.5/hls.light.min.js"></script>

<template id="player">

  <style>
    video {
      width: 100%;
      height: 100%;
    }
  </style>

  <h1 class="title"></h1>
  <video controls muted>

</template>

<script>
  (function () {

    var importer = document.currentScript.ownerDocument;

    // Cannot extend a customized element, such as HTMLVideoElement or HTMLMediaElement.
    // https://bugs.chromium.org/p/chromium/issues/detail?id=619062
    class HlsVideo extends HTMLElement {

      // Observe the following attributes for changes.
      static get observedAttributes () {
        return ['src', 'video-title'];
      }

      /**
       * Called when the element is created or upgraded.
       */
      constructor () {
        var template, content, root;

        // Always call super first in constructor.
        super();

        // Get the template in this import.
        template = importer.querySelector('#player');

        // Create a deep copy of the template, which includes all children
        // 2nd argument specifies deep copy.
        content = document.importNode(template.content, true);

        // Add the copied template to this shadow root.
        root = this.createShadowRoot();
        root.appendChild(content);

        this.elTitle = root.querySelector('h1');
        this.elVideo = root.querySelector('video');

        this.hlsI = new Hls();
        this.hlsI.on(Hls.Events.MANIFEST_PARSED, this.elVideo.play.bind(this.elVideo));
      }

      /**
       * Called when an attribute is changed, appended, removed, or replaced on the element.
       * Only called for observed attributes.
       *
       * @param {string} attr     - The name of the attribute that was changed.
       * @param {string} oldValue - The previous value of the attribute.
       * @param {string} newValue - The new (current) value of the attribute.
       */
      attributeChangedCallback (attr, oldValue, newValue) {

        if (attr === 'src') {
          this.play(newValue);
        }

        if (attr === 'video-title') {
          this.elTitle.textContent = newValue;
        }

      }

      /**
       * Plays the given HLS video stream.
       *
       * @param {string} url - The URL of the m3u8 file.
       */
      play (url) {
        if (!this.elVideo.paused) {
          this.reset();
        }

        this.hlsI.attachMedia(this.elVideo);
        this.hlsI.loadSource(url);
      }

      /**
       * Resets the HLS instance.
       */
      reset () {
        this.hlsI.detachMedia();
      }

    };

    customElements.define('hls-video', HlsVideo);
  })();
</script>