title: How to integrate HLS.js and mp4's with Plyr
body: <p>is it possible to not hardcode the source of an hls file inside javascript but instead put the source in a <code>&lt;source&gt;</code> tag like regular mp4 files?</p>
  
  <p><strong>Use Case</strong></p>
  
  <p>I am running a website with the html5 based <a href="https://github.com/sampotts/plyr" rel="nofollow noreferrer">Plyr</a>. So far, I have managed to get it running along with having the option of 4 resolutions to choose from, encoded with mp4 files. The video tag looks like this:</p>
  
  <pre><code>&lt;video id="video" controls poster="{URL}/poster.jpg playsinline&gt;
  &lt;source src="{URL}/1080.mp4 type="video/mp4" size="1080"&gt;
  &lt;source src="{URL}/720.mp4" type="video/mp4" size="720"&gt;
  and so on....
  </code></pre>
  
  <p>However the issue is if I put a source with an <code>.m3u8</code> file extension, Firefox complains it cannot play it since it's unsupported. Fair enough, except the hls demo on the github readme shows a codepen where the source is hardcoded in, like so:</p>
  
  <pre><code>&lt;video id="video" controls&gt;&lt;/video&gt;
  &lt;script&gt;
  var source = 'https://&lt;url-to-m3u8-here
  ...
  </code></pre>
  
  <p>This cannot work in my use-case since as you saw above, I need the multiple sources for resolution switching until Plyr can do this with the manifest natively.</p>
  
  <p>Is there any way to incorporate hls.js into Plyr so I can just specify a video tag like so?</p>
  
  <pre><code>&lt;video id="video" controls poster="{URL}/poster.jpg playsinline&gt;
  &lt;source src="{URL}/index.m3u8" type="application/x-mpegURL" size="Auto"&gt;
  &lt;source src="{URL}/1080.mp4 type="video/mp4" size="1080"&gt;
  &lt;source src="{URL}/720.mp4" type="video/mp4" size="720"&gt;
  </code></pre>
  
  <p>(I'm working to include the Auto tag)</p>