Grow your CSS skills. Land your dream job.

Video playback on each loop with AnythingSlider

  • # January 19, 2012 at 3:23 pm

    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

    # January 19, 2012 at 4:33 pm

    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?

    # January 20, 2012 at 3:39 am

    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.

    # January 20, 2012 at 3:50 am

    I also use these basic JS parameters:



    # January 20, 2012 at 6:44 am

    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.

    # January 20, 2012 at 10:58 am

    Are you using the video extension?

    # January 20, 2012 at 11:45 am

    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.

    # January 20, 2012 at 12:24 pm

    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…

    # January 21, 2012 at 9:27 am

    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.

    # January 21, 2012 at 11:50 am

    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

    # November 8, 2012 at 9:21 am

    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?

    # November 8, 2012 at 10:04 am

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

    # November 15, 2012 at 1:50 pm

    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

    # July 5, 2013 at 2:45 am

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

    can we write code like this:

    ?

    # July 5, 2013 at 2:48 am

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".