Youtube Api+Fancybox+自动播放,无需打开视频



我有一个视频,它最初隐藏在页面加载时的div中。然后,当我点击一个图像时,它会打开并自动播放。

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

这是我正在使用的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>

autoplay选项应该为零,只需在onComplete Fancybox回调中调用player.playVideo()即可。

相关内容

  • 没有找到相关文章

最新更新