Added option for passing hls.js config

README.md

@@ -50,3 +50,27 @@ Include in your app javascript (e.g. src/App.js)
 import 'hls-video-element';
 ```
 This will register the custom elements with the browser so they can be used as HTML.
+
+## Configuring HLS.js
+Under the hood we are using [HLS.js](https://hls-js.netlify.app/demo/) to parse and play back the HLS manifest. You can pass HLS.js config parameters by setting the `hlsjsConfig` property on the elememnt object. For example:
+
+```html
+<hls-video
+  controls
+  src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8"
+>
+</hls-video>
+
+<script>
+  customElements.whenDefined('hls-video').then(()=>{
+    const hlsVideo = document.querySelector('hls-video');
+    // Update the config object as desired
+    hlsVideo.hlsjsConfig = {
+      debug: true
+    };
+    hlsVideo.load();
+  });
+</script>
+```
+
+[See the config parameters.](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)

index.html

@@ -8,7 +8,8 @@
 
     <hls-video
       controls
-      src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8">
+      src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8"
+    >
       <track label="thumbnails" id="customTrack" default kind="metadata" src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"></track>
     </hls-video>
 

index.js

@@ -24,16 +24,23 @@ class HLSVideoElement extends CustomVideoElement {
   }
 
   load() {
+    if (this._hlsjs) this._hlsjs.destroy();
+
     if (Hls.isSupported()) {
-      var hls = new Hls({
+      let config = Object.assign({
         // Kind of like preload metadata, but causes spinner.
         // autoStartLoad: false,
-      });
+      }, this.hlsjsConfig);
+
+      const hls = this._hlsjs = new Hls(config);
 
       hls.loadSource(this.src);
       hls.attachMedia(this.nativeEl);
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       this.nativeEl.src = this.src;
+      this.nativeEl.load();
+    } else {
+      console.error('<hls-video>: HLS is not supported.');
     }
   }