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

.ლ.

已于 2024-08-15 14:35:26 修改

阅读量672

点赞数 2

分类专栏：海康视频文章标签：前端 vue.js 音视频

于 2024-08-15 14:17:04 首次发布

本文链接：https://blog.csdn.net/LovelyLittleCub/article/details/141220890

版权

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

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

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;