Youtube API - onclick播放視頻 - 跨瀏覽器

我使用此腳本在點擊按鈕時淡入並自動播放YouTube視頻，並在視頻播放結束後自動淡出（加上它也應從頂部滾動90px）。該腳本在Safari和Chrome中完美工作，但是在Firefox 3.6中，它會在視頻中淡入淡出，但不會自動播放 - 用戶必須單擊播放器上的播放按鈕，並且由於某種原因，scrollTop不起作用。而在Internet Explorer 8中，與Firefox中的問題相同，但播放完成後視頻甚至不會淡出。Youtube API - onclick播放視頻 - 跨瀏覽器

任何想法請問可能是什麼問題，我該如何解決它？非常感謝，任何幫助，非常感謝。

 <script src="http://www.youtube.com/player_api"></script> 
     <script> 
      // create youtube player 
      var player; 
      function onYouTubePlayerAPIReady() { 
       player = new YT.Player('vid', { 
        height: '539', 
        width: '958', 
        videoId: 'wgDQoA7cqsQ', 
        events: { 
         'onStateChange': onPlayerStateChange 
         } 
       }); 
      } 
      // when video ends 
      function onPlayerStateChange(event) {   
       if(event.data === 0) {    
        $("#vid").fadeOut(500); 
       } 
      } 
      function startVideo() { 
       $("#vid").fadeIn(2000); 
       player.playVideo(); 
       $("html, body").animate({ scrollTop: 90 }, 600); return false; 
      }; 
     </script>

來源

2013-07-02 user1207524

JSfiddle會很好 – Muath

嘗試用這種包裝你的腳本，如果尚未：

$(document).ready(function() { 
    //Script 
});

它救了我一些奇怪的行爲！

來源

2013-07-02 20:49:16

我剛剛按照你的建議試過了，但現在完全沒有任何反應:)看起來很奇怪...... $（document）.ready應該不會造成麻煩...... – user1207524

我認爲在某些瀏覽器中，視頻播放器尚未準備好再現視頻，但您可以附加一個事件以瞭解api何時準備播放視頻（onReady事件），這是通過將事件添加到構造函數。然後，當建設者告訴你，你準備好了，你可以重現你的視頻。關於滾動問題，視頻播放器可能尚未初始化，所以沒有playVideo功能，這就是爲什麼動畫不能向上滾動，因爲你的代碼中斷了。

我也注意到一些瀏覽器，顯示器：none屬性的容器表現不太好，爲了解決這個問題我隱藏了容器，使用width和height = 1px，然後當我想要看到視頻，我改變了尺寸。

下面是一個例子：

var player = new YT.Player(containerId, { 
    height: 'auto', 
    width: 'auto', 
    suggestedQuality:"hd720", 
    "videoId":"ejWGThDRllE", 
    playerVars: { 'autoplay': 0, 'controls': 1,'autohide':1,rel:0,hd:1 }, 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
}); 
container = document.getElementById(containerId); 
container.style.width = "1px"; 
container.style.height = "1px"; 

onPlayerReady(event){ 
    player.playVideo(); 
    var playerr = document.getElementById(self.containerId); 
    playerr.style.display = "block"; 
    playerr.style.width = "100%"; 
    playerr.style.height = "100%"; 
}

希望它幫助。

來源

2013-07-21 05:36:17 alfredoo

Youtube API - onclick播放視頻 - 跨瀏覽器

回答

相關問題