index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HLS Video Player via Custom Elements Demo</title>
    <link href="styles.css" rel="stylesheet">

    <link rel="import" href="/player.html">
  </head>
  <body>
    <h1>Web Components: Custom Elements Demo with HLS Video</h1>
    <button id="swap">Swap Sources</button>
    <br>
    <hr>

    <section class="videos">

      <hls-video
        id="video1"
        video-title="Big Buck Bunny"
        src="https://play.ingest.info/playlists/14cf8ce8-6e8e-423f-a92b-833cd211fc74/11657b14-bcac-4ad7-8fa7-705335d5fd60.m3u8?name=high">
      </hls-video>

      <hls-video
        id="video2"
        video-title="Tears of Steel"
        src="https://play.ingest.info/playlists/14cf8ce8-6e8e-423f-a92b-833cd211fc74/ea6d065d-bd5d-4ec8-bb10-de29e8cd5fad.m3u8?name=high">
      </hls-video>

    </section>

    <hr>
    <br>
    <h1>Resources</h1>
    <ul class="resources">
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">MDN: Custom Elements</a></li>
      <li><a href="https://developers.google.com/web/fundamentals/getting-started/primers/customelements">Google: Custom Elements v1: Reusable Web Components</a></li>
      <li><a href="https://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML Imports</a></li>
      <li><a href="https://ingest.io">Ingest</a></li>
    </ul>

    <script src="scripts.js"></script>
  </body>
</html>