vue项目中使用hls.js播放m3u8视频踩过的坑小结
作者：LIU雷
hls.js是一个用于在浏览器中播放HLS（HTTP Live Streaming）视频流的JavaScript库,这篇文章主要介绍了vue项目中使用hls.js播放m3u8视频踩过坑的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
video.js 是一个功能强大的 HTML5 视频播放器，结合 videojs-contrib-hls 插件可以轻松实现 .m3u8 格式视频的播放。
下面展示一些 代码片。
安装依赖
npm install video.js videojs-contrib-hls
一、vue项目中代码片段 ，作为组件使用
<!-- 视频 -->
<template>
<div class="video-box">
<!-- 视频播放器 -->
<video id="video" controls autoplay width="100%" height="100%"></video>
</div>
</template>
<script>
import Hls from "hls.js";
import popWrapper from "@/components/popWrapper";
export default {
name: "videoPop",
data() {
return {
};
},
created() {},
mounted() {
// 摄像头视频弹窗传值
this.bus.$on("videoOpen", (row) => {
this.showWtck(row);
});
},
methods: {
videoClose() {
this.showOceanVideo = false;
},
// 摄像头视频弹窗传值 sxtbh
async showWtck() {
this.videoPlay();
this.showOceanVideo = true;
},
videoPlay(index) {
// 获取 video 元素
const video = document.getElementById("video");
// HLS 流地址
const videoSrc = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';//测试开源地址 注：视频格式需要时164的，web端此方法不支持165
// 检查是否支持 HLS.js
if (Hls.isSupported()) {
// 创建 HLS 实例
const hls = new Hls();
// 加载 .m3u8 文件
hls.loadSource(videoSrc);
// 将 HLS 实例绑定到 video 元素
hls.attachMedia(video);
// 监听事件：当 HLS 清单文件解析完成后自动播放
hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log("HLS stream loaded successfully");
video.play();
});
// 监听错误事件
hls.on(Hls.Events.ERROR, (event, data) => {
this.videoPlay()
console.error("HLS error:", data);
});
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
// 如果浏览器原生支持 HLS（如 Safari）
video.src = videoSrc;
video.addEventListener("loadedmetadata", () => {
console.log("Native HLS playback supported");
video.play();
});
} else {
alert('您的浏览器不支持播放此视频。')
console.error("Your browser does not support HLS playback.");
}
},
},
beforeDestroy() {
},
};
</script>
<style lang='scss' scoped>
.video-box {
height: 700px;
margin-bottom: 30px;
overflow: auto;
}
</style>
二、以下是H5的Demo可以直接运行
直接复制代码，验证一下提供方的视频地址是否有误
此处踩过坑 265格式web端不能播放，资源格式264可以正常播放
测试监控地址是否可以正常播放 我使用的是工具 VLC media player，我是图方便在电脑管家下载的
(H265)
h264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HLS.js 播放监控视频</title>
<!-- 引入 hls.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
video {
max-width: 100%;
max-height: 100%;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div>
<h1 style="text-align: center;">HLS.js 播放监控视频</h1>
<!-- 视频播放器 -->
<video id="video" controls autoplay width="640" height="360"></video>
</div>
<script>
// 获取 video 元素
const video = document.getElementById('video');
// HLS 流地址
// const videoSrc = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';//测试开源地址
// const videoSrc = 'http://cmgw-vpc.lechange.com:8888/LCO/9C07128PAG4B9E2/0/1/20250324T021313/openhz0735a494162c4ba6bb287d7b6a5f4bb7.m3u8?source=open';//大华提供地址165
const videoSrc = 'http://cmgw-vpc.lechange.com:8888/LCO/9C07128PAGC1657/0/0/20250324T015744/openhz136dd7fbc6484a5095579ba383b035bb.m3u8?source=open';//大华提供地址164
// 检查是否支持 HLS.js
if (Hls.isSupported()) {
// 创建 HLS 实例
const hls = new Hls();
// 加载 .m3u8 文件
hls.loadSource(videoSrc);
// 将 HLS 实例绑定到 video 元素
hls.attachMedia(video);
// 监听事件：当 HLS 清单文件解析完成后自动播放
hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('HLS stream loaded successfully');
video.play();
});
// 监听错误事件
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS error:', data);
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
// 如果浏览器原生支持 HLS（如 Safari）
video.src = videoSrc;
video.addEventListener('loadedmetadata', () => {
console.log('Native HLS playback supported');
video.play();
});
} else {
console.error('Your browser does not support HLS playback.');
}
</script>
</body>
</html>
总结
到此这篇关于vue项目中使用hls.js播放m3u8视频踩过坑的文章就介绍到这了,更多相关vue hls.js播放m3u8视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！