vue m3u8实现监控直播

最新推荐文章于 2025-02-14 10:46:34 发布

努力进阶的快快~

最新推荐文章于 2025-02-14 10:46:34 发布

阅读量286

点赞数

分类专栏： vue3 video m3u8 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/132665399

版权

vue3 同时被 3 个专栏收录

20 篇文章

订阅专栏

video

3 篇文章

订阅专栏

m3u8

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装并使用hls.js处理M3U8直播流，包括安装依赖、引入库、在onMounted钩子中初始化HLS对象并加载播放列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装hls

npm install hls.js -S   //  安装依赖

2.引入hls

import Hls from 'hls.js';

3.在onMounted() 钩子函数中

const videoHandle = () => {
  let player = document.getElementById('videoId'); //通过id获取video标签
  var hls = new Hls(); //创建 hls 对象
  //本地
  hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'); //这是个测试的m3u8地址   把地址 换上去即可
  hls.attachMedia(player); //将video 传入
  hls.on(Hls.Events.MANIFEST_PARSED, function () {
    player.play(); //开始播放
  });
};
onMounted(() => {
  videoHandle();
});