Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #164549
    Ravingdork
    Participant

    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?

    #164564
    __
    Participant

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

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

    #164581
    Ravingdork
    Participant

    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.

    #164588
    __
    Participant

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

    #164589
    Ravingdork
    Participant

    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?

    #164599
    __
    Participant

    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… :) ).

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Other’ is closed to new topics and replies.