如何弹出一个 jquery 窗口来播放 youtube 视频？答案

【问题标题】：How to popup a jquery window to play youtube video?如何弹出一个 jquery 窗口来播放 youtube 视频？
【发布时间】：2011-02-19 19:00:28
【问题描述】：

我需要自动播放此视频。太好了，这段代码可以播放来自其他来源的视频，如 yahoo 等。是否也可以使用 HTML5，而不是 jquery？

【问题讨论】：

标签： asp.net jquery html youtube

【解决方案1】：

您用于显示弹出窗口的功能或插件可能与您用于显示视频的功能或插件不同。在此示例中，我使用 Overlay Plugin from jQuery Tools 显示模式，然后使用 swfobject 显示 YouTube Flash 播放器。或者，您可以使用HTML5 video player with Flash fallback 来显示视频，但您仍然需要它来首先弹出您的模式。

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 2</a>

<div class="modal" id="video-modal">
    <div id="video-container" style="width: 425px; height: 344px;"></div>
</div>

<script language="javascript" type="text/javascript">

    $(function() {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true
        });

        $('.video-link').click(function() {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};

            swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

            return false;
        });
    });

</script>

【讨论】：

谢谢，达夫加西亚！你知道如何自动播放视频吗？此代码仅弹出 youtube 视频，但用户必须点击它才能播放。
此示例在 YouTube 网址的末尾有 &autoplay=1，它应该在视频加载到播放器后立即开始播放。
我试过这个例子，但它没有覆盖，也没有播放视频。为什么？

【解决方案2】：

SimpleModal 是一个很棒的 jQuery 插件，因为它提供了许多不同的选项，其中一个是显示外部内容：

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

Bill Beckelman 有一系列关于将 SimpleModal 与 Asp.Net 集成为自定义确认对话框的教程。他演示了如何创建出色的客户端功能以及如何回发到服务器。它确实帮助我了解了如何最好地将 jQuery 与 ASP.Net 集成。

【讨论】：

【解决方案3】：

查看FancyBox 和ColorBox 的演示

【讨论】：

【解决方案4】：

PrettyPhoto 是一个纯 JavaScript 库，可在灯箱中显示图像和视频。

出于您的目的，您需要使用特殊的“rel”属性标记 YouTube 链接，然后视频将在弹出式灯箱中打开。

【讨论】：

问题用 asp.net 标记。所以 -1
@piemesons - PrettyPhoto 的作者还发布了一个纯 JavaScript 库，可以与 asp.net 一起使用 - 所以我仍然相信它是相关的。