<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Stream</title>
<!-- Video.js CSS -->
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<!-- Video.js JavaScript -->
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
<!-- Optional HLS Plugin for Video.js -->
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
<style>
/* Custom styling for the video player */
.video-js {
width: 100%;
height: 100%;
max-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<!-- Video.js Player -->
<video id="liveStream" class="video-js vjs-default-skin" controls autoplay preload="auto" width="640" height="360">
<source src="https://path-to-your-live-stream.m3u8" type="application/x-mpegURL">
<!-- Fallback message for unsupported browsers -->
<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>
<script>
// Initialize the Video.js player
var player = videojs('liveStream');
</script>
</body>
</html>