supervision-vue/src/components/video-play.vue

<template>
    <div ref="playerRef" class="video-container"></div>
</template>
<script setup>
import { nextTick } from "vue";


const props = defineProps({
    url: {
        type: String,
        default: ''
    },
    showOperateBtns: {
        type: Boolean,
        default: true
    }
})

const playerRef = ref();
let jessibucaPlayer;
onMounted(() => {
    // 调整宽度
    nextTick(() => {
        playerRef.value.style.height = playerRef.value.scrollWidth * 0.6 + 'px'
    })
    let operateBtns = {}
    if (props.showOperateBtns) {
        operateBtns = {
            screenshot: true, // 是否启用截图功能
            fullscreen: true, // 是否启用全屏功能
            play: true, // 是否启用播放功能
            audio: true, // 是否启用音频功能
            record: false, // 是否启用录制功能
        }
    }
    jessibucaPlayer = new Jessibuca({
        container: playerRef.value,
        isFlv: true, // 是否使用flv格式
        showBandwidth: false, // 是否显示带宽使用情况
        supportDblclickFullscreen: true,
        isResize: false,
        operateBtns,
        loadingText: "加载中...",
    });
    if (props.url) {
        jessibucaPlayer.play(props.url);
    }
});

watch(() => props.url, (url) => {
    if (url) {
        jessibucaPlayer.play(url);
    }
    
})
</script>
<style lang="scss">
.video-container {
    background-color: #0d0e1b;
}
</style>