VUE3使用jessibuca播放器

• 参考

VUE3使用jessibuca播放器-CSDN博客文章浏览阅读223次。【代码】VUE3使用jessibuca播放器。_vue3使用jessibucahttps://blog.csdn.net/quantum7/article/details/146020484

• 播放代码

<template><j-modalvisiblewidth="900px"height="440px"@cancel="emits('update:visible', false)"@ok="emits('update:visible', false)":maskClosable="false" ><j-form><div class="root"><div class="column"><div class="container-shell" id="video-container" ref="video-container"></div></div></div></j-form></j-modal>
</template><script setup lang="ts">import { reactive } from "vue";const emits = defineEmits(['confirm', 'update:visible']);const props = defineProps<{data: {type: Object,},visible: boolean;
}>();onMounted(() => {var container = document.getElementById('video-container');const jessibuca = new window.Jessibuca(Object.assign({decoder: "/js/jessibuca/decoder.js",container: container,isResize: false,text: "",loadingText: "疯狂加载中...",// hasAudio:false,hotKey: true,// hasAudio:false,controlAutoHide: true,supportDblclickFullscreen: true,showBandwidth: true, // 显示网速forceNoOffscreen: true,isNotMute: true,timeout: 10,}));jessibuca.play(videoUrl);
});</script><style scoped>
.root {display: flex;place-content: center;margin-top: 3rem;
}.column {flex: 1; /* 让每个列平分空间 */margin: 5px; /* 可选：添加一些间距 */
}.container-shell {position: relative;backdrop-filter: blur(5px);background: #A0A0A0;padding: 30px 4px 10px 4px;/* border: 2px solid black; background: hsla(0, 0%, 50%, 0.5);width: auto; */width: 640px;height: 360px;position: relative;border-radius: 5px;box-shadow: 0 10px 20px;
}</style>