Video playback on each loop with AnythingSlider

[terraconnect]

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?

Thanks in advance. Kindeste regards forme EU.
TC

[Mottie]

Hi Terraconnect!

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?

[terraconnect]

Hi Mottie and thank you for coming,

Here’s the HTML :

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.

[terraconnect]

I also use these basic JS parameters:

[terraconnect]

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.

[Mottie]

Are you using the video extension?

[terraconnect]

Yes.



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.

[terraconnect]

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.

Not sure my explanations are comprehensive…

[Mottie]

Ok, I think it might be better actually to remove the video extension and use the following code as your AnythnigSlider initialization:

$(function(){

$('#slider').anythingSlider({



theme               : "metallic",

easing              : "swing",

buildArrows         : false,

buildNavigation     : false,

buildStartStop      : false,

resizeContents      : true,

delay               : 1000,

autoPlay            : true,

resumeOnVisible     : true,

resumeOnVideoEnd    : true,



// 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.

[terraconnect]

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

[jaskala]

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?

[jaskala]

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]);
}
}


[MarkHollas]

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

[mukhlis01]

how if source video is streaming like this?:
http://111.222.333.444:8081/main.htm

can we write code like this:

?

[mukhlis01]

how if source video is streaming like this?:
hxxp://111.222.333.444:8081/main.htm

can we write code like this:

?

Thanks

Mukhlis
http://www.planetkecil.com

[Author]

Posts