HTML5 Video Background Fallback

I've tried this code and it doesn't seem to be working I'm trying to create a fallback so if a non html5 browser (ie/safari) loads the website it'll show different content without the video.

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

Any feed back would be great. Thank开发者_StackOverflow you

---

It looks as though the issue lies in the confusion of what is done on the server side versus what is done on the client side. Modernizr is a JavaScript library. Putting it's code into PHP blocks won't do anything for you since PHP is a server-side technology and JavaScript is not.

An alternative would be using PHP to provide JavaScript with the necessary data and then using JavaScript to determine the HTML to display.

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

You would put this code in the HTML where you want the video/image to display. Note that we use PHP to echo out the filenames. This allows you to provide the filenames dynamically. To take advantage of HTML5's features, I'd recommend placing the filenames into HTML5 data-* attributes, and then using JavaScript to handle all occurrences of video simultaneously.

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