No more nonsense to say directly stick code
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><! -- HLS. Js must be imported and can be downloaded locally -->
<style type="text/css">
</style>
</head>
<body>
<div>
<video id="video" width='auto' height="400" src="" controls autoplay muted></video>
</div>
</body>
<script type="text/javascript">
// Play the address
var hlsUrl = "https://pull-hls-l26.douyincdn.com/third/stream-108483928734564838_hd.m3u8"; // You need to replace it with your own video stream address
// Play the video stream
function loadVideo() {
var video = document.getElementById('video'); // Get the video label
if (Hls.isSupported()) {
var hls = new Hls(); // Instantiate the Hls object
hls.loadSource(hlsUrl); // The incoming path
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play(); // Call the playback API
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hlsUrl;
video.addEventListener('loadedmetadata'.function () { video.play(); }); }}// method call
loadVideo();
</script>
</html>
Copy the code