I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
var playvid = function(slider) { var vid = slider.$currentPage.find('video'); if (vid.length) { // autoplay vid[0].play(); } };
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists onInitialized: function(e, slider) { playvid(slider); }, // pause video when out of view onSlideInit: function(e, slider) { var vid = slider.$lastPage.find('video'); if (vid.length && typeof(vid[0].pause) !== 'undefined') { vid[0].pause(); } }, // play video onSlideComplete: function(slider) { playvid(slider); }, // pause slideshow if video is playing isVideoPlaying: function(slider) { var vid = slider.$currentPage.find('video'); return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended); }
@redzase Well, the code I shared above should be added into the head of the page. But ideally, it should be added to an external file along with all the other code used on your page.
Also, the code above should be wrapped inside of a document ready function: jQuery(function($){ ... });
I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
@mottie :
i want to ask about your script what you post, that script added anywhere ? or where ?
please help me :D thx
@redzase Well, the code I shared above should be added into the head of the page. But ideally, it should be added to an external file along with all the other code used on your page.
Also, the code above should be wrapped inside of a document ready function:
jQuery(function($){ ... });@mottie Works perfectly fine! One question though.. Can I make the Anythingslider move to the next panel when the video is finished?
Hi @centrumkanalen!
It doesn't check if the video is playing unless the slideshow is active. So just set the AnythingSlider option
autoPlaytotrue.