当前位置: 首页 > 工具软件 > chimee > 使用案例 >

vue项目使用chimee搭建网络监控环境---直播m3u8

劳彦
2023-12-01

一、安装chimee插件,以下三步

npm i chimee
npm i chimee-plugin-controlbar
npm i chimee-plugin-danmu

二、在需要的文件中引入chimee(看需求引入)

import chimee from 'chimee';
import flv from 'chimee-kernel-flv';
import hls from 'chimee-kernel-hls';
import chimeePluginControlbar from 'chimee-plugin-controlbar';
import chimeePluginDanmu from 'chimee-plugin-danmu';
chimee.install(chimeePluginControlbar);
chimee.install(chimeePluginDanmu);

三、在methods里面写个方法,在mounted里调用

<div id="wrapper"></div>
mounted(){
	this.xc();
}
methods:{
	xc() {
      this.player = new chimee({
        wrapper: document.getElementById("wrapper"),//video dom容器
        src: 'http://cdn.toxicjohann.com/lostStar.m3u8',//直播地址(我这个src是假的)
        controls: true,//是否展示控制条
        box: "hls",//直播形式flv、native和hls
        isLive: true,// 播放类型 false(点播)和 true(直播)
        autoplay: true,//是否自动播放
        //kernels是播放器核心解码器。因为体积问题,chimee 默认仅支持原生播放器,如果需要支持其余解码方式请引入相应的解码器。
        kernels: {
          flv,
          hls
        }
      });
    },
}
 类似资料: