HTML5 视频背景后备

Question

我已经尝试过这段代码，但它似乎不起作用，我正在尝试创建一个后备，因此如果非 html5 浏览器（即/safari）加载该网站，它将显示不同的内容，但没有视频。

<?php if (Modernizr.video) {
<video id="video" src="video.ogv" autoplay />
}
else 
{
<img src="text.jpg">
}?>

任何反馈都会很棒。谢谢

Answer 1

看起来问题在于服务器端所做的事情与客户端所做的事情的混淆。 Modernizr 是一个 JavaScript 库。将其代码放入 PHP 块中不会为您做任何事情，因为 PHP 是一种服务器端技术，而 JavaScript 不是。

另一种方法是使用 PHP 向 JavaScript 提供必要的数据，然后使用 JavaScript 确定要显示的 HTML。

<script>
if (Modernizr.video) {
    document.write('<video id="video" src="<?php echo 'video.ogv'; ?>" autoplay />');
} else {
    document.write('<img src="<?php echo 'text.jpg'; ?>" />');
}
</script>

您可以将此代码放入您想要显示视频/图像的 HTML 中。请注意，我们使用 PHP 来回显文件名。这允许您动态提供文件名。为了利用 HTML5 的功能，我建议将文件名放入 HTML5 data-* 属性中，然后使用 JavaScript 同时处理所有出现的视频。

<div class="has-video" data-video="<?php echo 'video.ogv'; ?>" data-image="<?php echo 'text.jpg'; ?>"></div>