How best to create an image slideshow fallback for HTML5 video?

[Ravingdork]

A client has asked me to place an HTML5 video in the header of his web site. He also wants a picture slide show to appear in its place as a fallback for those who are unable to see the video. So far I’ve managed to put up the video successfully, and to have ONE static fallback image, but I’m unsure of how to proceed to get the slideshow effect. I’m proficient in HTML and CSS, but not much else. What might be a quick efficient method of pulling this off?

[__]

What might be a quick efficient method of pulling this off?

I couldn’t say. What have you done so far?

[Ravingdork]

This is what I have so far:

<video id="header_video" autoplay loop>
                    <source src="assets/video/headervid.mp4" type="video/mp4">
                    <source src="assets/video/headervid.ogv" type="video/ogg" />
                    <source src="assets/video/headervid.webm" type="video/webm" />
                    <img src="assets/images/fallback.jpg" title="Your browser does not support the <video> tag">
                </video>

The CSS attached to it is all just sizing and positioning stuff.

[__]

Have you chosen a slideshow script? You could put it in place of the fallback image. You might have to do some feature detection in order to only run the JS when needed (or it might not interfere anyway, depending).

[Ravingdork]

I worry it will screw up the video code in some way, but I have not been able to test it since I don’t know how to trick the site into thinking my browser doesn’t support the videos. Perhaps I could get some advice on that too?

[__]

I don’t think getting it to work when there is no video support will be a problem – getting it to not work when there is video support concerns me more.

Regardless, you can test the “supported” case first. Once it works, you can use browserstack (or a VM, or pay a visit to a friend who hasn’t upgraded their computer in a few decades… :) ).

[Author]

Posts