Youtube Api + Fancybox + 自动播放不打开视频答案

【问题标题】：Youtube Api + Fancybox + Autoplay playing without opening videoYoutube Api + Fancybox + 自动播放不打开视频
【发布时间】：2014-05-26 05:12:22
【问题描述】：

我有一个视频在页面加载时最初隐藏在 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>

Fancybox 代码：

var vid=jQuery;
vid.noConflict();
    vid(document).ready(function() {
        vid('.fancyboxvideo').fancybox({
            padding : 0,
            openEffect : 'none',
            closeEffect : 'none',
            prevEffect : 'none',
            nextEffect : 'none',
            autoSize    : false,
            fitToView   : false,
            width       : '640px',
            height      : '480px',
            arrows : false,
            wmode       : 'opaque',
            helpers : {
            media : {},
            buttons : {},
            overlay : {
            css : {
            'background' : 'rgba(0,0,0,0.9)'
                }
            }
        }
    });
});

打开视频的链接：

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

【问题讨论】：

哪个浏览器？我刚刚用最新的 Firefox 和 Chrome 进行了测试，视频没有自动播放。
我认为拥有（隐藏）内联视频是个坏主意，它们会增加页面加载的开销。为什么不调用视频（在花式框中），直到你真的需要它可见？这是beforeShow 回调中的示例操作方法
@ViniciusPinto 我很抱歉 - 我发布了自动播放设置为 0 的代码。我已将其更改为 1。
@JFK 我必须使用这种实现方法的原因是我的 Google Analytics（分析）跟踪可以在视频上运行。
@WolfCat ：您的分析无论如何都会起作用，因为您在 onPlayerStateChange() 函数中推送事件

标签： jquery video youtube-api fancybox-2 autoplay

【解决方案1】：

autoplay 选项应该为零，只需在 onComplete Fancybox 回调上调用 player.playVideo()。

【讨论】：

我认为你没有理解这个问题 ;) ...另外，检查问题的标签，上面写着 fancybox-2 和 onComplete 不是该版本的有效选项。
想解释一下吗？我同意您在 OP 中的评论，即最好仅在需要时加载视频，但如果他想隐藏加载它，那么使用 playVideo() 有什么问题？（除了回调名称，我相信在新版本中是afterShow）
OP 说when flash is not enabled on the browser； playVideo() 似乎无法解决这种情况下的问题
我刚刚在最新的 Chrome 和 FF 上进行了测试，效果很好。我认为IE必须是8或更高版本，不确定Safari。