<template>
<div class="videoBox">
<video id="videoElement" autoplay muted style="width: 100%; height: 100%; object-fit: fill"></video>
</div>
</template>
<script setup >
import { ref, reactive, nextTick, onMounted, onUnmounted } from "vue"
import flvjs from 'flv.js';
const flvPlayer = ref(null);
const createVideo = () => {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
flvPlayer.value = flvjs.createPlayer(
{
type: 'flv',
url: '', //你的url地址
isLive: true,
hasAudio: false,
},
{
enableWorker: false,
fixAudioTimestampGap: false
}
);
flvPlayer.value.attachMediaElement(videoElement);
flvPlayer.value.load();
setTimeout(function () {
flvPlayer.value.play();
}, 300);
//处理视频播放错误的语法
// flvPlayer.value.on('error', () => {
// // message.error(`视频加载失败,请稍候重试!`);
// return false;
// });
}
};
const destroy = () => {
flvPlayer.value.pause(); //暂停播放数据流
flvPlayer.value.unload(); //取消数据流加载
flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
flvPlayer.value.destroy(); //销毁播放实例
flvPlayer.value = null;
};
defineExpose({ destroy });
onMounted(() => {
createVideo();
});
onUnmounted(async () => {
destroy()
});
</script>
<style scoped>
.videoBox {
width: 800px;
height: 450px;
border: solid 1px #ccc;
}
</style>
vue3 flvjs播放flv直流视频
于 2023-10-11 16:51:39 首次发布