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>

实现效果

相关推荐
蜡台3 分钟前
Vue2 elementui2 中 el-switch 实现先判断改变状态
前端·vue.js·elementui·el-switch
whuhewei3 分钟前
CSS动画倍速播放
前端·css
是Winky啊5 分钟前
【OpenClaw】视频批量生成
音视频·agent·openclaw
极智Al中转6 分钟前
grok-video-3视频生成API深度对接与工程化实践
人工智能·音视频
周不凢6 分钟前
elementui 表格行选择:通过 toggleRowSelection 方法控制表格行的选中状态
前端·javascript·elementui
黄林晴7 分钟前
Swift 杀进 Android,Google 和 Apple 都要失眠了?
android·前端·swift
Zhao136824553918 分钟前
DP108B完全替代兼容进口的CM108B,USB 音频单芯片
linux·运维·音视频
一晌小贪欢10 分钟前
Web 自动化指南:如何用 Python 和 Selenium 解放双手
开发语言·前端·图像处理·python·自动化·python办公
云浪11 分钟前
认识 Service Worker
前端·javascript
愚公搬代码13 分钟前
【愚公系列】《剪映+DeepSeek+即梦:短视频制作》037-合成:开启视觉冲击魔法(蒙版)
音视频