关于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>