vue播放flv格式的直播流

小曲曲

于 2024-06-19 13:41:37 发布

阅读量225

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_43848576/article/details/139800754

版权

vue 同时被 2 个专栏收录

140 篇文章 3 订阅

订阅专栏

视频

2 篇文章 0 订阅

订阅专栏

在ios无法播放，安卓可以

安装

npm install flv.js --save

页面

<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>