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

Posted 2023-02-25

【中文标题】Youtube API - onclick 播放视频 - 跨浏览器

【英文标题】：Youtube API - onclick play video - cross browser

【发布时间】：2013-07-02 20:40:11

【问题描述】：

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

【问题讨论】：

JSfiddle 会很好

【参考方案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%";

希望对你有帮助。

【参考方案2】：

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

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

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

【讨论】：

我刚刚按照您的建议尝试过，但现在绝对没有任何反应:) 看起来很奇怪...... $(document).ready 不应该造成麻烦......