【flv.js解析视频流】

视频流前端解析 - 测试代码备份

<template>
  <div :class="{ player: true, selected: isSelected }" @click="handlePlayerClick">
    <!-- {{ title }}号窗口 -->
    <video class="cell-player-1" ref="videosmallone" preload="auto" muted controls autoplay type="rtmp/flv">
      <source src="" />
    </video>
  </div>
</template>

<script>
// import flvjs from 'flv.js';

export default {
  props: {
    title: {
      type: Number,
      default: 1
    },
    activePlayer: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      player: null,
      loading: false,
      videoUrl: '',
      videoToken: ''
    };
  },
  beforeUnmount() {
    if (this.player) {
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    }
  },
  computed: {
    // Use a computed property to determine if the player is active
    isSelected() {
      return this.activePlayer === this.title;
    },
    playerClass() {
      return ['player', `cell-player-1`, { active: this.title === this.activePlayer }];
    }
  },
  methods: {
    handlePlayerClick() {
      // 在点击事件中调用父组件的方法，传递数据
      this.$emit('playerClick', this.title);
      // console.log('class', this.playerClass)
    },
    openVideo(data) {
      // Implement this method to update the data in the player component
      // Use the passed data to update the player's state or perform other operations
      // console.log(`Setting data for player ${this.title}:`, data)
      this.init(data.data.url);
    },
    init(val) {
      //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
      setTimeout(() => {
        //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
        var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
        if (flvjs.isSupported()) {
          //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
          if (this.player !== null) {
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
          }
          this.player = flvjs.createPlayer(
            //创建直播流，加载到DOM中去
            {
              type: 'flv',
              url: val, //你的url地址
              isLive: true, //数据源是否为直播流
              hasAudio: false, //数据源是否包含有音频
              hasVideo: true, //数据源是否包含有视频
              enableStashBuffer: false, // 禁用缓冲区
              stashInitialSize: 128 // 初始缓冲区大小
            },
            {
              enableWorker: false, //不启用分离线程
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              autoCleanupSourceBuffer: true, //自动清除缓存
              lazyLoad: false
            }
          );
          this.player.attachMediaElement(videoElement); //放到dom中去
          this.player.load(); //准备完成
          //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
          this.player.play(); //播放
        }
      }, 1000);
    }
  },
  mounted() {
    this.init('http://192.168.31.223:11935/live/movie');
  }
};
</script>

<style scoped>
.player {
  background-color: black;
  height: 100%;
  border: 1px solid grey;
  color: white;
  text-align: center;
}
.selected {
  background-color: black;
  height: 100%;
  border: 2px solid green;
  color: white;
  text-align: center;
}

.cell-player-1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>