html - 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>