<template>
|
<div id="container" ref="container" :style="{width,height}"></div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, onUnmounted, ref, defineProps, defineEmits } from 'vue'
|
import Jessibuca from '../../../public/jessibuca/jessibuca'
|
const props = defineProps({
|
videoUrl: {
|
type: String,
|
required: true
|
},
|
width: {
|
type: String,
|
default: '300px'
|
},
|
height: {
|
type: String,
|
default: '200px'
|
}
|
})
|
const emits = defineEmits(['timeout'])
|
let jessibuca: null | Jessibuca = null
|
const container = ref(null)
|
const buffer = ref(null)
|
const showBandwidth = ref(false)
|
const showOperateBtns = ref(true)
|
const forceNoOffscreen = ref(false)
|
// const playUrl = ref()
|
const playing = ref(false)
|
const quieting = ref(true)
|
const loaded = ref(false)
|
const createJessibuca = () => {
|
jessibuca = new (window as any).Jessibuca({
|
container: container.value,
|
videoBuffer: 0.2, // 缓存时长
|
isResize: false,
|
text: '',
|
// background: "bg.jpg",
|
loadingText: '加载中',
|
controlAutoHide: true,
|
// hasAudio:false,
|
debug: true,
|
showBandwidth: showBandwidth.value, // 显示网速
|
operateBtns: {
|
fullscreen: showOperateBtns.value,
|
screenshot: showOperateBtns.value,
|
play: showOperateBtns.value,
|
audio: showOperateBtns.value,
|
},
|
forceNoOffscreen: forceNoOffscreen.value,
|
isNotMute: false,
|
}) as Jessibuca
|
|
jessibuca.on('load', function () {
|
console.log('on load')
|
})
|
|
jessibuca.on('log', function (msg: any) {
|
console.log('on log', msg)
|
})
|
jessibuca.on('record', function (msg: any) {
|
console.log('on record:', msg)
|
})
|
jessibuca.on('pause', function () {
|
console.log('on pause')
|
playing.value = false
|
})
|
jessibuca.on('play', function () {
|
console.log('on play')
|
playing.value = true
|
loaded.value = true
|
quieting.value = jessibuca?.isMute()
|
})
|
jessibuca.on('fullscreen', function (msg: any) {
|
console.log('on fullscreen', msg)
|
})
|
|
jessibuca.on('mute', function (msg: any) {
|
console.log('on mute', msg)
|
quieting.value = msg
|
})
|
|
jessibuca.on('mute', function (msg: any) {
|
console.log('on mute2', msg)
|
})
|
|
jessibuca.on('audioInfo', function (msg: any) {
|
console.log('audioInfo', msg)
|
})
|
|
// jessibuca.on("bps", function (bps) {
|
// // console.log('bps', bps);
|
// });
|
// let _ts = 0;
|
// jessibuca.on("timeUpdate", function (ts) {
|
// // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
|
// // _ts = ts;
|
// });
|
|
jessibuca.on('videoInfo', function (info: any) {
|
console.log('videoInfo', info)
|
})
|
|
jessibuca.on('error', function (error: any) {
|
console.error('error', error)
|
})
|
|
jessibuca.on('timeout', function () {
|
console.log('timeout')
|
emits('timeout')
|
})
|
|
jessibuca.on('start', function () {
|
console.log('start')
|
})
|
|
// jessibuca.on("stats", function (stats) {
|
// console.log('stats', JSON.stringify(stats));
|
// });
|
|
jessibuca.on('performance', function (performance: any) {
|
let show = '卡顿'
|
if (performance === 2) {
|
show = '非常流畅'
|
} else if (performance === 1) {
|
show = '流畅'
|
}
|
})
|
jessibuca.on('buffer', function (buffer: any) {
|
console.log('buffer', buffer)
|
})
|
|
jessibuca.on('stats', function (stats: any) {
|
console.log('stats', stats)
|
})
|
|
jessibuca.on('kBps', function (kBps: any) {
|
console.log('kBps', kBps)
|
})
|
|
// 显示时间戳 PTS
|
jessibuca.on('videoFrame', function () {
|
|
})
|
|
//
|
jessibuca.on('metadata', function () {
|
|
})
|
}
|
onMounted(() => {
|
createJessibuca()
|
play()
|
})
|
onUnmounted(() => {
|
jessibuca && jessibuca.destroy()
|
})
|
const play = () => {
|
if (props.videoUrl) {
|
jessibuca?.play(props.videoUrl)
|
}
|
}
|
const pause = () => {
|
jessibuca?.pause()
|
playing.value = false
|
}
|
|
const destroy = () => {
|
if (jessibuca) {
|
jessibuca.destroy()
|
}
|
createJessibuca()
|
playing.value = false
|
loaded.value = false
|
}
|
</script>
|
|
<style scoped lang="scss"></style>
|
