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>

实现效果

相关推荐
Jing_Rainbow3 分钟前
【React-6/Lesson89(2025-12-27)】React Context 详解:跨层级组件通信的最佳实践📚
前端·react.js·前端框架
gustt4 分钟前
构建全栈AI应用:集成Ollama开源大模型
前端·后端·ollama
如果你好4 分钟前
UniApp 路由导航守卫
前端·微信小程序
im_AMBER6 分钟前
告别“玄学”UI:从“删代码碰运气”到“控制 BFC 结界”
前端·css
bjzhang757 分钟前
使用 HTML + JavaScript 实现文件树
javascript·html·文件树
千寻girling9 分钟前
《 MongoDB 教程 》—— 不可多得的 MongoDB
前端·后端·面试
攀登的牵牛花12 分钟前
前端向架构突围系列 - 状态数据设计 [8 - 3]:服务端状态与客户端状态的架构分离
前端
掘金安东尼16 分钟前
⏰前端周刊第 452 期(2026年2月2日-2月8日)
前端·javascript·github
古茗前端团队18 分钟前
业务方上压力了,前端仔速通RGB转CMYK
前端
广州华水科技32 分钟前
单北斗变形监测一体机在基础设施安全与地质灾害监测中的应用价值分析
前端