video.js解决动态加载m3u8格式视频的url，视频加载失败的问题

话不多说，直接上代码

下载viedo.js及相关插件

cnpm install  video.js --save
ccnp  install videojs-contrib-hls --save

 

main.js

import Video from 'video.js'
import hls from 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

 

在你要放视频的组件中引入

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

 

下面是html结构代码，具体属性可以根据自己情况定义

<div id="videobox">
      <video id="myVideo"
             class="video-js vjs-default-skin vjs-big-play-centered video-player"
             poster="封面路径"
             controls
             muted
             width="300px"
             height="200px"
             preload="auto"
             data-setup="{}">
        <source :src="url" type="application/x-mpegURL">
      </video>
    </div>

data中定义数据  url：‘’

 

video.js配置项---在mounted中定义

 videojs('myVideo', {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: true,
      errorDisplay: false
    }, function () {
      this.play()
    })

 

在接口正常赋值url地址

写法一：

async getCamera () {
  const { data } = await this.$http.get('/接口', { 参数} })
  this.url = data.url // 你的视频url地址
  this.payerVideo()
},

payerVideo () {
      var player = videojs('myVideo')
      player.src(this.url)
      player.play()
    },

写法二：

async getCamera () {
  const { data } = await this.$http.get('/接口', { 参数} })
  this.url = data.url // 你的视频地址
  this.payerVideo()

  var player = videojs('myVideo') player.src(this.url) player.play(）

},

这时候一个页面的视频基本就可以正常显示了，但是当你两个页面都有视频，进行页面切换时，视频就不能正常加载显示了
这时候由于实现videoJS的视频切换，不能直接切换地址，而是需要在点击切换的时候销毁原来的videoJS，然后在重新加载渲染一个video，对url赋值

changeVideo () {
      var player = videojs('myVideo')
      player.pause()
      player.dispose()
      document.getElementById('videobox').innerHTML = ''
      var str2 = `<video id="myVideo"  class="video-js vjs-default-skin vjs-big-play-centered video-player"
             poster="../assets/images/login-bg.jpg"
             controls
             autoplay="autoplay"
             muted
             preload="auto"
             data-setup="{}">
        <source id="source" src="${this.url}" type="application/x-mpegURL"> // 重新加载videojs，并赋值url
    </video>`
      document.getElementById('videobox').innerHTML = str2

      videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false
      }, function () {
        this.play()
      })
    }

然后在切换页面时调用以上js，就可以啦。