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>

实现效果

相关推荐
沃虎Chinty-0318 小时前
音频变压器核心技术解析:噪声隔离、阻抗匹配与信号平衡转换
音视频
|晴 天|1 天前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript
猫3281 天前
v-cloak
前端·javascript·vue.js
旷世奇才李先生1 天前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
SoaringHeart1 天前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
有味道的男人1 天前
电商效率翻倍:用 Open Claw 对接小红书视频详情接口,一键抓取商品全量信息
音视频
奇舞精选1 天前
写 HTML 就能做视频?HeyGen 开源的这个工具有点意思
html·agent
IT_陈寒1 天前
Vite静态资源加载把我坑惨了
前端·人工智能·后端
herinspace1 天前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别
小码哥_常1 天前
从MVC到MVI:一文吃透架构模式进化史
前端