Jquery Youtube Api+；Fancybox+；无需打开视频即可自动播放

我有一个视频，最初隐藏在pageload上的一个div中。然后，当我单击图像时，它会打开并自动播放

但是，当浏览器上未启用flash时，视频将在未打开的情况下播放。所以我只能听到音频，但没有视频

以下是我正在使用的Youtube Api代码：

<div id="video-home-popup" style="display:none; padding:0px;">
<div id="player"></div>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            playerVars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '1'
            },
            height: '480',
            width: '640',
            videoId: 'qLFQUdmAkcQ',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        /// event.target.playVideo(); 
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.PAUSED) {
            _gaq.push(['_trackEvent', 'Videos', 'Paused',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.ENDED) {
            _gaq.push(['_trackEvent', 'Videos', 'Watch to End',
            player.getVideoUrl()]);
        }
    }
    // ]]>
</script>
</div>

打开视频的链接：

<a class="fancyboxvideo" href="#video-home-popup"></a>

自动播放选项应为零，只需在

onComplete

Fancybox回调上调用

player.playVideo（）

。

哪个浏览器？我刚刚用最新的Firefox和Chrome进行了测试，但视频没有自动播放。我认为使用（隐藏）内联视频是个坏主意，它们会增加页面负载的开销。为什么不调用视频（在fancybox中），直到您真正需要它可见？下面是一个示例，说明如何在

beforeShow

callback@ViniciusPinto我的道歉-我发布了自动播放设置为0的代码。我已将其更改为1。@JFK我必须使用此实现方法的原因是，我的Google Analytics跟踪将对视频起作用。@WolfCat:您的分析无论如何都会起作用，因为您正在将事件推送到

onPlayerStateChange（）

函数中。我想您不明白这个问题；）。。。另外，检查问题的标签，上面写着

fancybox-2

和

onComplete

不是该版本的有效选项。要解释一下吗？我同意你在OP中的评论，即最好只在需要时加载视频，但如果他想隐藏加载，使用playVideo（）有什么问题？（除了回调名称，我相信在新版本中是

afterShow

）当浏览器上未启用flash时，OP会显示

playVideo（）
似乎无法解决此场景中的问题。我刚刚在最新的Chrome和FF上进行了测试，效果良好。我认为IE必须是8版或更高版本，不确定Safari。
<a class="fancyboxvideo" href="#video-home-popup"></a>