Hi all and thank you first for this awesome jQuery plugin. It is really impressive.
I have a qiuestion though that I could not answer myself. I would like to have a video playing on each loop of the slider. It is a .ogv file inserted through HTML5 in one slide. It plays correctly on first loop but does not on the following. Is it possible to achieve that? If yes, how?
Could you share an example? Also, what do you mean it plays through the but not the following? Is the video paused or completed? Are you wanted a completed video to restart playing from the beginning?
Indeed, http2.ogv and http4.ogv are the same movies. When that slideshow starts, the first movie plays entirely. The slideshow is then paused until the movie is completed. Then the slideshow goes on but no more movie are played, neither the second one in the first loop, nor both of them in 2nd, 3rd, etc. loops.
I removed the loop attribute to the html tag (which does not work on Firefox) but the problem stays the same. My movie is launched only once. Probably a problem of initialization to be done at each time.
I removed the autoplay attribute in the video tag. It was preventing from seeing the action of JS only. With controls activated I am able to launch the video each time it becomes visible by clicking the play button. The slideshow is in autoplay and infinitieSlides modes.
What I would like is to have the movie start automatically each time the corresponding slide is visible, hence stopping the slideshow during playback only and for every cycle of the infinite slideshow.
// 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(); } }, // continue playing video when in view onSlideComplete: function(slider) { var vid = slider.$currentPage.find('video'); vid[0].play(); }, // 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); } });
});
In case you are interested, the video extension essentially uses this code, but I modified the "onSlideComplete" callback to always start the video when it comes into view.
Hi Mottie and thanks for the reply! That is what I did actually, waiting for your answer! :)
I just added a
var vid = slider.$lastPage.find('video'); vid[0].currentTime = 0;
action for the onSlideComplete callback, in order to rewind the movie onComplete of following slide. (That way, the movie is rewinded only when corresponding slide is completely out of view.)
Anyway, thank you very much for your appreciated help. TC
Hello! I have almost the same problem except that I use vimeo videos. I have one vimeo video per slide and some text too. I want it to autostart the video when I enter the slide, and pause when getting out of slide - and again resume the play when re-enter. Video should continue playing where it was paused not rewind to the beginning.... slideshow should be disabled so the user can navigate manually through the slides as (s)he wishes and video resumes where it was paused automatically.
Any ideas?
Never mind, it seems that I finally managed it to work:
onInitialized: function(e, slider) { // add vimeo api initialization string
slider.$items.find('iframe[src=vimeo]').each(function(i){
$(this).attr('src', function(j,s){ return s + '&api=1&player_id=' + i; });
})
},
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('iframe[src=vimeo]');
if (vid.length) {
vid[0].contentWindow.postMessage('method=pause', vid.attr('src').split('?')[0]);
}
},
onSlideComplete: function(slider) {
var vid = slider.$currentPage.find('iframe[src*=vimeo]');
if (vid.length) {
vid[0].contentWindow.postMessage('method=play', vid.attr('src').split('?')[0]);
}
}
Hi, I am having this same issue but it is only when viewing in IE9, the video plays in the first loop but does not the next time around. I have used your code example above. Also the slider becomes frozen at this point but IE F12 is giving me no errors
I have a qiuestion though that I could not answer myself. I would like to have a video playing on each loop of the slider. It is a .ogv file inserted through HTML5 in one slide. It plays correctly on first loop but does not on the following. Is it possible to achieve that? If yes, how?
Thanks in advance. Kindeste regards forme EU.
TC
Could you share an example? Also, what do you mean it plays through the but not the following? Is the video paused or completed? Are you wanted a completed video to restart playing from the beginning?
Here's the HTML :
Indeed,
http2.ogvandhttp4.ogvare the same movies. When that slideshow starts, the first movie plays entirely. The slideshow is then paused until the movie is completed. Then the slideshow goes on but no more movie are played, neither the second one in the first loop, nor both of them in 2nd, 3rd, etc. loops.loopattribute to thehtmltag (which does not work on Firefox) but the problem stays the same. My movie is launched only once. Probably a problem of initialization to be done at each time.<script src="js/jquery.anythingslider.video.js"></script>
is right in the header of my PHP/HTML page.
Nevertheless, as I said, the movie plays well on the first loop but doesn't on following loops.
autoplayattribute in thevideotag. It was preventing from seeing the action of JS only. With controls activated I am able to launch the video each time it becomes visible by clicking the play button. The slideshow is in autoplay and infinitieSlides modes.What I would like is to have the movie start automatically each time the corresponding slide is visible, hence stopping the slideshow during playback only and for every cycle of the infinite slideshow.
Not sure my explanations are comprehensive...
That is what I did actually, waiting for your answer! :)
I just added a
action for the onSlideComplete callback, in order to rewind the movie onComplete of following slide.
(That way, the movie is rewinded only when corresponding slide is completely out of view.)
Anyway, thank you very much for your appreciated help.
TC
Hello! I have almost the same problem except that I use vimeo videos. I have one vimeo video per slide and some text too. I want it to autostart the video when I enter the slide, and pause when getting out of slide - and again resume the play when re-enter. Video should continue playing where it was paused not rewind to the beginning.... slideshow should be disabled so the user can navigate manually through the slides as (s)he wishes and video resumes where it was paused automatically. Any ideas?
Never mind, it seems that I finally managed it to work:
onInitialized: function(e, slider) { // add vimeo api initialization string slider.$items.find('iframe[src=vimeo]').each(function(i){ $(this).attr('src', function(j,s){ return s + '&api=1&player_id=' + i; }); }) }, onSlideInit: function(e, slider) { var vid = slider.$lastPage.find('iframe[src=vimeo]'); if (vid.length) { vid[0].contentWindow.postMessage('method=pause', vid.attr('src').split('?')[0]); } }, onSlideComplete: function(slider) { var vid = slider.$currentPage.find('iframe[src*=vimeo]'); if (vid.length) { vid[0].contentWindow.postMessage('method=play', vid.attr('src').split('?')[0]); } }
Hi, I am having this same issue but it is only when viewing in IE9, the video plays in the first loop but does not the next time around. I have used your code example above. Also the slider becomes frozen at this point but IE F12 is giving me no errors