Youtube API - onclick 播放视频 - 跨浏览器

Question

我正在使用此脚本在单击按钮时淡入和自动播放 YouTube 视频，并在视频播放完毕时自动淡出（此外，它还应该从顶部滚动 90 像素）。该脚本在 Safari 和 Chrome 中完美运行，但在 Firefox 3.6 中它会在视频中淡出但不会自动播放 - 用户必须单击播放器上的播放按钮，并且 scrollTop 由于某种原因无法正常工作。并且在 Internet Explorer 8 中与 Firefox 中的问题相同，但视频播放完毕后甚至不会淡出。

请知道可能是什么问题，我该如何解决？非常感谢，非常感谢任何帮助。

        <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>

Answer 1

我认为在某些浏览器中，视频播放器还没有准备好重现视频，但是您可以附加一个事件以了解 api 何时准备好播放视频（onReady 事件），这是通过在构造函数。 然后，当构建器告诉您准备就绪时，您可以在那里复制您的视频。 关于滚动问题，可能是视频播放器还没有初始化，所以没有playVideo功能，这就是为什么动画没有向上滚动，因为你的代码坏了。

我还注意到一些浏览器带有 display: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%";
}

希望对你有帮助。

Answer 2

尝试用这个包装你的脚本，如果还没有完成：

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

它使我免于一些奇怪的行为！