关于vue.js:vue-使用-videojs-切换播放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>