Cant Set slider to stop while video is playing

[ghost]

hi,

i have got a slider with images and video and the slider is set on auto play. Ideally i would like to remove stop start option and keep the slider on auto play unless if you are paying a video in the slider. When the video finishes playing i would like to resume the slider. At the moment i can't set the slider to stop while the video is playing, the only way i am doing this is for the user to stop the slider then play the video and start the slider after (which is not what my client wants).

Can you please let me know how i can archive this, i have been looking on issues #331 and #333 but still cant work out exactly what i need to change to archive this.

Thanks in advance

Denford

[Mottie]

Are you including swfobject.js and the jquery.anythingslider.video.js files?

[ghost]

hi yes i was including them, had them in this order anythingslider.js , anythingslider.video.js then swfobject.js. So i thought to experiment i would change the order and have the swfobject.js first then the other two and now its going even weird.

i have a slider with two images and two youtube videos in the order image, video, image and video. Now i have noticed the slider stops only when i am playing the first video but not the second video. the videos are both using the youtube iframe am just using two different URL's.

so i have replaced all the images with different youtube videos and now it plays and stops on all of them except the one in panel 4 i.e. the last one. So have concluded that the stop functionality is only being applied to the any video other than the one in the last panel because when i have two images and two video last panel that has got a video doesnt work. Also the functionality to auto play the video when visible does the same behaviour works on any panel except the last one with a video on it.

wish i could give you the url to check this but unfortunately its on my local machine, dont know if its a bug or just a combination of settings that i have in the slider or something please can you have a look at the slider settings i have bellow:

$.anythingSlider.defaults = {
        // Appearance
        theme               : "default", // Theme name, add the css stylesheet manually
        mode                : "horiz",   // Set mode to "horizontal", "vertical" or "fade" (only first letter needed); replaces vertical option
        expand              : false,     // If true, the entire slider will expand to fit the parent element
        resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
        showMultiple        : false,     // Set this value to a number and it will show that many slides at once
        easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

        buildArrows         : true,      // If true, builds the forwards and backwards buttons
        buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
        buildStartStop      : true,      // ** If true, builds the start/stop button

/*
        // commented out as this will reduce the size of the minified version
        appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
        appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
        appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
        appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
        appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
*/

        toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering & hide @ other times
        toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

        startText           : "Start",   // Start button text
        stopText            : "Stop",    // Stop button text
        forwardText         : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
        backText            : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
        tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

        // Function
        enableArrows        : true,      // if false, arrows will be visible, but not clickable.
        enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
        enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
        enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.

        // Navigation
        startPanel          : 1,         // This sets the initial panel
        changeBy            : 1,         // Amount to go forward or back when changing panels.
        hashTags            : true,      // Should links change the hashtag in the URL?
        infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
        navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
        navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable

        // Slideshow options
        autoPlay            : true,     // If true, the slideshow will start running; replaces "startStopped" option
        autoPlayLocked      : true,     // If true, user changing slides will not stop the slideshow
        autoPlayDelayed     : false,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
        pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
        stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
        playRtl             : false,     // If true, the slideshow will move right-to-left

        // Times
        delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
        resumeDelay         : 5000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
        animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
        delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

/*
        // Callbacks - commented out to reduce size of the minified version - they still work
        onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes
        onInitialized       : function(e, slider) {}, // Callback when the plugin finished initializing
        onShowStart         : function(e, slider) {}, // Callback on slideshow start
        onShowStop          : function(e, slider) {}, // Callback after slideshow stops
        onShowPause         : function(e, slider) {}, // Callback when slideshow pauses
        onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
        onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation
        onSlideBegin        : function(e, slider) {}, // Callback before slide animates
        onSlideComplete     : function(slider) {},    // Callback when slide completes - no event variable!
*/

        // Interactivity
        clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
        clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
        clickControls       : "click focusin", // Events used to activate navigation control functionality
        clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
        allowRapidChange    : false,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

        // Video
        resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
        resumeOnVisible     : true,      // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
        addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
        isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension

    };

thanks for any help at least its partly working now.

[Mottie]

Oh you're testing this locally? There is a difference between testing this on your desktop versus a localhost... I can't find the exact reference, but I did find this post:

All the player APIs are only supported when serving from a web server - I believe this is in the docs for the Actionscript player, but at a quick glance I can't see it on the docs for the iframe player at the moment.

This is due to the cross-domain security policies in all web browsers.

Inside the iframe, the video is played using an HTML5 video object or flash depending on support for it.

[ghost]

So does this mean that a, this functionality should be available to all videos when the site is live and b, does it only apply to videos added using the YouTube iframe.

[Mottie]

Well, what I mean is if you want to test that it is working, test it on a local host or online. And it applies to all videos that use adobe flash (embedded video). So when you are testing a page on your desktop, the iframe does pause when you switch slides only because the browser you are using supports HTML5 video. If you test the page in IE8 or older, nothing will work until it is moved to a local host or online.

I just tested this again, and it seems that YouTube iframes do appear to work from the desktop in modern browsers - they didn't when I first wrote the extension. Although Vimeo iframes will pause but not resume when tested from the desktop.

I guess this is a bug. Maybe try to include an image or text only slide as the last slide to see if it fixes your issue. I'll get to work on the video extension soon... I hope =/.

[ghost]

thanks, i did try it in IE 8 and compatible mode and yes it doesn't even work at all. However i did some more general tests to try and pinpoint the behavior and these pointers bellow might help when you get the time to work on it; a) if i have just one video file and three images, the first round of the slider the video functionality doesn't work and on the second round it works fine. b)if i have 2 videos and 2 images in the order image, video, video, image the functionality doesn't work on any of the videos in the first round then work fine on both videos after. c)if i have 4 videos then the video functionality works on the first three video panels and not on the last one only after the first round as well, doesn't work on any in the first round.

So it looks like the first round of the slider the video functionality doesn't work until the slider has done a full round. Then the second round work fine in you have 2 videos they both work. 3 videos or more the last one doesn't work always.

I am currently testing this on the local-host server and will be moving it to the staging environment soon so i will wait until its on the staging to see if anything changes. hopefully it will work fine then or you might have fixed the bug by then but am currently happy with the way its working.

Thanks for the help