如何弹出一个 jquery 窗口来播放 youtube 视频?

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

问题描述

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

解决方案

用于显示弹出窗口的函数或插件可能与用于显示视频的不同.在这个例子中，我使用了来自 jQuery Tools 的 Overlay Plugin 来显示模式然后使用swfobject 以显示 YouTube Flash Player.或者，您可以使用 HTML5带有 Flash 后备功能的视频播放器来显示视频，但您仍然需要它来先弹出您的模式.

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"class="video-link">视频 1</a><a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"class="video-link">视频 2</a><div class="modal" id="video-modal"><div id="video-container" style="width: 425px; height: 344px;"></div>

I need this video to play automatically. It would be nice, this code can play videos from other sources like yahoo etc.. Is it also possible to use HTML5, instead of jquery?

解决方案

The function or plugin you use to display the popup window will probably be different from what you are using to display the video. In this example I used the Overlay Plugin from jQuery Tools to display the modal then used swfobject to display the YouTube Flash Player. Alternatively, you could use an HTML5 video player with Flash fallback to display the video, but you would still need it to popup your modal first.

<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>