vue播放flv格式的直播流

  • 在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>
相关推荐
江城开朗的豌豆1 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅34 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多44 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试