video.js多個視頻在同一個頁面的調用問題

最近做項目，有一個需求是做視頻列表，點擊每一條列表，視頻會在右邊的播放區域播放，本人使用的是video.js插件，這個插件的API挺全的：http://www.jq22.com/jquery-info404

解決辦法：使用js動態替換視頻的src路徑

html:

<div class="build-videobox">

<video id="build-video" class="video-js vjs-big-play-centered build-video" controls preload="none" poster="images/activity/lianzheng/lianzheng.jpg"

data-setup="{}">

<source src="./videos/lift.mp4" type='video/mp4' class="build-source" />

</video>

</div>

js:

function createVideo(video) {

// 視頻的地址

var source = video.source;

// 每次點擊的時候出現播放按鈕

$(".vjs-has-started").css("display", "block");

$(".vjs-big-play-button").css("display", "block");

// 初始化video.js

var myPlayer = videojs('build-video');

// 暫停的時候出現播放按鈕

myPlayer.on("pause", function () {

$(".vjs-has-started").css("display", "block");

$(".vjs-big-play-button").css("display", "block");

});

// 視頻播放的時候隱藏播放按鈕

myPlayer.on("play", function () {

$(".vjs-big-play-button").css("display", "none");

});

$(".build-source").attr("src", source);

myPlayer.src(source); //重置video的src

myPlayer.load(source); //使video重新加載

myPlayer.play();

console.log(source);

}