Question

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

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

        <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事件），这是通过添加事件来完成的。构造函数。然后当建造者告诉你准备就绪时，你可以在那里重现你的视频。关于滚动问题，视频播放器可能尚未初始化，因此没有播放视频功能，这就是为什么动画不会向上滚动，因为你的代码会中断。

我还注意到有些浏览器表示带有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
});

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

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

2 个答案: