1

我正在使用此脚本在单击按钮时淡入和自动播放 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>
4

2 回答 2

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%";
}

希望能帮助到你。

于 2013-07-21T05:36:17.400 回答
0

如果尚未完成，请尝试使用此包装您的脚本：

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

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

于 2013-07-02T20:49:16.797 回答