html5视频自动轮播,html5的vedio循环轮播视频和图片,

var notices = null;

var imgsAndVideos = null;

var words = null;

$(function () {

// 查询屏幕数据

let dataUrl = dataPath + "/content/screen";

$.ajax({

type: "GET",

contentType: "application/x-www-form-urlencoded;charset=UTF-8",

url: dataUrl,

data: 'json',

success: function (result) {

console.log(result.data);

startInterval(result.data);

},

//请求失败，包含具体的错误信息

error: function (e) {

console.log(e.status);

console.log(e.responseText);

console.log("查询搜索热度出错了");

}

});

});

function startInterval(data) {

notices = data.notices;

words = data.words;

imgsAndVideos = data.videosAndPictures;

$('#notice').html(notices[0]);

$('#words').html(words[0]);

handleImgVideoUrl(imgsAndVideos);

}

function handleImgVideoUrl(imgsAndVideos) {

// 设置图片和视频播放

// let iavSize = imgsAndVideos.length;

var vList=[];

// var vList = ['0:https://www.runoob.com/try/demo_source/movie.mp4','1:http://www.runoo.png']; // 播放列表

for (let index = 0; index < imgsAndVideos.length; index++) {

vList.push(imgsAndVideos[index]);

}

var myvideo = document.getElementById("videoView");

var vLen = vList.length;

if (vList[curr].indexOf('0:') >= 0) {

$("#imgView").hide();

$("#videoView").show();

// myvideo.src = vList[curr];

let url = vList[curr].replace('0:', '');

$('#videoView').attr('src', url);

// myvideo.muted=true;

myvideo.load();

myvideo.play();

// curr++;

}else{

let url = vList[curr].replace('1:', '');

$("#videoView").hide();

$("#imgView").show();

$("#imgView").attr("src", url);

curr++;

if (curr >= vLen) {

curr = 0; //重新循环播放

}

// console.log("当前图片地址：1" );

setTimeout(function () {

console.log("当前图片地址：2" );

handleImgVideoUrl(imgsAndVideos);

}, 3000);

}

//视频播放完执行的方法

myvideo.onended = function () {

if (vList[curr].indexOf('0:') >= 0) {

$("#imgView").hide();

$("#videoView").show();

// myvideo.src = vList[curr];

let url = vList[curr].replace('0:', '');

$('#videoView').attr('src', url);

// myvideo.muted=true;

myvideo.load();

myvideo.play();

curr++;

if (curr >= vLen) {

curr = 0; //重新循环播放

}

handleImgVideoUrl(imgsAndVideos);

} else {

// 图片

// let imgUrl = prefixUrl.substring(2);

let url = vList[curr].replace('1:', '');

$("#videoView").hide();

$("#imgView").show();

$("#imgView").attr("src", url);

//$('#videoView').get(0).pause();

console.log("当前图片地址：" + url);

curr++;

if (curr >= vLen) {

curr = 0; //重新循环播放

}

setTimeout(function () {

handleImgVideoUrl(imgsAndVideos);

}, 3000);

}

};

}