How to play hls video

Updated: at 09:12 AM

To play HLS (HTTP Live Streaming) content on a browser, you can use different methods depending on the browser’s native support and available libraries. Here are a few common approaches:

Table of contents

Open Table of contents

1. Native Support

Some modern browsers natively support HLS playback without needing any additional libraries. For instance, Safari on macOS and iOS has built-in HLS support. In these browsers, you can simply use an HTML5 video tag:

<video controls>
  <source src="your-hls-stream-url.m3u8" type="application/x-mpegURL" />
</video>

2. Using hls.js

For browsers that do not natively support HLS (e.g., Chrome, Firefox), you can use the hls.js JavaScript library. This library allows HLS streams to be played using the HTML5 video tag by transcoding the HLS stream into a format the browser can understand.

  1. Include the hls.js library:
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  1. Create an HTML5 video element and use hls.js to attach the HLS stream:
<video id="video" controls></video>
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById("video");
    var hls = new Hls();
    hls.loadSource("your-hls-stream-url.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 doesn't support HLS.js, it should natively support HLS (like Safari).
  else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = "your-hls-stream-url.m3u8";
    video.addEventListener("canplay", function () {
      video.play();
    });
  }
</script>

3. Using Video.js

Video.js is a popular video player library that can be extended with plugins. The videojs-http-streaming (VHS) plugin provides HLS support.

  1. Include Video.js and VHS:
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/videojs-http-streaming.js"></script>
  1. Create a Video.js player and use VHS to load the HLS stream:
<video id="video" class="video-js vjs-default-skin" controls>
  <source src="your-hls-stream-url.m3u8" type="application/x-mpegURL" />
</video>
<script>
  var player = videojs("video");
  player.src({
    src: "your-hls-stream-url.m3u8",
    type: "application/x-mpegURL",
  });
  player.ready(function () {
    player.play();
  });
</script>

Example with a Test Stream

  1. Here’s a full example using hls.js:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HLS.js Player</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video
      id="video"
      controls
      style="position:fixed;right:0;bottom:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:fill;"
    ></video>
    <script>
      if (Hls.isSupported()) {
        var video = document.getElementById("video");
        var hls = new Hls();
        hls.loadSource("https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8");
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
        video.addEventListener("canplay", function () {
          video.play();
        });
      }
    </script>
  </body>
</html>
  1. Here’s a full example using video.js:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="noindex">
	<title>Video.js player</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
</head>
<body style="background:#000;color:#fff;">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
	<div class="video-container">
		<video
			id="my-player"
			class="video-js"
			muted
			controls
			preload="auto"
			data-setup='{}'
			style="position:fixed;right:0;bottom:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:fill;"
		>
			<source id="video-source" type="application/x-mpegURL" src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"></source>
			<p class="vjs-no-js">
				To view this video please enable JavaScript, and consider upgrading to a
				web browser that
				<a href="https://videojs.com/html5-video-support/" target="_blank">
					supports HTML5 video
				</a>
			</p>
		</video>
	</div>
	<script>
		const player = videojs('my-player');
	</script>
</body>
</html>

This example will play a test HLS stream from https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8.