large-screen/src/views/HomeView.vue

<template>
  <div class="home">
    <div v-show="screenData.state === 1" style="width: 128px; height: 256px">
      <img
        style="width: 100%; height: 100%"
        :src="screenData.url"
        alt="大屏图片"
      />
    </div>
    <div v-show="screenData.state === 2" class="video-container">
      <video
        ref="qq"
        class="qq"
        :src="screenData.url"
        muted
        autoplay
        controls
        loop
      />
    </div>
  </div>
</template>

<script>
import { clientGet } from "@/utils/request";

export default {
  name: "HomeView",
  async created() {
    this.deviceId = this.$route.query.deviceId;
    const res = await clientGet("/test/getScreenControl/" + this.deviceId);
    if (res.code !== 200) {
      alert(res.msg);
    }
    this.screenData = res.data;
  },
  mounted() {
    let element = this.$el.querySelector(".qq");
    if (element) {
      setTimeout(() => {
        element.play().catch((e) => {
          console.log(e);
          alert("自动播放失败，请手动播放");
        });
      }, 1000);
    }
  },
  data() {
    return {
      text: "",
      params: 123,
      deviceId: "",
      screenData: {
        url: "",
        state: 1,
        deviceId: "",
      },
    };
  },
};
</script>

<style scoped>
.video-container {
  width: 128px;
  height: 256px;
  position: relative;
}

.qq {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使视频覆盖整个容器 */
}
</style>