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);

}

 

 

转载于:https://www.cnblogs.com/klkitty/p/8978728.html