html怎么让视频自动循环播放,【前端】div 加载视频并自动循环播放

效果图

导入css文件和js文件

screen.html

00:00

/

00:00

90

indexv.js

(function($) {

var video = $("#my-video");

var loop = false;

var qieh = 1;

var videoIndex = 0;

var videoProp = 0;

var ddd = document.getElementById('video-div');

var full = false;

var timer;

var hidding = false;

var isOn = true;

var videoListLen = $('.player-list-video').length;

var videoSpeed = 1;

var videoListAll = new Array('src/video/video.mp4');//设置文件路径和文件名

var danId = 0;

var clickFlag = null;

var vedioError = null;

qiehuan();

function qiehuan(){

video[0].src = videoListAll[0];

$('.psVideo-timeBar').css('width', 0);

video[0].play();

$('.psVideo-play-btn').removeClass('psVideo-stop').addClass('psVideo-play');

$('.psVideo-play-one').hide();

}

// 读取初始时间

function timeFormat(seconds) {

var minite = Math.floor(seconds / 60);

if(minite < 10) {

minite = "0" + minite;

}

var second = Math.floor(seconds % 60);

if(second < 10) {

second = "0" + second;

}

return minite + ":" + second;

}

//更新时间进度条

function updateProgress(x){

if (!full || !hidding){

var progress = $('.psVideo-progress');

var position = x - progress.offset().left;

var percentage = 100 * position / progress.width();

if(percentage > 100) {

percentage = 100;

}

if(percentage < 0) {

percentage = 0;

}

$('.psVideo-timeBar').css('width', percentage+'%');

video[0].currentTime = video[0].duration * percentage / 100;

}

}

// 拖拽时间进度条

function enableProgressDrag() {

if (!full || !hidding){

var progressDrag = false;

$('.psVideo-progress').on('mousedown', function(e) {

progressDrag = true;

updateProgress(e.pageX);

});

$(document).on('mouseup', function(e) {

if(progressDrag) {

progressDrag = false;

updateProgress(e.pageX);

}

});

$(document).on('mousemove', function(e) {

if(progressDrag) {

updateProgress(e.pageX);

}

});

}

};

// 控制栏展示消失

function showControl(shouldShow) {

if(shouldShow) {

$('.psVideo-shade').removeClass('psVideo-shade-off').addClass('psVideo-shade-on');

$('.player-list').removeClass('player-list-off').addClass('player-list-on');

} else {

$('.psVideo-shade').removeClass('psVideo-shade-on').addClass('psVideo-shade-off');

$('.player-list').removeClass('player-list-on').addClass('player-list-o