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>

实现效果

相关推荐
求道於盲9 分钟前
异步编程中的 Future
前端
汝裕光电12 分钟前
上海酒店宴会厅舞台 LED 大屏音视频集成改造实操要点,婚宴 / 年会 / 论坛不停业改造落地指南
音视频
白搞电子14 分钟前
ESP-Mosaico 掌上游戏开发:LVGL 抛硬币动画、音频混音与 BMI270 摇晃触发
单片机·嵌入式硬件·物联网·游戏·音视频
Z兽兽26 分钟前
HBuilder打包web地址的apk,更新dist后如何自动清缓存
前端·android应用打包
安河桥。33 分钟前
V4L2架构在工程实践中的应用
嵌入式硬件·音视频
Hilaku35 分钟前
Bun 真的能取代 Node.js 吗?
前端·javascript·程序员
奔跑的卡卡1 小时前
线上Web异常发现为什么总是滞后?一套自研Web实时异常分析监控系统整体架构拆解
前端·web安全·架构
梦曦i1 小时前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
流光D1 小时前
AI时代,搭建 web 站点并配置 nginx 反向代理流程
运维·服务器·前端·人工智能·nginx·ai·ai编程
PBitW1 小时前
Travel Planner — 智能旅行行程规划助手
前端·后端