Cloudflare Docs
Stream
Cloudflare Docs
Stream
Search icon (depiction of a magnifying glass)
GitHub icon
Visit Stream on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Stream
  3. Examples
  4. hls.js

hls.js

Example of video playback with Cloudflare Stream and the HLS reference player (hls.js)

Run and edit this code in your browser on Stackblitz.

<html>
	<head>
		<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
	</head>
	<body>
		<video id="video"></video>
		<script>
			if (Hls.isSupported()) {
				const video = document.getElementById('video');
				const hls = new Hls();
				hls.attachMedia(video);
				hls.on(Hls.Events.MEDIA_ATTACHED, () => {
					hls.loadSource(
						'https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8'
					);
				});
			}


			video.play();
		</script>
	</body>

</html>

Refer to the hls.js documentation for more information.