HTML的JavaScript - Chrome和Safari/Firefox的

我正在开发一个HTML网站与一个JavaScript脚本控制嵌入的YouTube视频之间的不同工作div元素。HTML的JavaScript - Chrome和Safari/Firefox的

我有三部影片，他们都工作正常，在Chrome，但不是在Safari和Firefox。

最奇怪的是，我已经嵌入他们以同样的方式，无论是在Safari和Firefox，第一视频为工作正常，但在其他两个开始播放，你只能听到声音。

可点击这里查看网站：全屏幕上 https://matteo-stable-web-server.herokuapp.com/

从桌面上，如果你点击你首先看到的视频播放权的底部的箭头。如果再次点击，您会在Chrome上看到第二个视频，但您只能在Safari和Firefox上听到音频。

在考察我注意到，由YouTube API的div元素内部产生的IFRAME元素与尺寸略有不同的页面。它看起来像是在播放视频，但它在其他地方。但这只是我的感觉（见下图）。

Inspection Comparison - Working vs Not working

这是HTML（类= “firstVideo” 就是我们正在寻找）

<body > 
     <nav role="navigation"> 
      <div id="menuToggle"> 

       <input type="checkbox" /> 

       <span></span> 
       <span></span> 
       <span></span> 

       <ul id="menu"> 
        <a href="./index.html"><li>Home</li></a> 
        <a href="#"><li>Come funziona</li></a> 
        <a href="./faq.html"><li>FAQ</li></a> 
        <a href="./blog.html"><li>Blog</li></a> 
        <a href="#"><li>Contatti</li></a> 
        <a href="./pdf/RegolamentoFlav.pdf" target="_blank"><li>Regolamento</li></a> 
        <a href="#"><li>Ringraziamenti</li></a> 
       </ul> 
       </ul> 
      </div> 
     </nav> 

     <div id="rotateRect" class="redRect rotateRectStart hideXS"></div> 



     <div id="nav"> 
      <div id="leftArrow"><img src="img/arrow_right.png" alt="flav website controls"></div> 
      <div id="rightArrow"><img src="img/arrow_right.png" alt="flav website controls"></div> 
     </div> 
     <div class="containerTop"> 
     <div id="backImg"> 
      <div class="landscapeImg"></div> 
      <div class="firstImg"></div> 
     </div> 

     <div id="leftContainer"> 
      <div class="splashLeft"> 
       <img class="logoHome" src="img/logo_flav.svg" alt="flav app"><br> 
       <h5>Ciò che vuoi, dove vuoi, quando vuoi.</h5> 
       <h1>Richiedi, Offri…<br>GUADAGNA!</h1> 
       <h2>CON FLAV ESSERE DISPONIBILI RIPAGA. SEMPRE.</h2> 
       <a href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a> 
       <a href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a> 
       <br><br> 
       <h6>CONTACT & FOLLOW US ON:</h6> 
       <a href="https://www.facebook.com/app.FLAV.it/"><img class="socialIcon" src="img/facebook.png" alt="flav facebook fanpage"></a> 
       <a href="https://www.instagram.com/flav.it/"><img class="socialIcon" src="img/instagram.png" alt="flav instagram fanpage"></a> 
       <a href="https://www.youtube.com/channel/UC5MeGaeI9boibIcUq0X4FXg"><img class="socialIcon" src="img/youtube.png" alt="flav youtube channel"></a> 
       <a href="mailto:[email protected]?Subject=Information"><img class="socialIcon" src="img/mail.png" alt="flav mail"></a> 
      </div> 
     </div> 

     <div id="rightContainer"> 
      <img class="iphoneSplash" src="img/iphoneSplash.png" alt="flav, ciò che vuoi quando vuoi dove vuoi"> 
     </div> 

     <div id="firstLeftPart"> 
      <img class="redLogo hideXS" src="img/logoRed.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br> 
      <div class="numberSect01">N° <span class="bigNum">01</span></div> 
      <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>Fai la tua richiesta</h2> 
      <br> 
      <span class="subTitle">Chiedi ciò di cui hai bisogno.</span><br> 
      <p> 
       Ti serve qualcosa o hai bisogno di una mano?<br>Pubblica la tua richiesta scegliendo tra beni e servizi, seleziona la categoria, stabilisci luogo e ora.<br>Ricevi le risposte di utenti e professionisti direttamente nella App <br>e scegli l’utente che fa per te con l’offerta più conveniente.<br><br>Trovare ciò di cui hai bisogno non è mai stato cosi facile!<br><span class="downloadIt">Scarica FLAV!</span><br>  
      </p> 

     </div> 

     <div id="iphoneFirst"> 
      <img class="whiteIphone" src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi"> 
      <div class="firstVideo" id="videoNumberOne"></div> 
      <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a> 
      <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a> 
     </div> 

     <div id="secondRightPart"> 
      <img class="redLogo hideXS" src="img/logo_flav.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br> 
      <div class="numberSect01">N° <span class="bigNum">02</span></div> 
      <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>FAI IL TUO PREZZO</h2> 
      <br> 
      <span class="subTitle">Renditi disponibile.</span><br> 
      <p> 
       Vuoi rispondere a una richiesta? <br><br>Consulta le richieste della community.<br>Apri la mappa, scopri di cosa hanno bisogno le persone intorno a te<br>e fai il tuo prezzo.<br><br>Guadagnare non è mai stato cosi semplice!<br><span class="downloadIt">Scarica FLAV!</span><br>   
      </p> 

     </div> 

     <div id="iphoneSecond"> 
      <img class="whiteIphone" src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi"> 
       <div class="firstVideo" id="videoNumberTwo"></div> 
      <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a> 
      <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a> 
     </div> 

     <div id="thirdLeftPart"> 
      <img class="redLogo hideXS" src="img/logoRed.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br> 
      <div class="numberSect01">N° <span class="bigNum">03</span></div> 
      <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>FAI LA TUA OFFERTA</h2> 
      <br> 
      <span class="subTitle">Vendi, offri e guadagna.</span><br> 
      <p> 
       Vuoi vendere qualcosa? Vuoi incrementare la tua visibilità e i tuoi guadagni? <br><br>Pubblica la tua offerta di beni o servizi,<br> ricevi le risposte degli utenti e concorda ogni dettaglio in chat.<br> In modo facile e gratuito.<br>La chiave del successo è essere ovunque!<br><span class="downloadIt">Scarica FLAV!</span><br>  
      </p> 

     </div> 

     <div id="iphoneThird"> 
      <img class="whiteIphone" src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi"> 
      <div class="firstVideo" id="videoNumberThree"></div> 
      </video> 
      <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a> 
      <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a> 

     </div> 

     <div class="hideXL"> 
      <a href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a> 
      <a href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a> 
      <br><br> 
      <h6>CONTACT & FOLLOW US ON:</h6> 
      <a href="https://www.facebook.com/app.FLAV.it/"><img class="socialIcon" src="img/facebook.png" alt="flav facebook fanpage"></a> 
      <a href="https://www.instagram.com/flav.it/"><img class="socialIcon" src="img/instagram.png" alt="flav instagram fanpage"></a> 
      <a href="https://www.youtube.com/channel/UC5MeGaeI9boibIcUq0X4FXg"><img class="socialIcon" src="img/youtube.png" alt="flav youtube channel"></a> 
      <a href="mailto:[email protected]?Subject=Information"><img class="socialIcon" src="img/mail.png" alt="flav mail"></a> 
     </div> 
     </div> 



     <script src="js/jquery-1.12.0.min.js"></script> 
     <script src="js/base.js"></script> 
    </body>

这是JavaScript

var countSlide = 0; 

//YOUTUBE START 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player1; 
var player2; 
var player3; 

function onYouTubeIframeAPIReady() { 
    player1 = new YT.Player('videoNumberOne', { 
     videoId: 'Kifn_WVGReM', 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 

    player2 = new YT.Player('videoNumberTwo', { 
     videoId: 'wa7aa5-GxW8', 
     events: { 
     'onReady': onPlayerReady 
     } 
    }); 

    player3 = new YT.Player('videoNumberThree', { 
     videoId: 'YCIOKI0ZSTM', 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
} 

function onPlayerReady(event) { 
    event.target.setVolume(50); 
    //event.target.pauseVideo(); 
} 

//YOUTUBE END 

// $(document).ready(function() {  

// }); 

function pauseAndReset(video) { 
    video.pauseVideo(); 
    video.seekTo(0); 
} 

//SLIDE ROUTINE 

$("#rightArrow").click(function(){ 
    if (countSlide < 3) { 
     countSlide++; 
    } 

    if (countSlide == 1){ 
     toBottom(); 

     player1.playVideo(); 
    } 
    else if (countSlide == 2) { 
     toTop(); 

     pauseAndReset(player1); 
     player2.playVideo(); 
    } 
    else if (countSlide == 3) { 
     setTimeout(toSndBottom,25); 
     setTimeout(toTop,50); 
     setTimeout(toSndBottom,70); 

     pauseAndReset(player2); 
     player3.playVideo(); 
    } 
    else if (countSlide >= 3) { 
     //Go Back to Homepage 
    }  
}); 

$("#leftArrow").click(function(){ 
    if (countSlide > 0) { 
     countSlide--; 
    } 

    if (countSlide == 0){ 
     toStart(); 
     pauseAndReset(player1); 
    } 
    else if (countSlide == 1) { 
     toBottom(); 
     pauseAndReset(player2); 
     player1.playVideo(); 
    } 
    else if (countSlide == 2) { 
     toSndTop(); 
     pauseAndReset(player3); 
     player2.playVideo(); 
    } 
}); 
//SLIDE ROUTINE ENDS 

$(".redLogo").click(function(){ 
    toStart(); 
    countSlide = 0; 

    $("#firstLeftPart").css("marginLeft", "-105%"); 
    $("#iphoneFirst").css("marginLeft", "152%"); 

    $("#secondRightPart").css("marginLeft", "-105%"); 
    $("#iphoneSecond").css("marginLeft", "152%"); 

    $("#thirdLeftPart").css("marginLeft", "-105%"); 
    $("#iphoneThird").css("marginLeft", "152%"); 
}); 



function toStart() { 
    $("#rotateRect").addClass('rotateRectStart'); 
    $("#rotateRect").removeClass('rotateRectBottom'); 
    $("#rotateRect").removeClass('rotateRectTop'); 
    $(".iphoneSplash").css("marginLeft", "0%"); 
    $(".splashLeft").css("marginLeft", "0%"); 
    $(".landscapeImg").fadeIn('fast'); 
    $(".firstImg").fadeOut('slow'); 

    $("#firstLeftPart").css("marginLeft", "-105%"); 
    $("#iphoneFirst").css("marginLeft", "152%"); 

} 

function toTop() { 
    $("#rotateRect").removeClass('rotateRectStart'); 
    $("#rotateRect").removeClass('rotateRectBottom');  

    $("#rotateRect").addClass('rotateRectTop'); 

    $("#firstLeftPart").css("marginLeft", "-105%"); 
    $("#iphoneFirst").css("marginLeft", "152%"); 

    $("#secondRightPart").css("marginLeft", "5%"); 
    $("#iphoneSecond").css("marginLeft", "52%"); 
} 

function toBottom() { 
    $("#rotateRect").removeClass('rotateRectStart'); 
    $("#rotateRect").removeClass('rotateRectTop'); 
    $("#rotateRect").addClass('rotateRectBottom'); 

    $(".iphoneSplash").css("marginLeft", "200%");  
    $(".splashLeft").css("marginLeft", "-200%"); 

    $(".landscapeImg").fadeOut('fast'); 
    $(".firstImg").fadeIn('slow'); 

    $("#firstLeftPart").css("marginLeft", "5%"); 
    $("#iphoneFirst").css("marginLeft", "52%"); 

    $("#secondRightPart").css("marginLeft", "-105%"); 
    $("#iphoneSecond").css("marginLeft", "152%"); 
} 

function toSndBottom() { 

    $("#rotateRect").removeClass('rotateRectTop'); 
    $("#rotateRect").addClass('rotateRectBottom'); 

    $("#thirdLeftPart").css("marginLeft", "5%"); 
    $("#iphoneThird").css("marginLeft", "52%"); 

    $("#secondRightPart").css("marginLeft", "-105%"); 
    $("#iphoneSecond").css("marginLeft", "152%"); 
} 

function toSndTop() { 
    $("#rotateRect").removeClass('rotateRectBottom');  
    $("#rotateRect").addClass('rotateRectTop'); 

    $("#secondRightPart").css("marginLeft", "5%"); 
    $("#iphoneSecond").css("marginLeft", "52%"); 

    $("#thirdLeftPart").css("marginLeft", "-105%"); 
    $("#iphoneThird").css("marginLeft", "152%"); 
}

我很失去了对这个一。谢谢大家提前！干杯！

来源

2016-09-01 Matteo Michele Bianchini

如果你设置样式'左：0;顶部：视频2和视频3的iframe 521px' - 没关系... –

感谢您的帮助。这真是一个定位问题！如果我将iframe移动到Safari上的正确位置，它将在Chrome上脱离位置......你认为我能处理这个问题吗？这种差异来自哪里？谢谢！ –

Firefox曾经有这个美妙的“3d视图”的页面，所以你可以看到究竟是哪里 - 不幸的是，他们在几个版本前摆脱它 - 这只是一个猜测，但我认为这是你的方式使用边距将div“移开”，这可能会让firefox/safari混淆（或者他们有不同的布局算法） - CSS的问题在于，有些内容可能会被不同的浏览器以不同的方式解释，他们都认为它们是正确的！！虽然，我以为只是发生在网景VS IE天 –

这是问题所在。

Firefox曾经拥有这个美妙的页面的“3d视图”，所以你可以清楚地看到哪里在哪里 - 不幸的是，他们在几个版本之前摆脱了它 - 这只是一个猜测，但我认为这是方式你使用边距来将div“移开”，这可能会让firefox/safari混淆（或者它们有不同的布局算法） - CSS的问题是，有些东西可以被不同的浏览器以不同的方式解释。都认为他们是正确的！虽然，我以为只有发生在Netscape的IE VS天

来源

2016-09-16 15:05:07

HTML的JavaScript - Chrome和Safari/Firefox的

回答

相关问题