如何弹出一个 jquery 窗口来播放 youtube 视频? [英] How to popup a jquery window to play youtube video?

问题描述

我需要自动播放此视频.太好了，这段代码可以播放来自其他来源的视频，例如 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>

<script language="javascript" type="text/javascript">$(函数(){var videoModal = $('#video-modal').overlay({暴露:{颜色:黑色'，加载速度:200，不透明度:0.85},closeOnClick: 真,api: 真的});$('.video-link').click(function() {videoModal.load();var videoUrl = $(this).attr('href');var flashvars = {};变量参数 = {允许全屏:真"，允许脚本访问:总是"};var 属性 = {};swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);返回假；});});

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>

这篇关于如何弹出一个 jquery 窗口来播放 youtube 视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！