vue 使用 video.js 切換播放m3u8（二）

vue 使用 video.js 播放m3u8（一）

在第一篇文章的基礎之上，改成切換視頻地址

第一步 改成Video組件 main.js

import Video from 'video.js'
Vue.prototype.$video = Video

第二步 components/Video.vue

<template>
  <video ref="videoPlayer" class="video-js vjs-default-skin" style="width: 100%; height: 100%; object-fit: fill"></video>
</template>
<script>
import 'videojs-contrib-hls'
export default {
  data () {
    return {
      player: null,
      options: {
        autoplay: 'muted',
        controls: true,
        muted: false,
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        fullscreen: {
          options: { navigationUI: 'hide' }
        },
        hls: {
          withCredentials: true
        }
        // 若是你只有一個視頻源也能夠從這裏設置
        // sources: [
        //   {
        //     src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
        //     type: 'application/x-mpegURL'
        //   }
        // ]
      }
    }
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  }
  methods: {
    initVideo (url) {
      if (!this.player) {
        this.player = this.$video(this.$refs.videoPlayer, this.options)
      }
      this.player.src([
        {
          src: url,
          type: 'application/x-mpegURL'
        }
      ])
      this.player.play()
    }
  }
}
</script>

第三步 使用組件

<template>
  <div style="padding-top: 30px; width: 100%; height: 360px; position: relative;">
    <video-player ref="player"></video-player>
  </div>
</template>
<script>
import VideoPlayer from '@/components/Video'
export default {
  components: {
    VideoPlayer
  },
  mounted () {
    this.initVideoUrl()
  },
  methods: {
    initVideoUrl() {
      // 這裏本身改造請求的地址 我臨時用 央視的視頻源
      this.$refs.player.initVideo('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')
      
      // 模擬1分鐘以後切換視頻地址
      setTimout(() => {
        this.$refs.player.initVideo('http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8')
      }, 60 * 1000)
    }
  }
}
</script>