Ort nach Änderung der Sichtbarkeit aktualisieren

Question

Ich versuche eine HTML-Seite zu aktualisieren, wenn ein div sichtbar wird ... Nicht sicher, wo ich falsch liege. Die Datei divslide.js schaltet den Anzeigestil zu festgelegten Zeiten von "Keine" auf "Inline" um. Ich möchte das div mit der ID final, um die Seite zu aktualisieren, so dass sie durch jedes div zurückschleift. Hier

ist der html ...

<div id="video" class="mySlides"><video autoplay><source src="icx.mp4" 
type="video/mp4"></video></div> 
<div id="widescreen" class="mySlides"> 
<!--<div id="written"><video autoplay><source src="written.mp4" 
type="video/mp4"></video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div> 
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4"> 
</video></div>--> 
</div> 

<div id="final" class="mySlides"></div> 

Ich habe verknüpft jquery 3.1.1 und ich versuche zu verwenden ...

if($('#final').is(':visible')) 
{ 
location.reload(); 
} 

ziemlich einfach scheint, aber es funktioniert nicht.

Answer 1

Ihre Art, die Dias neu zu starten, ist ... nun ... Nüsse.

Ohne Ihre js für diesen Teil hier ist im Grunde, was Sie tun möchten.

HTML

<div id="div1" class="video"><video id="video1"><source src="tbd.mp4" type="video/mp4"> 

CSS

div { 
    height: 100px; 
    width: 300px; 
    display: none; 
} 
#div1 { 
    background-color: red; 
    display: block; 
} 
#div2 { 
    background-color: blue; 
} 
#div3 { 
    background-color: orange; 
} 
#div4 { 
    background-color: green; 
} 

jQuery

// Create an array of the video divs. 
var videos = [ 
    "div1", 
    "div2", 
    "div3", 
    "div4" 
] 
var videos = [ 
    ["div1", 4000], 
    ["div2", 6000], 
    ["div3", 11000], 
    ["div4", 5900], 
] 

// Initate a counter at 1 because you're going to show the first video by default. 
var counter = 1; 
setInterval(function(){ 
    // Hide all the video divs 
    $(".video").hide(); 
    // Show the video div based on the counter 
    $("#" + videos[counter][0]).show(); 
    // Reset the video to the beginning 
    $("#video" + [counter]).load(); 
    // Play the video 
    $("#video" + [counter]).play(); 

    //Increment the counter if there are still more divs to show, otherwise reset it to 0 
    counter == videos.length-1 ? counter = 0 : counter++; 
}, videos[counter][1]); 

JSFiddle es in Aktion zeigt: https://jsfiddle.net/nky4n2cx/