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>

HTML5视频背景后备

1 个答案: