Youtube API-点击播放视频-跨浏览器

Youtube API - onclick play video - cross browser

本文关键字：浏览器 视频 播放 API- Youtube      更新时间：2023-09-26

我使用这个脚本在点击按钮时淡出和自动播放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>

我认为在一些浏览器中，视频播放器还没有准备好再现视频，但你可以附加一个事件来知道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%";
}

希望能有所帮助。

如果还没有完成，请尝试用以下内容包装脚本：

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

它把我从一些奇怪的行为中救了出来！

相关文章：