Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

README: Swap logic for checking Hls.isSupported() #2954

Merged
merged 2 commits into from
Aug 7, 2020
Merged

README: Swap logic for checking Hls.isSupported() #2954

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbd7e56
Swap logic for checking Hls.isSupported()
dylanjha Aug 6, 2020
db6113a
Update README
dylanjha Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down