Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anythingslider html 5 video autoplay

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #39675
    demiska
    Member

    please i need your help folks!

    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.

    #108968
    Mottie
    Member

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

    });​
    #119178
    redzase
    Member

    @mottie :

    i want to ask about your script what you post, that script added anywhere ? or where ?

    please help me :D
    thx

    #119749
    Mottie
    Member

    @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($){ … });`

    #126831

    @mottie
    Works perfectly fine! One question though.. Can I make the Anythingslider move to the next panel when the video is finished?

    #126849
    Mottie
    Member

    Hi @centrumkanalen!

    It doesn’t check if the video is playing unless the slideshow is active. So just set the AnythingSlider option `autoPlay` to `true`.

    #165366
    daveolsan
    Participant

    @mottie

    In the video options – can I stop the audio and start the audio from the beginning once I return to the slide as suppose to play from where it paused?

    Many thanks!!

    #165505
    daveolsan
    Participant

    @mottie I am using the exact code you have posted on SEPTEMBER 5 above – but I have no video files, I have mp3 audio on each slide. Autoplay setup – the file is embedded inside the video tag. All is fine but when you return to a visited slide the audio starts to play from where you left it. The requirement is for the audio to start from the beginning. (ie. you are on slide1, you listen to the audio for 30 sec, you go slide2, return to slide1 and audio resumes from 30s but I need it to start from the beginning – I hope it makes sense :)

    #165510
    Paulie_D
    Member

    Since this is clearly a JS issue, I’ll move this over to the correct area.

    #165915
    daveolsan
    Participant

    That solved my issue. Thank you so much mottie.

    #177816
    Innovuela
    Participant

    hi, thanks for this code, but the all slide stops after 3 or 4 times… can i make a loop forever?

    Thanks

    #177824
    Innovuela
    Participant
    <!DOCTYPE html>
    <html>
    
    <head>
    
     <!-- jQuery -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    
     <!-- Anything Slider optional plugins -->
     <script src="http://slide.innovuela.com/teste/js/jquery.easing.1.2.js"></script>
    
     <!-- Anything Slider -->
     <link href="http://slide.innovuela.com/teste/css/anythingslider.css" rel="stylesheet">
     <script src="http://slide.innovuela.com/teste/js/jquery.anythingslider.min.js"></script>
    
     
     
     <style>
    /*ul#slider, ul#slider li {
        width: 300px;
        height: 200px;
        list-style: none;*/
    }
    </style>
     
    
    </head>
    
    <body>
    
    <!-- Add additional stylesheets here -->
    <link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
    
    <ul id="slider">
        <li class="panel5">
            <video width="320" height="240" controls="controls">
               
                <source src="http://css-tricks.github.com/AnythingSlider/demos/video/movie.mp4" type="video/mp4">
                
                Your browser does not support the video tag. But you could include an iframe/embeded video here.
            </video>
        </li>
        <li><img src="http://placekitten.com/300/200" alt="" /></li>
        <li><img src="http://placehold.it/300x200" alt="" /></li>
        <li><img src="http://placebear.com/300/200" alt="" /></li>
        <li><img src="http://lorempixel.com/300/200" alt="" /></li>
    </ul>
    
     <script>
     
     
    
    var playvid = function(slider) {
        var vid = slider.$currentPage.find('video');
        if (vid.length) {
            // always start from the beginning
            vid[0].currentTime = 0;
            // 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);
        }
    
    });
    
    </script>
    
        
    
    </body>
    
    </html>
    #177825
    Innovuela
    Participant

    yes, and the demo have this problem.. Thank You

    #245069
    vernominon
    Participant

    Just in case the following issue isn’t just a problem elsewhere with my page, I found that with autoPlay set to true the script produced an “undefined” error with the isVideoPlaying part. Wrapping it up with a check to see if slider is defined fixed it. Probably not the most elegant fix but it all works now.

    function(slider) {
    if (typeof slider !==’undefined’) {
    var vid = slider.$currentPage.find(‘video’);
    return (vid.length && typeof(vid[0].pause) !== ‘undefined’ && !vid[0].paused && !vid[0].ended);
    }
    }

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.