Question

我试图让Fancybox自动打开并在页面加载时自动播放webm视频文件。看起来这是Fancybox应该没有任何问题处理的东西，但出于某种原因，我无法让它工作。我希望有人可以看看，也许发现我失踪的东西。

这是在Squarespace内完成的，如果这有所不同。

当我使用swf文件时，我可以让它正常工作，如下所示：

<script>
$(document).ready(function () {
    $.fancybox.open([{
        href: '/s/phlogo.swf',
        title: 'Logo'
    }], {
        padding: 0,
        afterShow: function () {
            setTimeout(function () {
                $.fancybox.close();
            }, 15000);
        }
    });
});
</script>

但是当我尝试使用webm文件时，就像这样：

$(document).ready(function () {
    $.fancybox.open({
        padding: 0,
        content   : '<source src="/s/phlogo.webm" type="video/webm" />',
        type: "html",
        afterShow: function () {
            setTimeout(function () {
                $.fancybox.close();
            }, 15000);
        }
    });
});

它只是打开一个小小的，空的fancybox窗口。 phlogo.swf文件肯定在正确的位置，所以我知道这不是问题。

谁能看到我做错了什么？我已经把头发拉了太长时间了，所以非常感谢任何帮助！

Answer 1

如果您只是定位支持 webm 文件类型的浏览器，那么您可以

$.fancybox.open({
    padding: 0,
    content: "<video><source src='/s/phlogo.webm' type='video/webm' /></video>",
    type: "html", // cause you are using html tags
    afterShow: function () {
        setTimeout(function () {
            $.fancybox.close();
        }, 15000);
    }
}); // fancybox

注意 <source>标记用于为<video>标记指定多个媒体资源，并且不能单独放置，因此此行

content   : '<source src="/s/phlogo.webm" type="video/webm" />'

......赢了

参见 JSFIDDLE

注意：

如果您想支持更多种类的浏览器和设备，则可能需要使用播放器插件，例如mediaelement.js（MEJS）。检查 this tutorial ，了解如何将MEJS与fancybox配合使用。

Fancybox没有播放HTML5视频......任何人都可以发现我做错了吗？

1 个答案: