Merge pull request #2954 from dylanjha/patch-1

README: Swap logic for checking Hls.isSupported()

README.md

@@ -94,6 +94,46 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
 </script>
 ```
 
+#### Alternative setup
+
+Note that the example code above will check for hls.js support _first_ and then
+fallback to check if the browser natively supports HLS. If you want to check for
+native browser support first, and then fallback to Hls.js you will want to swap
+those conditionals.
+
+The order of these checks depends on if you want to use hls.js whenever possible
+see [this comment](https://github.com/video-dev/hls.js/pull/2954#issuecomment-670021358) to understand some of the tradeoffs.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+<!-- Or if you want a more recent alpha version -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
+<video id="video"></video>
+<script>
+  var video = document.getElementById('video');
+  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+  //
+  // First check for native browser HLS support
+  //
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = videoSrc;
+    video.addEventListener('loadedmetadata', function() {
+      video.play();
+    });
+  //
+  // If no native HLS support, check if hls.js is supported
+  //
+  } else if (Hls.isSupported()) {
+    var hls = new Hls();
+    hls.loadSource(videoSrc);
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MANIFEST_PARSED, function() {
+      video.play();
+    });
+  }
+</script>
+```
+
 ## Video Control
 
 Video is controlled through HTML ```<video>``` element.