前端播放flv

1 安装依赖npm install mpegts.js2 HTMLel-dialog v-modeldialogVisible width45% :before-closecloseVideoDialog title center append-to-body div classvideo-container video refvideoRef classvideo-player controls muted autoplay playsinline/video /div /el-dialog3 JSconst dialogVisible ref(false); const currentFlvUrl ref(); const videoRef ref(null); let mpegtsPlayer null; const openVideoDialog async (code) { let res await getPreviewUrl({ cameraIndexCode: code }); currentFlvUrl.value res.data; dialogVisible.value true; }; watch(dialogVisible, async (val) { if (val) { await nextTick(); initMpegtsPlayer(currentFlvUrl.value); } else { destroyPlayer(); } }); const initMpegtsPlayer (url) { if (!mpegts.isSupported()) { ElMessage.error(当前浏览器不支持视频流播放); return; } destroyPlayer(); const videoEl videoRef.value; if (!videoEl) return; mpegtsPlayer mpegts.createPlayer({ type: flv, url: url, isLive: true, hasAudio: false, }); mpegtsPlayer.on(mpegts.Events.ERROR, (errType, errDetail, errInfo) { console.warn([mpegts] 视频流错误, errType, errDetail, errInfo); ElMessage.error(视频流加载失败); destroyPlayer(); }); mpegtsPlayer.attachMediaElement(videoEl); mpegtsPlayer.load(); mpegtsPlayer.play().catch((err) console.log(播放提示, err)); }; const destroyPlayer () { if (mpegtsPlayer) { mpegtsPlayer.pause(); mpegtsPlayer.destroy(); mpegtsPlayer null; } }; const closeVideoDialog () { dialogVisible.value false; }; onUnmounted(() { destroyPlayer(); });