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>

实现效果

相关推荐
Leyla3 分钟前
【代码重构】好的重构与坏的重构
前端
影子落人间6 分钟前
已解决npm ERR! request to https://registry.npm.taobao.org/@vant%2farea-data failed
前端·npm·node.js
Mr数据杨8 分钟前
我的AI工具箱Tauri版-VideoClipMixingCut视频批量混剪
音视频
!学习使我快乐!10 分钟前
检测场景变化并将视频按场景分开
音视频
世俗ˊ31 分钟前
CSS入门笔记
前端·css·笔记
子非鱼92131 分钟前
【前端】ES6:Set与Map
前端·javascript·es6
6230_36 分钟前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
想退休的搬砖人44 分钟前
vue选项式写法项目案例(购物车)
前端·javascript·vue.js
加勒比海涛1 小时前
HTML 揭秘:HTML 编码快速入门
前端·html
啥子花道1 小时前
Vue3.4 中 v-model 双向数据绑定新玩法详解
前端·javascript·vue.js