Youtube API - onclick play 비디오 - 크로스 브라우저

이 스크립트를 사용하면 버튼을 클릭 할 때 YouTube 비디오를 fadeIn 및 자동 재생하고 비디오 재생이 끝나면 자동으로 사라집니다 (플러스는 90px까지 스크롤해야 함) . 이 스크립트는 Safari와 Chrome에서 완벽하게 작동하지만 Firefox 3.6에서는 동영상이 사라지지만 자동으로 재생되지 않습니다. 사용자가 플레이어의 재생 버튼을 클릭해야하며 scrollTop이 어떤 이유로 작동하지 않습니다. Internet Explorer 8에서는 Firefox와 동일한 문제가 발생하지만 재생이 끝나면 비디오가 사라지지 않습니다.Youtube API - onclick play 비디오 - 크로스 브라우저

어떤 문제가 될 수 있으며 어떻게 해결할 수 있습니까? 고마워, 어떤 도움도 대단히 감사합니다. 아직 수행하지 경우

 <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

제안대로 시도했지만 지금은 아무 일도 일어나지 않았습니다. 이상하게 보입니다. $ (문서) .ready가 문제를 일으키지 않아야합니다 ... – user1207524

일부 브라우저에서는 비디오 플레이어가 비디오를 재생할 준비가되지 않았지만 API를 통해 비디오를 재생할 준비가되었는지 알 수있는 이벤트를 첨부 할 수 있습니다 (onReady 이벤트). 생성자. 빌더가 준비가되었다고 말하면 비디오를 재현 할 수 있습니다. 스크롤 문제는 비디오 플레이어가 아직 초기화되지 않았기 때문에 playVideo 함수가 없으므로 코드가 끊어져서 애니메이션이 위로 스크롤되지 않는 이유입니다.

디스플레이가있는 컨테이너 : none 속성이 잘 작동하지 않는 브라우저도 있습니다.이 문제를 해결하기 위해 너비와 높이 = 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 play 비디오 - 크로스 브라우저

답변

관련 문제