add basic-usage demo

plegge · Jan 30, 2018 · a69eccb · a69eccb
1 parent 6fed40e
commit a69eccb
Showing 1 changed file with 39 additions and 0 deletions.
diff --git a/demo/basic-usage.html b/demo/basic-usage.html
@@ -0,0 +1,39 @@
+<html>
+
+  <head>
+    <title>Hls.js demo - basic usage</title>
+  </head>
+
+  <body>
+      <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+
+      <center>
+          <h1>Hls.js demo - basic usage</h1>
+          <video height="600" id="video" controls></video>
+      </center>
+
+      <script>
+        if(Hls.isSupported()) {
+          var video = document.getElementById('video');
+          var hls = new Hls();
+          hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
+          hls.attachMedia(video);
+          hls.on(Hls.Events.MANIFEST_PARSED,function() {
+            video.play();
+        });
+       }
+       // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+       // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
+       // This is using the built-in support of the plain video element, without using hls.js.
+        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+          video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
+          video.addEventListener('canplay',function() {
+            video.play();
+          });
+        }
+      </script>
+
+  </body>
+</html>
+
+