<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source src="https://example.com/path/to/your.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my-video');
</script>
</body>
</html>
In this example, we’ve included the Video.js CSS and JavaScript files in the head section of our HTML file. We’ve also created a video element that references the M3U8 URL we want to play, and set its attributes to enable playback controls and auto-loading.
In the script section, we’ve initialized Video.js on the video element using JavaScript. This creates a Video.js player instance that we can use to control playback of the video.
You can copy and paste this code into a new HTML file and replace the M3U8 URL with your own URL to test it out.