Video

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video , Interactivity & Misc ) Change | Credits ##Sections

1. Video options
2. Using the Video Extension
3. JW Player
4. Flow Player
5. Add a player to the video extension
6. Controlling HTML5 video without the video extension

##Video Options

• resumeOnVideoEnd : true

• This option works on videos supported by the video extension and for videos contained inside the slider.

• If this option is true and the slideshow is actively playing and a supported video is playing, the slideshow will pause until the video has completed.

• If false, the slideshow will continue to run even if a video is playing.

• It may be possible to add this functionality for other video types, but they must have a javascript API to pass information from the video player to javascript.

• addWmodeToObject : "opaque"

• If your slider has an embedded object, the script will automatically add a wmode parameter with this setting

• Change this option to "transparent" if you have images or elements that overlap the video.

• isVideoPlaying : function(base){ return false; }

• This function gets replaced by the video extension, but you can add your own custom function if you aren't using the video extension and want to pause the slideshow under certain conditions.

• The function must return true if the video is playing. When it does the slideshow pause.

• The function must return false before the slideshow will continue to play.

• This function is called at an interval that is half of the delay option value (e.g. if delay is 3000, the interval will be 1500 milliseconds).

##Using the Video Extension

If you include the video extension script in the header of your page, it is set up to automatically initialize once the window has completely loaded. You may see the video reset/reload at this point because the script needs to update the video to activate the javascript interface (API).

<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>

By default, the video extension works with HTML5, Vimeo and YouTube videos but please refer to the compatibility table on the video demo page for supported formats and other problems.

##JW Player

• Coming Soon!

##Flow Player

• You can stop a slideshow if a flowplayer video is started using this code:

$f("vid", "flowplayer-3.2.1.swf", {
 clip: {
  autoPlay: false,
  autoBuffering: true,
  onStart: function(clip) {
   $('#slider').data('AnythingSlider').startStop(false);
  }
 }
});

• More Coming Soon!

##Add a player to the video extension

• Coming Soon!

##Controlling HTML5 video without the video extension

I set up a demo here. Basically it uses the slide init and complete callbacks to pause or play the video. It will also pause the slideshow while the video is playing. Here is the code to add:

$('#slider').anythingSlider({
    // 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 if already started
    onSlideComplete: function(slider) {
        var vid = slider.$currentPage.find('video');
        if (vid.length && typeof(vid[0].pause) !== 'undefined' && vid[0].paused && vid[0].currentTime > 0 && !vid[0].ended) {
            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) ? true : false;
    }
});

Note: the onSlideComplete callback is the only callback without an event "e" variable available.

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Video , Interactivity & Misc ) Change | Credits