jquery - 如何在手机上全屏播放视频

Question

我正在使用 Fancybox 用于在模态上播放视频的插件。轻松满足在台式机和平板电脑上播放视频的要求。但在移动设备上，单击链接时视频应自动以全屏模式播放，而不是显示模式窗口。我尝试在移动设备中禁用该插件，希望当用户重定向时 YouTube 是否自动以全屏模式打开它。但没有成功。

我怎样才能实现这个目标？或者这实际上可能吗？

这是 jQuery

$(function () {
        var jWindow = $(window);
        $(".youtube-media").click(function () {
            if (jWindow.width() <= 768)
                return;
            $.fancybox({
                'padding': 2, 'autoScale': true, 'transitionIn': 'none', 'transitionOut': 'none', 'title': this.title,
                'width': 600, 'height': 340, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type': 'swf', 'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });
            return false;
        });
    });

这是 HTML 代码

<a class="youtube-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Play Video</a>

Answer 1

为了实现跨设备兼容性，我宁愿使用 YouTube 的 embed 格式，这样您就可以使用以下 html 格式将其作为 iframe 打开:

<a class="youtube-media" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque&fs=1">youtube</a>

请注意，我还添加了参数 &fs=1 以添加全屏支持。

那么这个脚本应该可以解决问题:

$(".youtube-media").on("click", function (e) {
    var jWindow = $(window).width();
    if ( jWindow <= 768 ) {
        return;
    }
    $.fancybox({
        href: this.href,
        type: "iframe" // when using embed format
    });
    return false;
});

查看此 JSFIDDLE 小格式，因此 youtube 应全屏显示(小于 768 像素时的结果 区域)。然后看到这个JSFIDDLE 采用大格式，以便 YouTube 在 fancybox 中显示。

注意:.on() 需要 jQuery v1.7+