#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2

    Video Play Stops JS Slider?


    I currently have a javascript slider in place. It's on autoplay at 5 seconds per slide. The second slide has an iframe youtube video.

    Unfortunately, if I click play, 5 seconds later, the slider autplays to the next slide.

    Is there any way to get the slider to recognize the video is playing, for example? Or are there any other ways around this that anyone can think of?

    The JS code is simple, I'm using http://jquery.malsup.com/cycle/ for my slider.
    Code:
    <script type='text/javascript'>
        jQuery('#slider-1').cycle({
            next: '#next-1',
            prev: '#prev-1',
            fx: 'fade',
            timeout: 30000000,
            pause: 1,
            pager: '#slider-nav-pager-1',
            height: '433px',
            width: '960px'
        })
    </script>
    If you need more code, let me know. It's just a simple iframe.

    Thanks!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Take a look at Google's YouTube API Events; I think you should be able to use them to interact with your jQuery..., to stop the slideshow.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2
    Will this work on older browsers too? Most of our demographic uses IE, some of them use older versions...
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Originally Posted by JCKnoell
    Will this work on older browsers too? Most of our demographic uses IE, some of them use older versions...
    Off hand... I don't know, the best advice I can personally give you, on your question; is to try the code below (which comes from a member of the YouTube Developers team... Jeff Posnick), in older versions of IE (that support flash) and see if it works.
    Code:
    <script src="dummy.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
      
    <div id="player"></div>
    
    <script type='text/javascript'> 
    
    var tag = document.createElement('script');
    
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onReady
            }
        });
    }
    
    function onReady() {
     player.addEventListener('onStateChange', function(e) {
        if(e.data == 1) {
         // stop slider action here
         alert("Flash movie is currently playing.");
         }
        else if(e.data == 0) {
         // start slider action here
         alert("Flash movie is currently NOT playing.");
        }
     });
    }
    
    </script>
    Good Luck

IMN logo majestic logo threadwatch logo seochat tools logo