videojs动态加载多个视频并循环播放（原创）

Html

Css

var myVid;
var vList = [
    "http://vjs.zencdn.net/v/oceans.mp4",
    "https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4"

]; //视频集
var curr = 0; //播放第几个视频
var options = {
    "playbackRates": [0.25, 0.5, 1, 1.5, 2, 4, 8, 16]
}; //播放倍数

//静态用于演示
$(function() {
    $("#source").attr("src", vList[0]);
    myVid = videojs('e_video', options, function onPlayerReady() {
        this.play();
        this.on('ended', function() {

videojs.log('Awww...over so soon?!');
            if (curr >= vList.length) {
                curr = 0; //重新循环播放
            }

myVid.src(vList[curr]);
            myVid.load();

console.log("curr1: " + curr);
            curr++;
            console.log("curr2: " + curr);
        });
    })
    curr++;
    console.log("curr: " + curr)
})

//动态 
//$(function(){
//$.ajax({
// type:"post",
//url:"",  //获取视频url           
//dataType : "json",
//success : function (data){
//    vList = data.list; //视频集
//    curr = data.subscript; //视频下标    如果不需要播放指定视频可以忽略  curr 赋值为0即可
//   var videoUrls = vList[curr]; //从视频集中获取播放指定视频url

//  $("#source").attr("src", videoUrls);  // 赋值给video标签

// myVid = videojs('e_video', options, function onPlayerReady() {
//    this.play();
//   this.on('ended', function () {

//     videojs.log('Awww...over so soon?!');
//待所有视频播放完成后  如果不需要重第一个视频播放则注释即可
//    if(curr >= vList.length){
//        curr = 0; //重新循环播放
//   }
//   myVid.src(vList[curr]);
//   myVid.load();                        
//    curr ++; //视频下标加1
//});
//})

// curr ++;
// }
// })
//})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

videojs动态加载多个视频并循环播放（原创）

代码描述：基于video.js动态、静态播放

基于videoj.s，使用ajax异步加载多个视频，单个视频播放完成自动播放下一个，最后一个视频播放完成从第一个重新播放；

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

则规≮??Y

相关代码

videojs动态加载多个视频并循环播放（原创）

最新