MP4 and JPG slideshow problem

Hi.

I want to make an HTML5 slideshow.
But I have a problem, a black frame appears between the slides.
For about 1 second.
How do I deal with this ??

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SCG</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<style>
html, body {
margin:0;
padding:0;
border:0;
width: 100%;
height: 100%;
}
</style>
<script type="text/html" id="blockBoard">[{"campaign_id":1198,"campaign_name":1198,"dur":5,"href":"bk-nn-venecia-s-2102-po-010363-p1fcw71xmgefx7cozn-av6smu4t5zili.mp4","mime":"video\/mp4","date_time":1551192997},{"campaign_id":1166,"campaign_name":1166,"dur":5,"href":"cernysihinskie-kolbasy-s-2102-clrtfbto6pfnjkpxljy10f9bclmauk4.jpg","mime":"image\/jpeg","date_time":1551193002},{"campaign_id":1114,"campaign_name":1114,"dur":5,"href":"bcr-kia-strelka-napravo-in6o5vm645ms7bzaqmmnpnq36wxlaqb.jpg","mime":"image\/jpeg","date_time":1551193007},{"campaign_id":1125,"campaign_name":1125,"dur":5,"href":"sitilink-bonus-bos-s-1202-xgw46t5f0-wsgdegbi9joqdtoxomv-ud.jpg","mime":"image\/jpeg","date_time":1551193012}]</script>

<script>
var data = $.parseJSON($('#blockBoard').text());
var creatives = [];
var timerId;
var timerPlay;
$(function() {
slideshow.data = data;
slideshow.getCreatives();
});

var slideshow = {
index: 0,
playSec: 0,
urlFolderFile: 'http://st.de4.ru/static/content/xmykYzT1yzRac9Pj',
getCreatives: function(){
for (var ff1 = 0; ff1 < data.length; ff1++) {
if(!creatives[data[ff1].href]){
creatives[data[ff1].href] = data[ff1];
}

}
slideshow.getslide();
},
getslide: function(){
clearTimeout(timerId);
slideshow.playSec = 0;
this.start(data[this.index].dur);
var creat = $('body').children();
if(this.index > data.length){
this.index = 0;
}

if( data[this.index].mime != 'image/jpeg'){
$('#vid1').attr('src', this.urlFolderFile+'/'+data[this.index].href );
$('#img1').hide();
}else{
$('#img1').attr('poster', this.urlFolderFile+'/'+data[this.index].href );
$('#img1').show();
}
this.index++;
},
start: function (dur){
clearTimeout(timerPlay);
timerPlay = setInterval(function () {
slideshow.getslide();
}, dur*1000);
},
}
function playVid(id) {
var vid = document.getElementById(id);
vid.currentTime = 0;
vid.play();
}

</script>
</head>
<body>
<video id="vid1" style="" width="100%" height="100%" src="" autoplay muted="muted"><source src="" type="video/mp4" hwz="on"></video>
<video id="img1" poster="" style="position:absolute; z-index:200; top:0; left: 0" width="100%" height="100%" src="" autoplay muted="muted"><source src="" type="video/mp4"></video>
</body>
</html>

MP4 and JPG slideshow problem

1 comment