fix

pyt

2025-04-21 02d16b19f80fba17ecfdfeb5f0b0ded25d2b8953

fix

 src/components/PlayLive/index.vue

@@ -1,6 +1,6 @@
<template>
    <div>
        <video id="video" width="100%" height="100%" muted controls></video>
    <div style="height: 100%;">
        <video id="video" style="height: 100%;width: 100%;" muted controls></video>
    </div>
</template>


 src/view/early-warning/index.vue

@@ -276,9 +276,13 @@
        },

        handleSizeChange(e) {

            this.queryForm.pageSize = e

            this.fetchData()



        },

        handleCurrentChange(e) {

            this.queryForm.page = e

            this.queryForm.pageCurr = e

            this.fetchData()



        },

    }

}


 src/view/playback/index.vue

@@ -56,15 +56,8 @@
                </div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content">
                    <!-- <video ref="videoPlayer" controls autoplay style="width: 100%; height: 100%;">
                        <source :src="videoUrl" type="video/mp4">
                        您的浏览器不支持视频播放
                    </video> -->
                    <video controls src="http://192.168.110.85/test.m3u8" ref="videoPlayer" crossorigin="anonymous" autoplay style="width: 100%; height: 100%;">
                        <source src="http://192.168.110.85/test.m3u8" type="application/x-mpegURL">
                    </video>

                <div class="grid-content" style="">
                   <PlayLive :serverPort="serverPort" :serverIp="serverIp" :carId="$route.query.id"/>
                </div>
            </el-col>
        </el-row>
@@ -72,10 +65,13 @@
</template>

<script>
import moment from 'moment';
import { getDetail, getPlaybackVideo } from './service'
import PlayLive from '@/components/PlayLive'

export default {
    components: {
        PlayLive
    },
    data() {
        return {
            info: {},
@@ -94,7 +90,9 @@
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
            },
            serverIp: '',
            serverPort: ''
        }
    },
    created() {
@@ -124,22 +122,6 @@
                }
            }
        },
        initVideoPlayer(url) {
            const video = this.$refs.videoPlayer;
            video.src = url;

            video.onerror = (e) => {
                console.error('视频播放错误:', e);
                this.$message.error('视频播放失败，请检查网络连接或视频源');
            };

            video.oncanplay = () => {
                video.play().catch(err => {
                    console.error('播放错误:', err);
                    this.$message.error('视频播放失败，请检查网络连接或视频源');
                });
            };
        },
        search() {
            if (!this.searchForm.startTime || !this.searchForm.endTime) {
                this.$message.warning('请选择开始时间和结束时间');
@@ -166,10 +148,10 @@
                endTime: new Date(this.searchForm.endTime).getTime(),
                id: this.$route.query.id
            }).then(res => {
                if (res && res.url) {
                if (res && res.serverIp && res.serverPort) {
                    // 构建完整的视频流地址
                    const videoUrl = res.url;
                    this.initVideoPlayer(videoUrl);
                    this.serverIp = res.serverIp;
                    this.serverPort = res.serverPort
                } else {
                    this.$message.error('未获取到视频地址');
                }
@@ -246,9 +228,6 @@
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

video {