HTML5播放 M3U8的hls流地址

在HTML5页面上播放M3U8的hls流地址

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>视频播放</title>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

</head>

<body>

<video id="video" style="border: 1px solid red;" width="640" height="480" controls autoplay></video>

<script>

if (Hls.isSupported()) {

var videoElement = document.getElementById('video');

var hls = new Hls();

hls.loadSource('http://220.161.87.62:8800/hls/0/index.m3u8'); // M3U8地址,根据实际情况修改

hls.attachMedia(videoElement);

hls.on(Hls.Events.MANIFEST_PARSED, function() {

videoElement.play();

});

}

</script>

</body>

</html>

实现效果

相关推荐
南囝coding6 分钟前
2025年CSS新特性大盘点
前端·css
c***V32312 分钟前
前端框架对比:10个主流框架优缺点分析
前端·前端框架
栀秋66624 分钟前
当我把 proto 打印出来那一刻,我懂了JS的原型链
前端·javascript
aqi0026 分钟前
FFmpeg开发笔记(八十九)基于FFmpeg的直播视频录制工具StreamCap
ffmpeg·音视频·直播·流媒体
Cassie燁43 分钟前
element-plus源码解读1——useNamespace
前端·vue.js
一直在学习的小白~44 分钟前
npm发布脚手架流程
前端·npm·node.js
ErMao1 小时前
TypeScript的泛型工具集合
前端·javascript
涔溪1 小时前
如何解决微前端架构中主应用和微应用的通信问题?
前端·架构
重铸码农荣光1 小时前
深入理解 JavaScript 原型链:从 Promise.all 到动态原型的实战探索
前端·javascript·promise
我叫黑大帅1 小时前
什么叫可迭代对象?为什么要用它?
前端·后端·python