VideoJS視頻數量和源切換導致視頻加載失敗的問題

使用VideoJS的基本方法暫時不詳細說明，有很多大佬已經有很詳細的使用方法，本文旨在說明視頻切換時無妨正常渲染的問題。

 

首先我的項目是視頻頁面不切換，根據左側的樹節點切換而顯示對應節點的視頻。之前找的資料都是說使用dispose()方法，但是我每次使用這個方法之后頁面就無法使用VideoJS的插件了，視頻渲染錯誤如下：

 

如果不進行dispose()操作，則在切換節點時，頁面報錯已經存在相同的player實例。

 

解決方法：

在每次實例player的時候，使用不同的id。我使用的是和時間掛鈎的id，接口中新增了一個參數。這樣切換的時候視頻就不會報錯了。

提示，每次節點切換的時候要清空playerlist，同時初始化下空的數據。

 

效果圖如下：

 

 

 

 

 

 

 

附具體的代碼：

html部分：

<div class="disassemblyVideo-content-video-screen">
          <video :id="'myVideo'+item.id" class="video-js vjs-big-play-centered" ref="videoRef">
            <source :src="urlPrefix+item.videoSource" type="video/mp4" />
          </video>
        </div>

js部分：

watch: {
    // 監聽點擊的節點數據
    BOMTreeParams: {
      handler (newValue) {
        this.videoLoading = true
        this.parentNode = newValue.iPartNumber
        this.playlist.forEach(player => {
          player.pause()
        })
        this.playlist = []
        this.videoList = []
        this.getVideo()
      },
      // 深度監聽
      deep: true,
      immediate: true
    },
    // 監聽視頻源數據的變化
    videoList: function () {
      this.$nextTick(function () {
        console.log('videoList change', this.videoList)
        this.initVideo()
      })
    }
  },
  // destroyed () {
  //   this.$refs.videoRef.dispose()
  // },

  methods: {
    // 初始化播放器
    initVideo () {
      // this.disposePlayer()
      // 初始化視頻方法 循環列表獲取每個視頻的id
      this.videoList.map((item, i) => {
        //   let flag = true
        //   this.playlist.forEach(player => {
        //     if ('myVideo' + item.itemId === player.id_) {
        //       console.log(player.id_)
        //       flag = false
        //     }
        //   })
        //   if (flag) {
        let myPlayer = this.$video('myVideo' + item.id, {
          // 確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
          controls: true,
          // 自動播放屬性,muted:靜音播放
          // autoplay: 'muted',
          // 建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
          preload: 'auto',
          // 設置視頻播放器的顯示寬度（以像素為單位）
          width: '273',
          // 設置視頻播放器的顯示高度（以像素為單位）
          height: '163',
          // 封面圖
          poster: item.pic,
          controlBar: {
            // 自定義按鈕的位置
            children: [
              {
                name: 'playToggle'
              },
              {
                name: 'progressControl'
              },
              {
                name: 'currentTimeDisplay'
              },
              {
                name: 'timeDivider'
              },
              {
                name: 'durationDisplay'
              },

              {
                name: 'volumePanel', // 音量調整方式橫線條變為豎線條
                inline: false
              },
              {
                name: 'pictureInPictureToggle' // 畫中畫播放模式
              },
              {
                name: 'fullscreenToggle'
              }
            ]
          }
        })
        this.playlist.push(myPlayer)
        // }
      })
      // console.log(this.playlist)
    },
    // 獲取視頻
    getVideo () {
      // this.$loading({
      //   text: '正在加載中...'
      // })

      // let getParams = {
      //   iPartNumber: this.parentNode
      // }
      let formData = new FormData()
      formData.append('iPartNumber', this.parentNode)
      this.$api.dataNavigation.loadVideo(formData)
        .then(res => {
          this.videoLoading = false
          // this.$loading().close()// 關閉按鈕轉圈
          // console.log(res)
          if (res.data.code === 10001) {
            this.videoList = res.data.data.result
          }
        })
    }
}