Question

有没有人知道一个好的插件可以帮助我完成以下任务：我在网站上有一张照片。单击此图片后，视频播放器将在屏幕中央打开。该视频是从youtube播放的。这是一个代表我想要的网站 - http://thumb.it/（请参阅watch our video符号右侧的视频图片。

Answer 1

几年前我使用jQuery fancyBox插件（http://fancyapps.com/fancybox/）完成了这个问题。现在可能有更好的弹出/模态窗口替代方案，虽然我对fancyBox感到满意，因为它非常容易使用。

FancyBox解决了点击视频缩略图链接时显示弹出窗口的问题。在fancyBox中，您可以嵌入YouTube视频（或HTML，图像或任何内容 - 而不仅仅是视频）。

直接在fancyBox文档页面上，它们链接到此JsFiddle：http://jsfiddle.net/M78zz/，演示如何从弹出链接启动YouTube视频。小提琴还演示了如何使用YouTube API在第一个视频播放完毕后转到下一个视频。

这是JsFiddle代码：

HTML

<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a>

<br />

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a>

的JavaScript

// Fires whenever a player has finished loading
function onPlayerReady(event) {
    event.target.playVideo();
}

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.next();
    }
}

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {

    // Initialise the fancyBox after the DOM is loaded
    $(document).ready(function() {
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                nextEffect  : 'none',
                prevEffect  : 'none',
                padding     : 0,
                margin      : 50,
                beforeShow  : function() {
                    // Find the iframe ID
                    var id = $.fancybox.inner.find('iframe').attr('id');

                    // Create video player object and add event listeners
                    var player = new YT.Player(id, {
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }
            });
    });

}

CSS

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

插件在弹出窗口中播放视频

1 个答案: