vue使用海康视频web插件如何实现自适应

news2024/9/28 11:25:22

如果要实现自适应的话，就需要在不同的分辨率内设置不同的宽度和高度，可以监听当前屏幕的宽度和高度(可视区域的宽高)，划分不同的显示阶段

通过设置父级元素的宽度和高度实现子级视频的自适应

index.vue

<template>
    <div class="content"> 
        <Videoplayer ref="player"
                :windowWidth="windowWidth"
                :windowHeight="windowHeight"></Videoplayer>
    </div>
</tempalte>

<script>
import Videoplayer from "@/xxxxx"
export default {
    components: {
        Videoplayer
    },
    data() {
        return {
            windowWidth: 0,
            windowHeight: 0,
        }
    },
    mounted() {
        window.addEventListener("resize", this.handleResize);
    },
    methods: {
        handleResize() {
            // 在这里根据窗口大小进行操作，例如自动调整内容的大小
            // 设置数据属性来记录窗口的当前状态
            let contentWidth =
                document.getElementsByClassName("content")[0].offsetWidth;
            this.windowWidth = contentWidth
            let contentHeight =
                document.getElementsByClassName("content")[0].offsetHeight;
            this.windowHeight = contentHeight
            console.log(contentWidth, "contentWidth");
            console.log(contentHeight, "contentHeight");
        }
    }
}

<script>

<style scoped>
.content {
    width: 100%;
    height: 400px;
}
@media only screen and (max-width: 1746px) {
    .content {
        height: 350px;
    }
}
@media only screen and (max-width: 1546px) {
    .content {
        height: 300px;
    }
}
@media only screen and (max-width: 1280px) {
    .content {
        height: 250px;
    }
}
</style>

Videoplayer.vue

在文件中接收"windowWidth","windowHeight"，然后调用更改尺寸的方法，并在监听的时候也设置尺寸