UI优化和视频监控写死地址

hejianhao

2025-04-28 d985958fd536d9f967e3a808b12c24dc42222f36

 src/components/PlayLive/index.vue

@@ -1,6 +1,13 @@
<template>
    <div style="height: 100%;">
    <div style="height: 100%; position: relative;">
        <video id="video" style="height: 100%;width: 100%;" muted controls></video>
        <div v-if="showError" class="error-box" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999;">
            <div class="error-content" style="text-align: center; color: #fff;">
                <i class="el-icon-warning" style="font-size: 48px; color: #E6A23C; margin-bottom: 16px;"></i>
                <p style="margin: 8px 0; font-size: 16px;">视频播放失败</p>
                <p style="margin: 8px 0; font-size: 16px;">请稍后重试</p>
            </div>
        </div>
    </div>
</template>

@@ -11,7 +18,7 @@
    props: {
        serverIp: {
            type: String,
            required: ''
            required: null
        },
        serverPort: {
            type: Number,
@@ -21,11 +28,16 @@
            type: Number,
            required: null
        },
        urlLink: {
            type: String,
            required: null,
        },
    },
    data() {
        return {
            flvPlayer: null,
            timer: null,
            showError: false,
        }
    },
    mounted() {
@@ -36,6 +48,7 @@
    },
    methods: {
        playDetection() {
            this.showError = false;
            if (flvjs.isSupported()) {
                playDetection(this.carId).then(res => {
                    this.flvPlayer = flvjs.createPlayer({
@@ -44,12 +57,13 @@
                        cors: true,//是否开启跨域
                        hasAudio: false,//是否开启音频
                        hasVideo: true,//是否开启视频
                        url: `http://${this.serverIp}:${this.serverPort}/live?port=1935&app=flv&stream=${this.carId}`,  // 后端拿到的视频路径
                        // url: `http://${this.serverIp}:${this.serverPort}/live?port=1935&app=flv&stream=${this.carId}`,  // 后端拿到的视频路径       
                        url: this.urlLink,  // 后端拿到的视频路径       
                        enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程
                        enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
                        stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
                        stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
                        seekType: 'range', // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
                        seekType: 'range', // 建议将其设置为"range"模式，以便更快地加载视频数据，提高视频的实时性。
                        lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
                        lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
                        deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
@@ -62,10 +76,12 @@
                            playDetection(this.carId)
                        }, 5000)
                    }).catch(err => {
                        this.showError = true;
                        this.destroyPlayer();
                    })
                    // 错误监听
                    this.flvPlayer.on('error', (err) => {
                        this.showError = true;
                        this.destroyPlayer();
                    });
                })
@@ -88,4 +104,6 @@
}
</script>

<style></style>
<style scoped>
/* 移除之前的样式，使用内联样式确保样式生效 */
</style>