basic-usage.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <html>
  2. <head>
  3. <title>Hls.js demo - basic usage</title>
  4. </head>
  5. <body>
  6. <script src="hls.js"></script>
  7. <center>
  8. <h1>Hls.js demo - basic usage</h1>
  9. <video height="600" id="video" controls></video>
  10. </center>
  11. <script>
  12. var video = document.getElementById('video');
  13. if (Hls.isSupported()) {
  14. var hls = new Hls({
  15. debug: true,
  16. });
  17. hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
  18. hls.attachMedia(video);
  19. hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  20. video.muted = true;
  21. video.play();
  22. });
  23. }
  24. // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  25. // 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 through the `src` property.
  26. // This is using the built-in support of the plain video element, without using hls.js.
  27. else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  28. video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  29. video.addEventListener('canplay', function () {
  30. video.play();
  31. });
  32. }
  33. </script>
  34. </body>
  35. </html>