多個視頻解決問題

因為是從后臺獲取不同視頻數據，要更改playerOptions里面的url，所以一個playerOptions對象沒法解決，解決方法：

1. 把playerOptions對象變成空數組

2. 從后臺獲取到的數據放在videolist數組里，如下

3. 循環遍歷videolist數組，并定義一個arrs來保存視頻播放參數

4. 添加到playerOptions數組里面

5. v-for循環遍歷數組，把index索引值也傳出來，在video-player標簽里要用

大功告成！！！

代碼如下：

• 標題：{{ item.title }}

  上傳時間：{{ item.time }}

  class="video-player vjs-custom-skin"

  ref="videoPlayer"

  :playsinline="true"

  :options="playerOptions[index]"

  @play="onPlayerPlay($event,index)"

  @pause="onPlayerPause($event)"

  >

for (var i = 0; i < this.videolist.length; i++) {

let arrs = {

playbackRates: [1.0, 2.0, 3.0], //播放速度

autoplay: false, //如果true,瀏覽器準備好時開始回放。

muted: false, // 默認情況下將會消除任何音頻。

loop: false, // 導致視頻一結束就重新開始。

preload: "auto", // 建議瀏覽器在加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持)

language: "zh-CN",

aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3")

fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。

sources: [

{

type: "video/mp4",

type: "video/ogg",

src: this.videolist[i].movie //url地址

}

],

poster: "", //封面地址

notSupportedMessage: "此視頻暫無法播放，請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。

controlBar: {

timeDivider: true,

durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: true //全屏按鈕

}

};

this.playerOptions.push(arrs);

}

視頻可以同時播放的問題

可能你們發現了在寫 @play="onPlayerPlay($event,index)"時傳了一個index屬性，這個就是解決同時播放問題的關鍵。當你們看vue-video-player函數事件的時候，有一個this.$refs.videoPlayer.player.pause()方法就是用來暫停的，當你點擊播放的時候會調用 onPlayerPlay，循環遍歷 i 不為傳過來的index值即可。

終于解決了！！！

總結

以上是生活随笔為你收集整理的video怎么重新加载 vue_vue.js中vue-video-player中的怎么插入多个视频，视频可以同时播放的问题及解决办法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。