代码运行时它不应该？

Question

我正在研究一个主要是摄影师的照片浏览器的项目。该网站以一个非常短的视频开始，该视频淡出并且内容淡入。网站的各个部分通过触发ajax功能的菜单进行访问，该功能仅加载页面的该部分。我得到的问题是，视频只能在开始播放一次，在点击菜单链接时会随机触发。我不明白这一点，因为视频已经淡出和隐藏使用JavaScript和jQuery。

下面是该网站（在建）：

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> 

任何想法，为什么视频被重新加载上的菜单链接时？谢谢。

Answer 1

问题是，您在6秒后禁用了您的视频，但您的内容在3.5秒后可见。您的网站将在6秒后实际运行，但如果您尝试在6秒之前点击链接，则会再次看到该视频，因为您已清除视频上方的内容并淡化了新内容。尝试改变这一行：

setTimeout(stopVideo, 6000); 

到也许

setTimeout(stopVideo, 3500); 

也许你需要进一步的变化，但我觉得你有什么错误