1 安装依赖
npm install mpegts.js
2 HTML
<el-dialog v-model="dialogVisible" width="45%" :before-close="closeVideoDialog" title="" center append-to-body> <div class="video-container"> <video ref="videoRef" class="video-player" controls muted autoplay playsinline></video> </div> </el-dialog>3 JS
const 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(); });