Note:The slider with videos functions well when the page is hosted on a web server or localhost server. Don't test it by opening the page from local file path (file:///...).
How to embed HTML5 videos or audios to the slider
Please refer to Play HTML5 Video or Audio in slider
How to embed YouTube or Vimeo videos to the slider
- Another script, mcVideoPlugin.js that is available in the download, should be referenced before the js-image-slider.js
- Wrap slide picture with a link to the video. The link should specify class="video" and its href must be formatted as below without any extra parameters.
<a class="video" href="http://vimeo.com/38375192"> <img src="images/img3.jpg" /> </a> <a class="video" href="http://www.youtube.com/watch?v=AQ-3aRhvFwU"> <img src="images/img4.jpg" alt="description" /> </a>
Or, if you prefer lazy loading images, you can write the HTML in the following way:
<a class="video" href="http://vimeo.com/38375192"> <b data-src="images/img3.jpg"></b> </a> <a class="video" href="http://www.youtube.com/watch?v=AQ-3aRhvFwU"> <b data-src="images/img4.jpg" data-alt="description"></b> </a>
And there you have it!
More OptionsYou can add the attributes below to override the video slider's default behavior:
data-autovideo="true": starts playing the video automatically as soon as the slide is displayed without the need of clicking on it
data-autovideo="1": The video will automatically play at the first time when the slide is displayed. After that the slide will resume to normal behavior: the video won't play unless it is manually clicked.
<a class="video" href="http://vimeo.com/38375192" data-autovideo="1"> <img src="images/img3.jpg" /> </a>
FAQ: I have thumbnails going together with my video slider, and I didn't set data-autovideo="true" to the video links, but I want clicking thumbnails will automatically play the video in the slider. Is that possible?
Answer: Yes it is simple. See the answer on page Html5 video or audio in slider (in the yellow box of the page)
data-autonext="replay": When the play is finished it will replay again without switching to the next slide
data-autonext="false": stays in current slide when the play is finished without resuming the slideshow
This demo requires a license for using the advanced features such as playing video and lazy loading image.