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

24

本文介绍了如何弹出一个 jquery 窗口来播放 youtube 视频?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我需要自动播放此视频.太好了,这段代码可以播放来自其他来源的视频,例如 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 视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

C# 中的多播委托奇怪行为?

C# 中的多播委托奇怪行为?

Multicast delegate weird behavior in C#?(C# 中的多播委托奇怪行为?)...
2023-11-11 C#/.NET开发问题
6

代表如何工作(在后台)?

代表如何工作(在后台)?

How delegates work (in the background)?(代表如何工作(在后台)?)...
2023-11-11 C#/.NET开发问题
5

函数委托与函数

函数委托与函数

Func Delegate vs Function(函数委托与函数)...
2023-11-11 C#/.NET开发问题
6

针对委托检查 MethodInfo

针对委托检查 MethodInfo

Checking a MethodInfo against a delegate(针对委托检查 MethodInfo)...
2023-11-11 C#/.NET开发问题
7

如何从 lambda 表达式中获取引用实例的实例

如何从 lambda 表达式中获取引用实例的实例

How to get the instance of a referred instance from a lambda expression(如何从 lambda 表达式中获取引用实例的实例)...
2023-11-11 C#/.NET开发问题
4

Func&lt;T&gt;.BeginInvoke 使用线程池吗?

Func&lt;T&gt;.BeginInvoke 使用线程池吗?

Does Funclt;Tgt;.BeginInvoke use the ThreadPool?(Funclt;Tgt;.BeginInvoke 使用线程池吗?)...
2023-11-11 C#/.NET开发问题
6

热门文章

1阅读完 JSON 内容后遇到的附加文本: 2Excel 错误 HRESULT: 0x800A03EC 尝试使用单元格名称获取范围 3承载错误 - invalid_token - 未找到签名密钥 4反序列化 Newtonsoft.Json 中的自定义异常 5RabbitMQ 连接错误没有一个指定的端点是可达的" 6“由于系统缺乏足够的缓冲区空间或队列已满,无法对套接字执行操作" 7使用 System.IdentityModel.Tokens.Jwt 解码和验证 JWT 令牌 8Linq - 在多个 (OR) 条件下进行左连接

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序