- This topic is empty.
March 3, 2014 at 7:23 am #164549
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?March 3, 2014 at 11:00 am #164564
What might be a quick efficient method of pulling this off?
I couldn’t say. What have you done so far?March 3, 2014 at 12:49 pm #164581
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.March 3, 2014 at 1:57 pm #164588
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).March 3, 2014 at 2:08 pm #164589
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?March 3, 2014 at 5:51 pm #164599
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… :) ).
- The forum ‘Other’ is closed to new topics and replies.