官网地址
http://jessibuca.monibuca.com/
文件放置位置
组件代码块
<template>
<div class="root">
<div class="container-shell">
<div class="container" :id="props.id"></div>
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {onMounted, onUnmounted,defineProps} from "vue";
const props = defineProps([
'id',
'playUrl',
])
let jessibuca = {};
const buffer = ref(null);
const showBandwidth = ref(true)
const showOperateBtns = ref(true);
const forceNoOffscreen = ref(false);
const playing = ref(false);
const quieting = ref(true);
const loaded = ref(false);
const createJessibuca = () => {
jessibuca[props.id] = new (window as any).Jessibuca({
container: document.getElementById(`${props.id}`),
videoBuffer: 0.2, // 缓存时长
isResize: false,
text: "",
decoder:'/decoder.js',
loadingText: "加载中,请稍后",
debug: true,
showBandwidth: showBandwidth.value, // 显示网速
operateBtns: {
fullscreen: showOperateBtns.value,
screenshot: showOperateBtns.value,
play: false,
audio: showOperateBtns.value,
},
forceNoOffscreen: forceNoOffscreen.value,
isNotMute: false,
}) as Jessibuca
jessibuca[props.id].on("load", () => {
console.log('dsafdsafdsa')
play()
})
jessibuca[props.id].on("log", function (msg : any) {
console.log("on log", msg);
});
jessibuca[props.id].on("record", function (msg: any) {
console.log("on record:", msg);
});
jessibuca[props.id].on("pause", function () {
console.log("on pause");
playing.value = false;
});
jessibuca[props.id].on("play", function () {
console.log("on play");
playing.value = true;
loaded.value = true;
quieting.value = jessibuca[props.id].isMute();
});
jessibuca[props.id].on("fullscreen", function (msg: any) {
console.log("on fullscreen", msg);
});
jessibuca[props.id].on("mute", function (msg: any) {
console.log("on mute", msg);
quieting.value = msg;
});
jessibuca[props.id].on("mute", function (msg: any) {
console.log("on mute2", msg);
});
jessibuca[props.id].on("audioInfo", function (msg: any) {
console.log("audioInfo", msg);
});
jessibuca[props.id].on("videoInfo", function (info: any) {
console.log("videoInfo", info);
});
jessibuca[props.id].on("error", function (error: any) {
console.log("error", error);
});
jessibuca[props.id].on("timeout", function () {
console.log("timeout");
});
jessibuca[props.id].on('start', function () {
console.log('start');
})
jessibuca[props.id].on("performance", function (performance: any) {
var show = "卡顿";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
}
});
jessibuca[props.id].on('buffer', function (buffer: any) {
console.log('buffer', buffer);
})
jessibuca[props.id].on('stats', function (stats: any) {
console.log('stats', stats);
})
jessibuca[props.id].on('kBps', function (kBps: any) {
console.log('kBps', kBps);
});
// 显示时间戳 PTS
jessibuca[props.id].on('videoFrame', function () {
})
//
jessibuca[props.id].on('metadata', function () {
});
}
onMounted(() => {
createJessibuca();
})
onUnmounted(() => {
jessibuca[props.id] && jessibuca[props.id].destroy();
})
const play = () => {
if (props.playUrl) {
jessibuca[props.id].play(props.playUrl);
}
}
const pause = () => {
jessibuca[props.id].pause();
playing.value = false;
}
const destroy = ()=>{
if (jessibuca[props.id]) {
jessibuca[props.id].destroy();
}
createJessibuca();
playing.value = false;
loaded.value = false;
}
</script>
<style>
.root {
/* flex: 1; */
/* display: flex; */
width: 100%;
height: 100%;
}
.container-shell {
width: 100%;
height: 100%;
display: flex;
position: relative;
/* backdrop-filter: blur(5px); */
/* background: hsla(0, 0%, 50%, 0.5); */
width: auto;
position: relative;
border-radius: 5px;
}
.container {
background: rgba(9, 9, 10, 0.7);
width: 100%;
height: 100%;
/* border: 1px solid red; */
}
</style>