<template>
  <div class="video-component">
    <video v-if="isVideo" class="video" ref="video" autoplay="autoplay" controls>
      您的浏览器不支持播放此视频。
    </video>
    <iframe v-else class="video" :src="videoSrc" frameborder="0"/>
  </div>
</template>

<script>
const {Hls} = window
export default {
  name: 'VideoComponent',
  props: {
    videoSrc: {
      type: String,
      required: true,
    }
  },
  computed: {
    isVideo() {
      return this.videoSrc && this.videoSrc.indexOf('m3u8') >= 0
    },
  },
  mounted() {
    this.$nextTick(this.play)
  },
  methods: {
    play() {
      const {video} = this.$refs
      if(Hls.isSupported()){
        const hls = new Hls()
        hls.loadSource(this.videoSrc)
        hls.attachMedia(video)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play()
        })
      } else if (video.canPlayType('application/vnd.apple.mpegurl')){
        video.src = this.videoSrc
        video.addEventListener('canplay', () => {
          video.play()
        })
      }
    },
  },
}
</script>
<style lang="stylus" scoped>
.video-component
.video
  width 100%
  height 100%
</style>
