vue2使用jessibuca.js播放.flv、m3u8视频流(监控)

vue2播放.flv、m3u8视频流(监控)的实现过程，需要的朋友可以参考下

一、步骤介绍

1.下载插件所需的js文件 ‘decoder.js’、‘decoder.wasm’、‘jessibuca.js’、‘jessibuca.d.ts’

2.全局引入‘jessibuca.js’文件

3.创建Jessibuca.vue播放组件

4.引用组件

二、具体代码

官网地址：Jessibuca，从官网demo中下载所需要的文件 （jessibuca.com/api.html）

• 1.将下载的文件存放到vue项目的‘public’文件夹下

• 2.全局引用

在项目根目录下找到index.html文件，在index.html文件中全局引用‘jessibuca.js’文件

3.实现播放

创建容器

    <div class="container-shell">
        <div id="container"></div>
    </div>

创建实例，播放直播视频

       let $container = document.getElementById('container');
       let jessibuca = new Jessibuca({
            container: $container,
            videoBuffer: 0.2,
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            showBandwidth: true,
            operateBtns: {
                fullscreen: true,
                screenshot: true,
                play: true,
                audio: true,
            },
            forceNoOffscreen: true,
            isNotMute: false,
        });

        let videoUrl = "";//你的播放地址
        jessibuca.play(videoUrl);

还可以根据需要修改播放器的配置

screenshot: true, // 启用截图功能
fullscreen: true, // 启用全屏功能 
play: true, // 启用播放功能 audio: true, // 启用音频功能 
controls: true, // 启用控制条 
autoplay: false, // 启用自动播放 
loop: false, // 启用循环播放 
muted: false, // 启用静音
width: 640, // 设置宽度 
height: 360, // 设置高度 
preload: 'auto', // 设置预加载策略 poster: 'https://example.com/poster.jpg', // 设置海报图 onPlay: function() { console.log('Video started playing'); }, // 播放时触发 
onPause: function() { console.log('Video paused'); }, // 暂停时触发 
onEnd: function() { console.log('Video ended'); }, // 播放结束时触发 
playbackRate: 1, // 设置播放速度 volume: 0.8, // 设置音量 
qualityLevels: [144, 360, 720, 1080] // 设置视频质量选项