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
  • September 5, 2012 at 11:42 am #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.

    September 5, 2012 at 3:21 pm #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);
    
}
    

    
});​
    December 28, 2012 at 4:39 am #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

    January 3, 2013 at 2:16 pm #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($){ … });`

    March 4, 2013 at 3:53 am #126831
    centrumkanalen
    Member

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

    March 4, 2013 at 8:54 am #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`.

    March 10, 2014 at 11:01 pm #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!!

    March 12, 2014 at 1:44 am #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 :)

    March 12, 2014 at 3:41 am #165510
    Paulie_D
    Member

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

    March 15, 2014 at 6:57 am #165915
    daveolsan
    Participant

    That solved my issue. Thank you so much mottie.

    August 5, 2014 at 2:28 pm #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

    August 5, 2014 at 3:02 pm #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>
    August 5, 2014 at 3:02 pm #177825
    Innovuela
    Participant

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

    August 31, 2016 at 12:33 pm #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);
    }
    }

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