From dbd7e56f6e6696daf2db77bfb63b29d0fdafe168 Mon Sep 17 00:00:00 2001
From: Dylan Jhaveri <dylanjha@users.noreply.github.com>
Date: Thu, 6 Aug 2020 01:11:59 -0700
Subject: [PATCH 1/2] Swap logic for checking Hls.isSupported()

Before Safari supported MSE then this recommendation worked well because `Hls.isSupported()` would return `false`. Now that changed and it returns `true`. I typically think it's a best practice to use the browser's native HLS support if it's available, otherwise fallback to hls.js.
---
 README.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 2f8008c3136..5773e9643a5 100644
--- a/README.md
+++ b/README.md
@@ -64,16 +64,6 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
 <script>
   var video = document.getElementById('video');
   var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
-  if (Hls.isSupported()) {
-    var hls = new Hls();
-    hls.loadSource(videoSrc);
-    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
@@ -85,11 +75,23 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
   // video.src URL must be on the user-driven white-list before a 'canplay'
   // event will be emitted; the last video event that can be reliably
   // listened-for when the URL is not on the white-list is 'loadedmetadata'.
-  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+  //
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
     video.src = videoSrc;
     video.addEventListener('loadedmetadata', function() {
       video.play();
     });
+  //
+  // hls.js is not supported on platforms that do not have Media Source
+  // Extensions (MSE) enabled.
+  //
+  } else if (Hls.isSupported()) {
+    var hls = new Hls();
+    hls.loadSource(videoSrc);
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MANIFEST_PARSED, function() {
+      video.play();
+    });
   }
 </script>
 ```

From db6113ad129bcff7f6fb56587863645f33a87e00 Mon Sep 17 00:00:00 2001
From: Dylan Jhaveri <dylanjha@users.noreply.github.com>
Date: Thu, 6 Aug 2020 11:25:58 -0700
Subject: [PATCH 2/2] Update README

Keep the same "Getting Started" example, but add a second "Alternative Setup"
---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5773e9643a5..c005dcd3a33 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,16 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
 <script>
   var video = document.getElementById('video');
   var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+  if (Hls.isSupported()) {
+    var hls = new Hls();
+    hls.loadSource(videoSrc);
+    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
@@ -75,6 +85,35 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
   // video.src URL must be on the user-driven white-list before a 'canplay'
   // event will be emitted; the last video event that can be reliably
   // listened-for when the URL is not on the white-list is 'loadedmetadata'.
+  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = videoSrc;
+    video.addEventListener('loadedmetadata', function() {
+      video.play();
+    });
+  }
+</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;
@@ -82,8 +121,7 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
       video.play();
     });
   //
-  // hls.js is not supported on platforms that do not have Media Source
-  // Extensions (MSE) enabled.
+  // If no native HLS support, check if hls.js is supported
   //
   } else if (Hls.isSupported()) {
     var hls = new Hls();