幻灯片放映时间不同

Question

编辑：

我目前正与路易斯·帕特里斯·比塞特（Louys Patrice Besette）的合作伙伴合作，我几乎完成了将所有幻灯片放入其中。 但有时当我刷新页面时。视频变黑，无法播放。所有下一部推荐视频都会继续播放。然后一些刷新，它再次起作用。

为什么会这样？

当错误（黑色视频）发生时，我在控制台中收到此错误：index.html：1 Uncaught（在promise中）DOMException：play（）请求被pause（）调用中断。

还有一个问题。这是一种让等待装载的等待线的方法吗？ 我现在已经完成了该网站的约60-70％。但是，我注意到我的笔记本电脑必须非常非常努力才能第一次加载所有的视频和图像。

编辑结束

现在我正试图制作一种幻灯片，逐一展示图片和视频。

到目前为止我的代码看起来像这样：

HTML：

<div id="div1" class="hidden">
    <video autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>
</div>
<div id="div2" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div3" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div4" class="hidden">
    <video autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>
</div>
<div id="div5" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div6" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div7" class="hidden">
    <video autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>
</div>
<div id="div8" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div9" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>

此代码收集9＆＃34;幻灯片＆＃34;。 3个视频和7个图像。 我想在网页上逐一展示这些内容（每个都显示不同的时间）。

我是这样做的：

脚本：

<script type="text/javascript">
    //show first slide
    function showIt() {
        document.getElementById("div1").className = "shown";
    }
    setTimeout("showIt()", 0000);

    //Start fading first slide
    function hideIt() {
        document.getElementById("div1").className = "fade";
    }
    setTimeout("hideIt()", 16000);

    //Start showing 2nd slide
    function showIt2() {
        document.getElementById("div2").className = "shown";
    }
    setTimeout("showIt2()", 16500);

    //Remove the first slide
    function removeIt() {
        document.getElementById("div1").className = "hidden";
    }
    setTimeout("removeIt()", 17000);

    //Start fading second slide
    function hideIt2() {
        document.getElementById("div2").className = "fade";
    }
    setTimeout("hideIt2()", 27000);

    //Remove the second slide
    function removeIt2() {
        document.getElementById("div1").className = "hidden";
    }
    setTimeout("removeIt2()", 28000);

    //When end is reached, reload page
    setTimeout(window.location.reload.bind(window.location), 28000);
</script>

和Css：

img {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

video {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

.hidden{
    visibility: hidden;
}

.fade{
    -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 1s; /* Firefox < 16 */
        -ms-animation: fadeout 1s; /* Internet Explorer */
         -o-animation: fadeout 1s; /* Opera < 12.1 */
            animation: fadeout 1s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


.shown{
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

如您所见，我现在只显示2张幻灯片。虽然我有9个准备好了。 （总共我有40+）。如果我继续前进，我现在就去。我会得到大量的代码......

问题：

  

有没有办法让它更紧凑/更小？

     

我在互联网上搜索幻灯片并查找内容。但是我想要   设置每张幻灯片的时间。由于一些幻灯片需要   显示20秒，其他10秒。

我也做了一个小提琴，但它没有在那里工作...... https://jsfiddle.net/a10yarxj/

Answer 1

我只添加了一个带超时的函数调用。您可以直接在表格中添加幻灯片的时间。请尝试

var totalSlide =[0,2000,2000,2000,2000,2000,2000,2000,2000];
var slideStart = 0;
showIt();

function showIt() {
  setTimeout(function(){
    var idNow = document.getElementById("div"+(slideStart+1));
    idNow.className = "shown";
    
    slideStart++;
    
    setTimeout(function(){
      idNow.className = "fade";
      setTimeout(function(){idNow.className = "hidden";},500)
    	if(slideStart == totalSlide.length-1 ){
          slideStart = 0;
        }
        showIt()
    },totalSlide[slideStart])
  }, 0)
}

img {
	max-width: 78%;
	position:absolute;
	margin-left: 10.5%;
}

video {
	max-width: 78%;
	position:absolute;
	margin-left: 10.5%;
}

.hidden{
	visibility: hidden;
}

.fade{
	-webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 1s; /* Firefox < 16 */
        -ms-animation: fadeout 1s; /* Internet Explorer */
         -o-animation: fadeout 1s; /* Opera < 12.1 */
            animation: fadeout 1s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


.shown{
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="hidden">
			<video autoplay>
				<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
			</video>
		</div>
		<div id="div2" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
		<div id="div3" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
		<div id="div4" class="hidden">
			<video autoplay>
				<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
			</video>
		</div>
		<div id="div5" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
		<div id="div6" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
		<div id="div7" class="hidden">
			<video autoplay>
				<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
			</video>
		</div>
		<div id="div8" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
		<div id="div9" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>

更新

var video = $(".div7").find("video");

function playVid() {
    video .play();
}

function pauseVid() {
    video .pause();
}

Answer 2

我理解，在您的问题中，您希望完全控制幻灯片放映时间 显示时间......
而且我添加淡入/淡出时间的可能性也是不同的。

幻灯片将包含图像或视频，可能比您的时间更长...在显示其他幻灯片时继续播放声音。

我认为图像/视频顺序可能（并且会！）随着时间而改变...
并且幻灯片数量是可变的。

每次更改幻灯片显示内容时，我都会创建一个小脚本，您无需修改​​。
所有参数都在HTML中提供：

• data-timing （以秒为单位的时间）
• data-fadein （以秒为单位的时间）
• data-fadeout （以秒为单位的时间）
• data-videopause （true / false）

对于3个第一个参数，如果缺少该值，则应用默认时间并在console.log()中显示“注意”。
最后，如果它丢失，将被视为错误。

我使用了jQuery .animate()而不是CSS @keyframes，因为效果更容易实现，因为只有opacity会受到影响。

幻灯片正在循环播放......所以最后不需要新的页面加载。

在下面的代码段中，在CodePen上：

修改
我在第8到12行和第54行添加了setTimeout“错误修正” 根据以下评论，在页面刷新[F5]上可能会在DOM中保留setTimeout 为了防止这种情况，我们会在存在的情况下将其清除。

var slides = $(".slide");
var lastSlideIndex = slides.length-1;
var currentSlideIndex = 0;
var defaultTiming = 1000;
var defaultFadeInTime = 1000;
var defaultFadeOutTime = 1000;

// Prevents a setTimeout to remain in browser cache on page refresh.
if (typeof slideTimer !== 'undefined') {
  clearTimeout(slideTimer);
}
var slideTimer;

// Show slide function
function showSlide() {
    
	var thisSlide = slides.eq(currentSlideIndex);
	
	// Delays
	var timing = parseFloat(thisSlide.attr("data-timing")) * 1000;	// Transform seconds in milliseconds
	if(isNaN(timing)){timing=defaultTiming; console.log("NOTICE: ----------- data-timing is missing, using default.");}
	var fadeInTime = parseFloat(thisSlide.attr("data-fadein")) * 1000;
	if(isNaN(fadeInTime)){fadeInTime=defaultFadeInTime; console.log("NOTICE: ----------- data-fadein is missing, using default.");}
	var fadeOutTime = parseFloat(thisSlide.attr("data-fadeout")) * 1000;
	if(isNaN(fadeOutTime)){fadeOutTime=defaultFadeOutTime; console.log("NOTICE: ----------- data-fadeout is missing, using default.");}
	
    console.log("Slide: "+currentSlideIndex+":\n Display time: "+timing+" millisec.\n Fadein: "+fadeInTime+" millisec.\n Fadeout: "+fadeOutTime+" millisec.");
    thisSlide.animate({"opacity":1},fadeInTime);
    
	// If this slide contains a video
	if(slides.eq(currentSlideIndex).find("video").length > 0){
		
		// Prevents more than 1 video to play at the same time
		$("video").each(function(){
			console.log("All video paused.")
			$(this)[0].pause();
		});
		
		// Play this video from the start
		var thisVideo = slides.eq(currentSlideIndex).find("video")[0];
		thisVideo.currentTime = 0;
		console.log("Video playing.");
		thisVideo.play()
	}
	
    // Prepare for next slide
    currentSlideIndex++;
	
	// Reset to slide 0 if last was reached
    if(currentSlideIndex>lastSlideIndex){
        currentSlideIndex=0;
    }
    
    slideTimer = setTimeout(function(){
        // Fade out previous slide
		var previousSlideIndex = currentSlideIndex-1;
		
		
		// If previous was last slide
		if(previousSlideIndex == -1){
			previousSlideIndex = lastSlideIndex;
		}
		
		// If previous slide was set to pause
		if(slides.eq(previousSlideIndex).attr("data-videopause")=="true"){
			console.log("Video has been paused.");
			slides.eq(previousSlideIndex).find("video")[0].pause();
		}
		
		slides.eq(previousSlideIndex).animate({"opacity":0},fadeOutTime);
        showSlide();
    }, timing);
}

// Init
showSlide();

img {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

video {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

.slide{
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=1 data-videopause=false>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-1.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=0.5><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Fritz_von_Wille_0071.jpg" /></div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Truncated_View_of_the_Broekzijdse_Molen_on_the_Gein_by_Piet_Mondrian.jpg" /></div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=2 data-videopause=true>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-2.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=3><img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Walter_Leistikow_-_Liebesinsel_(1905).jpg" /></div>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%D0%92%D0%B5%D1%87%D0%B0%D1%80_%D0%90._%D0%93%D0%B0%D1%80%D0%B0%D1%9E%D1%81%D0%BA%D1%96.jpg" /></div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5 data-videopause=true>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-3.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=3 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Morris21.jpg" /></div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=2><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Fritz_von_Wille_0071.jpg" /></div>



<!-- ---------------------------
Copyright issues:
Images used here are labelled for reuse and videos were made by me for this example.

The Google image search I used: https://www.google.ca/search?q=paysage&espv=2&biw=1600&bih=1110&tbs=islt:svga,isz:ex,iszw:500,iszh:400&tbm=isch&source=lnt#tbs=islt:svga%2Cisz:ex%2Ciszw:500%2Ciszh:400%2Csur:fc&tbm=isch&q=landscape+-flickr&imgrc=pqMMLvfhjtbSuM%3A

 -->

Answer 3

是的，有。从纯粹的javascript角度来看，这是一个快速的解决方案，但它可以进一步改进（这可能是你的工作）：

(function() {
    var currentDivNumber = 1;
    function removeIt() {
        document.getElementById("div"+currentDivNumber).className = "hidden";
        currentDivNumber++;
        if ( currentDivNumber > maxSlides) {
            currentDivNumber=1;
        }
        setTimeout(showIt, 500);
    }

    function hideIt() {
        document.getElementById("div"+currentDivNumber).className = "fade";
        setTimeout(removeIt, 500);
    }
    function showIt() {
        document.getElementById("div"+currentDivNumber).className = "shown";
        setTimeout(hideIt, 500);
    }

    setTimeout(showIt, 16000);
})();

这不是最佳的，可以进一步改进。加上也许更好的CSS可以用来删除额外的，如果不是所有的JavaScript？

请参阅：https://jsfiddle.net/0mvpfthL/1/

Answer 4

<强>更新

  

[...]但是我想设置每张幻灯片的时间。由于某些幻灯片需要显示20秒，其他10张。

您可以使用data属性存储每张幻灯片的持续时间时间：

<div id="div1" data-duration="3500" class="hidden">
    <img src="..." />
</div>

然后（使用jQuery），您可以为每个动作（每个类切换）组合setTimeout＆＃39。使用class代替id：

var durations = 0;
var play = function(){
  var that = $(this), i = that.index(), duration = that.data('duration'), l = $('.hidden').length;
  setTimeout(function(){
    that.toggleClass('hidden shown');
    setTimeout(function(){
      that.toggleClass('shown fade');
      setTimeout(function(){
        that.toggleClass('fade hidden');
        if(i+1 === l){
          // No need to reload page. If you want to loop over again, uncomment this:
          // $('.hidden').each(play);
        }
      }, 500);
    }, duration);
  }, durations);
  durations += duration+500;
}

$('.hidden').each(play);

JSFiddle