vue3中使用jessibuca.js实现视频播放

1、在public文件夹中添加decoder.js、decoder.wasm、jessibuca.js

2、在index.html中进行引入：<script src="/jessibuca.js"></script>

3、新建视频组件JessibucaVideo.vue，代码如下：

<template>

    <div class="video-bounce relative">

        <div class="header">

            <div class="name">

                {{ store.name }}

            </div>

        </div>

        <div class="video" ref="vBox"></div>

        <img

            @click="hideVideo"

            src="@/assets/images/close.png"

            class="close"

            alt=""

        />

        <img

            v-if="play === true"

            src="@/assets/images/loading.png"

            class="loading absolute"

            alt=""

        />

        <img

            src="@/assets/images/full.png"

            @click="requestFull"

            class="enlarge"

            alt=""

        />

        <div

            v-if="fail === true"

            class="error-box absolute flex flex-col items-center justify-center"

        >

            <img src="@/assets/images/error.png" class="error" alt="" />

            <div class="text">播放失败</div>

        </div>

    </div>

</template>

<script setup>

import { videoStore } from '@/store/video.js';

const store = videoStore();

const play = ref(true);

const fail = ref(false);

const vBox = ref(null);

const jessibuca = ref(null);

const initPlayer = () => {

    jessibuca.value = new window.Jessibuca({

        container: vBox.value,

        videoBuffer: 0, // 缓存时长

        isResize: false,

        useWCS: false,

        useMSE: true,

        text: '',

        loadingText: '',

        debug: false,

        supportDblclickFullscreen: true,

        showBandwidth: false, // 显示网速

        operateBtns: {

            fullscreen: false,

            screenshot: false,

            play: false,

            audio: false,

        },

        forceNoOffscreen: true,

        isNotMute: true,

        timeout: 10,

    });

    //视频播放

    jessibuca.value.play(store.url);

    //当解析出视频信息时回调

    jessibuca.value.on('videoInfo', () => {

        play.value = false;

        fail.value = false;

    });

    //触发播放失败事件

    jessibuca.value.on('error', () => {

        play.value = false;

        fail.value = true;

    });

};

const destroyPlayer = () => {

    jessibuca.value.destroy();

};

onMounted(() => {

    initPlayer();

});

onUnmounted(() => {

    destroyPlayer();

});

const hideVideo = () => {

    store.vHide();

};

watch(

    () => store.url,

    (newUrl, oldUrl) => {

        if (newUrl != oldUrl) {

            play.value = true;

            fail.value = false;

            initPlayer();

        }

    }

);

const requestFull = () => {

    vBox.value.requestFullscreen();

};

</script>

<style lang="scss" scoped>

.video-bounce {

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 2000px;

    height: 1210px;

    z-index: 999;

    background: url('@/assets/images/bounceBg.png') no-repeat center center/100%

        100%;

    .header {

        background: url('@/assets/images/vheader.png') no-repeat center center/100%

            100%;

        height: 62px;

        margin: 5px 10px 0 20px;

        .name {

            font-size: 32px;

            line-height: 62px;

            margin-left: 100px;

            font-weight: bold;

            color: #ffffff;

        }

    }

    .close {

        width: 34px;

        height: 34px;

        position: absolute;

        right: 44px;

        top: 14px;

        cursor: pointer;

    }

    .video {

        width: 1900px;

        height: 1120px;

        margin: auto;

        margin-top: 10px;

    }

    .loading {

        width: 100px;

        height: 100px;

        left: 0;

        right: 0;

        bottom: 0;

        top: -20px;

        margin: auto;

        animation: play 2s linear infinite;

    }

    @keyframes play {

        from {

            transform: rotate(0);

        }

        to {

            transform: rotate(360deg);

        }

    }

    .error-box {

        left: 0;

        right: 0;

        bottom: 0;

        top: -30px;

        margin: auto;

        width: 200px;

        height: 200px;

        img {

            width: 100px;

            height: 100px;

        }

    }

    .enlarge {

        width: 50px;

        height: 50px;

        position: absolute;

        right: 110px;

        top: 7px;

        cursor: pointer;

    }

    :deep(.jessibuca-loading) {

        display: none !important;

    }

}

</style>

4、把JessibucaVideo.vue添加到App.vue中进行弹窗显示