111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
Vue
<template>
|
|
<!-- flv视频流播放 -->
|
|
<div>
|
|
<video
|
|
v-if="show"
|
|
id="videoElement"
|
|
:controls="true"
|
|
autoplay
|
|
style="width: 100%; height: 100%; object-fit: fill;">
|
|
</video>
|
|
<el-empty v-else :image="getAssetsFile('lbtmenu/icon-UAV-inner.png')" description="无人机暂未起飞" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref, defineExpose, nextTick
|
|
} from 'vue'
|
|
import flvjs from 'flv.js'
|
|
import { getAssetsFile } from '@/utils/common.js'
|
|
|
|
const emit = defineEmits([ 'toggleShow' ])
|
|
let flvPlayer = null
|
|
const show = ref(false)
|
|
const clear = () => {
|
|
if (flvPlayer) {
|
|
flvPlayer.unload()
|
|
flvPlayer.detachMediaElement()
|
|
flvPlayer = null
|
|
}
|
|
}
|
|
const onPlay = (url) => {
|
|
show.value = true
|
|
nextTick(() => {
|
|
if (flvjs.isSupported()) {
|
|
const videoElement = document.getElementById('videoElement')
|
|
clear()
|
|
flvPlayer = flvjs.createPlayer(
|
|
{
|
|
type: 'flv',
|
|
isLive: true,
|
|
hasAudio: false,
|
|
url
|
|
},
|
|
{
|
|
// 启用IO隐藏缓冲区
|
|
// 如果需要实时(最小延迟)来进行实时流播放,则设置为false
|
|
// 但是如果网络抖动,则可能会停顿
|
|
enableStashBuffer: false,
|
|
// 之时IO暂存缓冲区的初始大小,默认值为384kb,指出合适的尺寸可以改善视频负载/搜索时间
|
|
stashInitialSize: 128
|
|
}
|
|
)
|
|
flvPlayer.attachMediaElement(videoElement)
|
|
flvPlayer.load()
|
|
flvPlayer.play()
|
|
emit('toggleShow', show.value)
|
|
flvPlayer.on('error', () => {
|
|
console.log('errorrrrrrrrrrrrrrrrrrrrrrrr')
|
|
show.value = false
|
|
flvPlayer.pause()
|
|
if (flvPlayer) {
|
|
flvPlayer = null
|
|
}
|
|
emit('toggleShow', show.value)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
defineExpose({
|
|
onPlay
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep .el-empty__image{
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
:deep .el-empty__description p{
|
|
color:#fff;
|
|
}
|
|
/* 播放按钮 */
|
|
video::-webkit-media-controls-play-button {
|
|
display: none;
|
|
}
|
|
/* 进度条 */
|
|
video::-webkit-media-controls-timeline {
|
|
display: none;
|
|
}
|
|
/* 观看的当前时间 */
|
|
video::-webkit-media-controls-current-time-display{
|
|
display: none;
|
|
}
|
|
/* 剩余时间 */
|
|
video::-webkit-media-controls-time-remaining-display {
|
|
display: none;
|
|
}
|
|
/* 音量按钮 */
|
|
video::-webkit-media-controls-mute-button {
|
|
display: none;
|
|
}
|
|
video::-webkit-media-controls-toggle-closed-captions-button {
|
|
display: none;
|
|
}
|
|
/* 音量的控制条 */
|
|
video::-webkit-media-controls-volume-slider {
|
|
display: none;
|
|
}
|
|
</style>
|