vue m3u8实现监控直播

最新推荐文章于 2023-11-10 15:57:54 发布

努力进阶的快快~

最新推荐文章于 2023-11-10 15:57:54 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/m0_69439101/article/details/132665399

版权

vue3 同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

video

3 篇文章 0 订阅

订阅专栏

m3u8

3 篇文章 0 订阅

订阅专栏

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();
});