Code en cours d'exécution quand il ne devrait pas?

Question

Je travaille sur un projet qui est principalement une visionneuse de photos pour un photographe. Le site commence par une très courte vidéo qui disparaît et le contenu apparaît. Les différentes sections du site sont accessibles via un menu qui déclenche une fonction ajax qui ne charge que cette partie de la page. Le problème que j'obtiens est que la vidéo, qui n'est censée jouer qu'une seule fois au début, est déclenchée au hasard en cliquant sur les liens du menu. Je ne comprends pas cela car la vidéo a été effacée et cachée en utilisant javascript et jquery.

Voici le site (en construction):

http://maxruiz-portraits.com

var random = Math.floor(Math.random() * 24) + 1; 
document.getElementById("front").src = "Images/PORTRAITS/Image" + random + ".jpg"; 

$("#content").hide(); 
$('#header').hide(); 

$(document).ready(function() { 
    counter = random; 
    // displayArrows(); 
    updateInfo(counter); 

    var vid = document.getElementById("bgvid"); 

    function stopVideo() { 
    vid.pause(); 
    $('#presentacion').delay(3000).hide(); 
    $("#bgvid").parent().hide() 
    $("#bgvid").addClass('notVisible'); 
    $('#allIntro').hide(); 
    } 

    setTimeout(stopVideo, 6000); 

    function showSite() { 
    $('#header').delay(1500).fadeIn(2000); 
    $("#content").delay(1500).fadeIn(2000); 
    } 

    showSite(); 

    $('body,html').dblclick(function(e) { 
    e.preventDefault(); 
    }); 

    $(document).on('click', 'nav a', function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    $("nav a.current").removeClass("current"); 
    $(this).addClass("current"); 
    $('#container').remove(); 
    $('#content').load(url + ' #content', function() { 
     if (url == 'http://maxruiz-portraits.com/contact11.html') { 
     $('title').text('Portraits | Contact'); 
     } else if (url == 'http://maxruiz-portraits.com/gallery2.html') { 
     $('title').text('Portraits | Gallery'); 
     } else if (url == 'http://maxruiz-portraits.com/about.html') { 
     $('title').text('Portraits | About'); 
     $('#english').hide(); 
     } else if (url == 'http://maxruiz-portraits.com/bio.html') { 
     $('title').text('Portraits | Bio'); 
     } else if (url == 'http://maxruiz-portraits.com/home.html') { 
     $('title').text('Max Ruiz | Portraits'); 
     } 
    }).hide().fadeIn('slow'); 
    }); 

    counter = random; 

    document.addEventListener('touchstart', handleTouchStart, false); 
    document.addEventListener('touchmove', handleTouchMove, false); 
    var xDown = null; 
    var yDown = null; 

    function handleTouchStart(evt) { 
    xDown = evt.touches[0].clientX; 
    yDown = evt.touches[0].clientY; 
    }; 

    function handleTouchMove(evt) { 
    if (!xDown || !yDown) { 
     return; 
    } 

    var xUp = evt.touches[0].clientX; 
    var yUp = evt.touches[0].clientY; 

    var xDiff = xDown - xUp; 
    var yDiff = yDown - yUp; 
    if (Math.abs(xDiff) + Math.abs(yDiff) > 150) { //to deal with to short swipes 
     if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/ 
     if (xDiff > 0) { /* left swipe */ 
      counter++; 
      if (counter > 24) { 
      counter = 1 
      } 

      $('#front').fadeOut(500, function() { 
      getImage(function() { 
       $('#front').fadeIn(500); 
      }); 
      }); 
     } else { /* right swipe */ 
      counter--; 
      if (counter < 1) { 
      counter = 24 
      } 

      $('#front').fadeOut(500, function() { 
      getImage(function() { 
       $('#front').fadeIn(500); 
      }); 
      }); 
     } 
     } else { 
     if (yDiff > 0) { /* up swipe */ 
      // window.location.href = '04MaxSitePortraits/index.html'; 
     } else { /* down swipe */ 
     } 
     } 
     /* reset values */ 
     xDown = null; 
     yDown = null; 
    } 
    }; 

    $(document).on('click', '.buttons', function(e) { 
    e.preventDefault(); 
    var id = e.target.id; 
    if (id == "next") { 
     counter++; 
    } else if (id == "previous") { 
     counter--; 
    } 
    if (counter < 1) { 
     counter = 24; 
    } else if (counter > 24) { 
     counter = 1 
    } 

    $('#front').fadeOut(500, function() { 
     getImage(function() { 
     $('#front').fadeIn(500); 
     }); 
    }); 

    updateInfo(counter); 
    }); 

    getImage = function(cb) { 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementById("front").src = img.src; 
     cb(); 
    }; 
    img.src = "Images/PORTRAITS/Image" + counter + ".jpg"; 

    // displayArrows(); 
    } 

    // function displayArrows() { 
    // if (counter == 1) { 
    //  $('#previous').css('display', 'none'); 
    // } 
    // else if (counter > 1 && counter < 31) { 
    //  $('#previous').css('display', 'block'); 
    //  $('#next').css('display', 'block'); 
    // } 
    // else if (counter == 31) { 
    //  $('#next').css('display', 'none'); 
    // } 
    // } 

    $(document).on('click', '.littleImages', function(e) { 
    $('#gall').removeClass("current"); 
    $('#home').addClass("current"); 

    var imageSource = $(this).attr('src'); 
    // find the not square picture from the square source 
    var n = imageSource.lastIndexOf('/'); 
    var result = imageSource.substring(n + 1); 
    var imageSourceFinal = 'Images/PORTRAITS/' + result; 

    // find the counter in order to know if it's the last or the first picture and hide corr arrow 

    counter = imageSource.match(/\d+/g); 
    $('#container').remove(); 
    $('#content').load('index.html' + ' #content', function() { 
     $('#front').attr('src', imageSourceFinal); 

     // if (counter == 1) { $('#previous').css('display', 'none');} 
     // if (counter == 31){ $('#next').css('display', 'none');} 

     // updateInfo(counter); 
     testFunction(counter[0]); 
    }).hide().fadeIn('slow'); 
    }); 

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    $("#front").on("mousedown", function() { 
     updateInfo(counter); 
     $('#front').fadeTo(300, 0.3); 
     $('#info').fadeTo(300, 1); 
     setTimeout(infoMobileOut, 1000); 
    }); 
    } else { 
    $(document).on('mouseover', '#front', function() { 
     $('#front').fadeTo(300, 0.3); 
     $('#info').fadeTo(300, 1); 
    }); 

    $(document).on('mouseout', '#front', function() { 
     $('#front').fadeTo(300, 1); 
     $('#info').fadeTo(300, 0); 
    }); 
    } 

    function infoMobileOut() { 
    $('#front').fadeTo(300, 1); 
    $('#info').fadeTo(300, 0); 
    } 

    function testFunction(number) { 
    switch (number) { 
     case "1": 
     $('#info').text('Photo 1'); 
     break; 
     case "2": 
     $('#info').text('Photo 2'); 
     break; 
     case "3": 
     $('#info').text('Photo 3'); 
     break; 
     case "4": 
     $('#info').text('Photo 4'); 
     break; 
     case "5": 
     $('#info').text('Photo 5'); 
     break; 
     case "6": 
     $('#info').text('Photo 6'); 
     break; 
     case "7": 
     $('#info').text('Photo 7'); 
     break; 
     case "8": 
     $('#info').text('Photo 8'); 
     break; 
     case "9": 
     $('#info').text('Photo 9'); 
     break; 
     case "10": 
     $('#info').text('Photo 10'); 
     break; 
     case "11": 
     $('#info').text('Photo 11'); 
     break; 
     case "12": 
     $('#info').text('Photo 12'); 
     break; 
     case "13": 
     $('#info').text('Photo 13'); 
     break; 
     case "14": 
     $('#info').text('Photo 14'); 
     break; 
     case "15": 
     $('#info').text('Photo 15'); 
     break; 
     case "16": 
     $('#info').text('Photo 16'); 
     break; 
     case "17": 
     $('#info').text('Photo 17'); 
     break; 
     case "18": 
     $('#info').text('Photo 18'); 
     break; 
     case "19": 
     $('#info').text('Photo 19'); 
     break; 
     case "20": 
     $('#info').text('Photo 20'); 
     break; 
     case "21": 
     $('#info').text('Photo 21'); 
     break; 
     case "22": 
     $('#info').text('Photo 22'); 
     break; 
     case "23": 
     $('#info').text('Photo 23'); 
     break; 
     case "24": 
     $('#info').text('Photo 24'); 
     break; 
    } 
    } 

    function updateInfo(number) { 
    switch (number) { 
     case 1: 
     $('#info').text('Photo 1'); 
     break; 
     case 2: 
     $('#info').text('Photo 2'); 
     break; 
     case 3: 
     $('#info').text('Photo 3'); 
     break; 
     case 4: 
     $('#info').text('Photo 4'); 
     break; 
     case 5: 
     $('#info').text('Photo 5'); 
     break; 
     case 6: 
     $('#info').text('Photo 6'); 
     break; 
     case 7: 
     $('#info').text('Photo 7'); 
     break; 
     case 8: 
     $('#info').text('Photo 8'); 
     break; 
     case 9: 
     $('#info').text('Photo 9'); 
     break; 
     case 10: 
     $('#info').text('Photo 10'); 
     break; 
     case 11: 
     $('#info').text('Photo 11'); 
     break; 
     case 12: 
     $('#info').text('Photo 12'); 
     break; 
     case 13: 
     $('#info').text('Photo 13'); 
     break; 
     case 14: 
     $('#info').text('Photo 14'); 
     break; 
     case 15: 
     $('#info').text('Photo 15'); 
     break; 
     case 16: 
     $('#info').text('Photo 16'); 
     break; 
     case 17: 
     $('#info').text('Photo 17'); 
     break; 
     case 18: 
     $('#info').text('Photo 18'); 
     break; 
     case 19: 
     $('#info').text('Photo 19'); 
     break; 
     case 20: 
     $('#info').text('Photo 20'); 
     break; 
     case 21: 
     $('#info').text('Photo 21'); 
     break; 
     case 22: 
     $('#info').text('Photo 22'); 
     break; 
     case 23: 
     $('#info').text('Photo 23'); 
     break; 
     case 24: 
     $('#info').text('Photo 24'); 
     break; 
    } 
    } 

    $(document).on('click', '#enButton', function() { 
    $('#english').fadeIn(); 
    $('#french').fadeOut(); 
    }); 

    $(document).on('click', '#frButton', function() { 
    $('#english').fadeOut(); 
    $('#french').fadeIn(); 
    }); 
}); 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <a href="index.html"> 
    <title>Max Ruiz | Portraits</title> 
    </a> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="mobilePad_style.css" /> 
</head> 
<body> 
    <div id="allIntro"> 
    <div> 
     <video playsinline autoplay loop id="bgvid" class="visible"> 
      <source src="Images/PORTRAITS/introportraits.mp4" type="video/mp4"> 
     </video> 
    </div> 
    <div id="presentacion"> 
     <h1>PORTRAITS</h1> 
     <h2>PHOTOGRAPHIES </br id="break">DE MAX RUIZ</h2> 
    </div> 
    </div> 
    <div id="header"> 
    <div id="title"> 
     <h1>MAX RUIZ <span id="parana">PORTRAITS</span></h1> 
    </div> 
    <div id="infoMob"> 
     <a href="info.html"><img src="Images/infoMob.png" /></a> 
    </div> 
    <nav class="cf" id="menu"> 
     <ul> 
     <li><a href="contact11.html">CONTACT</a></li> 
     <li><a href="bio.html">BIO</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="gallery2.html" id="gall">GALLERY</a></li> 
     <li><a href="index.html" id="home" class="current">HOME</a></li> 
     </ul> 
    </nav> 
    </div> 
    <section id="content"> 
    <div id="container"> 
     <div id="imagewrap"> 
     <img src="Images/PORTRAITS/Image1.jpg" id="front" class="bigImage" /> 
     <div id="info">Verde</div> 
     <div id="previous" class="buttons"></div> 
     <div id="next" class="buttons"></div> 
     </div> 
    </div> 
    </section> 

    <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
    <script type="text/javascript" src="JavaScript5.js"></script> 
</body> 
</html> 

Toutes les idées pour lesquelles la vidéo est rechargée en cliquant sur les liens de menu? Je vous remercie.

Answer 1

Votre problème est, que vous désactivez votre vidéo après 6 secondes, mais votre contenu est visible après 3,5 secondes. Votre site fonctionnera réellement au bout de 6 secondes, mais si vous essayez de cliquer sur un lien avant 6 secondes, vous verrez la vidéo une fois de plus, puisque vous avez effacé le contenu qui se trouvait au-dessus de la vidéo et s'estomper dans le nouveau contenu. Essayez de changer cette ligne:

setTimeout(stopVideo, 6000); 

à peut-être

setTimeout(stopVideo, 3500); 

vous avez besoin peut-être d'autres changements, mais je pense que vous avez eu l'idée de ce qui se passe mal