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 - w3schools.com). 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>
- To optimize the slider performance, we need to set/rename some attributes as shown above:
- preload="none"
- slide image is set to the data-image attribute of the <video> or <audio> element
- the src attribute of the <source> element should be renamed to data-src
- the caption, if required, can be defined by the data-alt attribute of the <video> or <audio> element
- It is optional to include the controls attribute in the <video> or <audio> element. Removing it will remove the element's controls such as progress bar, volumn bar, etc.
- data-autovideo
You can add data-autovideo="true" or data-autovideo="1" attribute to the <video> or <audio> element. Please refer to Video Slider to see their usage and differences.
FAQ: Is there a way that when the user clicks the thumnail, the video is automatically loaded and plays in the slider?
Answer Customizing the look of the thumbnails
This is actually quite simple.
The thumbnails markup below is the same as the one in the demo 2, demo 3, or demo 5:
<div id="thumbs"> <div class="thumb">...</div> <div class="thumb">...</div> ...... </div>You can add data-autovideo="true" either to the <div id="thumbs"> element, or to any (or all) <div class="thumb"> element. For example:
<div id="thumbs" data-autovideo="true"> <div class="thumb">...</div> <div class="thumb">...</div> ...... </div>Done. Now the video will automatically load and play in the slider when the thumbnail is clicked.
- After each thumbnail image that can play video/audio, we've added a <div class="playvideo"></div> element that has a play button background indicating the thumbnail can play video/audio.
- In addition to the js-image-slider.css stylesheet, the following CSS has also been added to style the thumbnails:
( The code is added after the js-image-slider.css so that it will override the settings defined by the js-image-slider.css. )
/* hide navigation bullets */ #slider div.navBulletsWrapper { display:none; } /* thumbnails */ #thumbs { margin-top:9px; text-align:center; font-size:0; background:#DDD; padding:8px; border-radius:6px; } #thumbs .thumb { display:inline-block; *display:inline;zoom:1;/*IE6, IE7 hack*/ margin:0 4px;/*this determins the distance between each thumbnail*/ position:relative; } #thumbs .thumb img{border:2px solid white; cursor:pointer; width:70px; height:44px; opacity:0.5;filter:alpha(opacity=50);} #thumbs .thumb-on img{border:2px solid white; opacity:1;filter:alpha(opacity=100);} /* for the video play button on top of thumbnails */ #thumbs .playvideo {position:absolute; background:transparent url(prod/playvideo.png) no-repeat center center; width:70px; height:44px; left:0;top:2px; opacity:0.6; filter: alpha(opacity=60);}
- data-autonext
You can add data-autonext="replay" or data-autonext="false" attribute to the <video> or <audio> element. Please refer to Video Slider for details.