vue + flv.js 实现多视频监控播放

最新推荐文章于 2025-02-25 14:38:41 发布

原创最新推荐文章于 2025-02-25 14:38:41 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

疑难杂症

1 篇文章

订阅专栏

该文章展示了如何在vue3环境中使用flv.js库来创建和控制视频播放器。通过遍历videoUrlData数组，为每个视频源创建flv播放器，设置视频属性如autoplay和muted，并使用flvjs.createPlayer加载和播放流媒体内容。

安装video.js 命令：

 npm install flv.js

vue3实现细节代码

<template>
  <div v-for="(v, index) in videoUrlData" :key="v">
    <video
      :id="'video' + index"
      style="background-color:red;"
      class="video"
      controls
      autoplay
      muted
    ></video>
    <!-- <div class="video-open">
      <img src="@/assets/img/play.png" alt="">
    </div> -->
   
    <!-- <button @click="play">播放</button>
    <button @click="pause">暂停</button> -->
  </div>
</template>
  
<script setup lang="ts">
import flvjs from "flv.js";
import { onMounted } from "vue";

interface IProps {
    videoUrl?: string,
    videoRef?: string,
    videoUrlData: any
    //   type: any,
    //   default: "https://mister-ben.github.io/videojs-flvjs/bbb.flv"
    // }
}
const props = defineProps<IProps>();

const startPlay = () => {
  props.videoUrlData.forEach((item: { videoUrl: any; }, index: string) => {
    if (flvjs.isSupported()) {
      let player = null;
      let videoElement = document.getElementById("video" + index) as HTMLVideoElement;
      player = flvjs.createPlayer({
        type: "flv", //= > 媒体类型 flv 或 mp4
        isLive: true, //= > 是否为直播流
        hasAudio: false, //= > 是否开启声音 注意：开启声音就不会自动播放啦
        url: item.videoUrl, //= > 视频流地址
      });
      player.attachMediaElement(videoElement); //= > 绑DOM
      player.load();
      player.play();
    } else {
      console.log("flvjs不支持");
    }
  });
};

onMounted(() => {
  startPlay();
});

</script>
  
  <style scoped lang="scss">
.video {
    height: 106px;
    margin-left: 14px;
    margin-top: 26px;
}

.video-open {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
    display: inline-block;
    width:52px;
    height:52px
    }
}
</style>