vue播放flv格式的直播流

小曲曲2024-06-20 9:43

在ios无法播放，安卓可以

安装

npm install flv.js --save

页面

js 复制代码

<template>
  <div>
    <video
      ref="videoElement"
      style="width: 100%; height: 100%"
      autoplay
      playsinline
      muted
    ></video>
  </div>
</template>

<script>
import FlvPlayer from "flv.js";

export default {
  data() {
    return {
      player: null,
      streamUrl:
        "http://180.101.234.45:10554/icvs/stream.flv?puid=201115203876589199&token=18lCFOd-9d&idx=0&stream=0&resType=IV&random=72b8f655-6e51-489a-a38f-af73087be20f",
    };
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    async initPlayer() {
      FlvPlayer.isSupported() && (await FlvPlayer.getFeatureList());

      this.player = FlvPlayer.createPlayer({
        type: "flv",
        url: this.streamUrl,
      });

      // 设置视频元素
      this.player.attachMediaElement(this.$refs.videoElement);

      // 监听播放器就绪事件
      this.player.on(FlvPlayer.Events.MEDIA_INFO, () => {
        // 在此可以做一些播放器初始化后的操作
      });

      // 加载和播放视频
      this.player.load();
      this.player.play();
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  },
};
</script>