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，就可以啦。