Play HTML5 Video or Audio in Slider

In addition to YouTube and Vimeo, Menucool Javascript Image Slider also supports other video or audio formats such as mp4, ogg, webm, and mp3.

Videos and audios can be played in HTML by many different elements, such as <video>, <embed>, <object>, <audio>, but none of them are fully browser compliant. By far the best solution is using the HTML5 <video> or <audio> element (HTML Videos - Menucool Slider uses HTML5 video or audio tags to play videos or audios in the slider.

HTML5 video/audio are supported by all major browsers except IE 8 and earlier. When browsing HTML5 video/audio with IE 8 or earlier in Menucool slider, it will look like a normal image without playing the video/audio.

How to embed HTML5 videos or audios to the slider

An example is worth a thousand words. The demo's HTML code is as shown below:

<!DOCTYPE html> <html> <head> <link href="themes/6/js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script> <script src="themes/6/js-image-slider.js" type="text/javascript"></script> </head> <body> <div id="sliderFrame"> <div id="slider"> <video preload="none" data-image="jsImgSlider/images/image-slider-1.jpg" controls> <source data-src="prod/mcvideo.mp4" type="video/mp4" /> <source data-src="prod/mcvideo.ogg" type="video/ogg" /> </video> <a class="lazyImage" href="jsImgSlider/images/image-slider-3.jpg">Slide 3</a> <audio preload="none" data-image="jsImgSlider/images/image-slider-5.jpg" data-alt="Lorem ipsum dolor sit amet" controls> <source data-src="prod/mcaudio.mp3" type="audio/mpeg"> <source data-src="prod/mcaudio.ogg" type="audio/ogg"> </audio> </div> <!--thumbnails--> <div id="thumbs" data-autovideo="true"> <div class="thumb"> <img src="jsImgSlider/images/thumb1.jpg" /><div class="playvideo"></div> </div> <div class="thumb"> <img src="jsImgSlider/images/thumb3.jpg" /> </div> <div class="thumb"> <img src="jsImgSlider/images/thumb5.jpg" /><div class="playvideo"></div> </div> </div> </div> </body> </html>