移动设备中的 Colorbox Youtube 视频自动播放答案

【问题标题】：Colorbox Youtube Video Autoplay In Mobile Device移动设备中的 Colorbox Youtube 视频自动播放
【发布时间】：2015-05-03 11:32:25
【问题描述】：

我正在使用颜色框在点击时弹出一个 youtube 视频。因为我需要在点击时自动播放视频。我的代码在笔记本电脑上运行良好。但是它不适用于智能手机。自动播放没有发生。它需要单击视频才能播放。

我尝试了很多方法来强制播放。但我无法获得成功。我在这里的尝试是一个演示。

如果有任何解决此问题的方法来强制移动设备播放，请您帮我解决它。

提前致谢

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>

<script>        
                var tag = document.createElement('script');
                tag.src = "//www.youtube.com/player_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

                var player;
                function onYouTubePlayerAPIReady() {
                  player = new YT.Player('player1', {
                    events: {
                      'onReady': onPlayerReady
                    }
                  });
                }

                function onPlayerReady(event) {


                          player.playVideo();     
                }   

        $("document").ready(function(){

         $("#content a[href*='youtube.com']").each(function() {
            var $this = $(this);
            var href = $this.attr('href');
            var youtubeId = href.split('/').pop();
            var link_id=$this.attr('id');
            $this.colorbox({ html: function() {
            var iframe = '<iframe id="player1" width="853" height="480" src="https://www.youtube.com/embed/' + youtubeId + '?enablejsapi=1&html5=1" frameborder="0" allowFullScreen></iframe>';
            var output = "<div style='line-height: 0px; overflow: hidden;'>" + iframe + '</div>';
            return output;
            },
            onComplete:function(){
            //  player.playVideo();
             }
            });
        });             
    });

</script>

<div id="content">
<p><a id="aaa" class='youtube' href="https://www.youtube.com/embed/FKWwdQu6_ok">To see video click here</a></p>
</div>

【问题讨论】：

这是$( document ).ready()，而不是$("document").ready()。此外，onYouTubePlayerAPIReady() 不会在任何地方调用。
onYouTubePlayerAPIReady() 已在代码顶部调用。
在您提供的代码中，onYouTubePlayerAPIReady 只出现了一次，它是函数定义。

标签： jquery colorbox youtube-javascript-api

【解决方案1】：

您需要将此代码放在底部，因为在加载它时这将调用 api 就绪函数。

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

【讨论】：