<template>
  <div class="home">
    <div class="example-title">flv.js 播放 flv 视频流</div>
    <video id="videoElement" controls width="80%"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js/dist/flv.min.js';
import Hls from 'hls.js';

export default {
  name: 'PlayVideo',
  props: {
    src: {
      type: String,
      default:
        // 'https://hdl.qys.pub/live/161167_1.flv?sign=8405811e6dfc304c8ea41bfaadaa1a2d&t=6441f71d',
        'https://hls-test.shqianhan.com/live/4104_5/playlist.m3u8?sign=18117a20cfd6acec860dd264dc988dd1&t=64420dd3'
    }
  },
  data() {
    return {};
  },
  mounted() {
    console.log('flvjs:', flvjs);
    const flvSrc = this.src;
    const videoElement = document.getElementById('videoElement');
    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: flvSrc
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
    } else {
      alert('不支持的浏览器类型');
    }

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(flvSrc);
      hls.attachMedia(videoElement);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    }
  },
  methods: {}
};
</script>

<style>
.home {
  text-align: center;
}
</style>