Vue3使用flvjs播放多个监控视频

最新推荐文章于 2024-05-06 21:42:11 发布

Flipped525

最新推荐文章于 2024-05-06 21:42:11 发布

阅读量1k

点赞数

文章标签：音视频 vue.js javascript

本文链接：https://blog.csdn.net/Flippedguky/article/details/128341849

版权

父组件.vue

<videoFlv v-else :url="item.playUrl" :index="index"></videoFlv>

子组件.vue

<template>
  <div>
    <video
      :id="'videoElement' + index"
      :class="showInfo ? 'video' : 'videos'"
      @dblclick="handleDblClick"
    ></video>
  </div>
</template>

<script setup>
import flvjs from "flv.js";
import { ref, reactive, onMounted, toRefs } from "vue";
import { ElNotification } from "element-plus";
import { usHome } from "@/stores/home";

const player = ref();
const home = usHome();
const showInfo = ref(true);
const props = defineProps({
  url: {
    type: String,
    default: "",
  },
  index: {
    type: Number,
  },
});
const { url, index } = toRefs(props);

onMounted(() => {
  var videoElement = document.getElementById("videoElement" + index.value);
  player.value = flvjs.createPlayer({
    type: "flv",
    url: url.value,
    hasAudio: false,	// 关闭视频音频
  });
  player.value.attachMediaElement(videoElement);
  player.value.load();
  player.value.play();
});
const handleDblClick = () => {
  showInfo.value = !showInfo.value;
  if (!showInfo.value) {
    ElNotification({
      title: "提示",
      message: "双击鼠标左键关闭全屏",
      type: "warning",
    });
    player.value.play();
  } else {
    player.value.pause();
  }
};
</script>
<style scoped lang="scss">
.video {
  width: 190px;
  height: 76px;
  cursor: pointer;
}
.videos {
  width: 100%;
  height: 100%;
  position: fixed;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  z-index: 2000;
}
</style>