Video

Core 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.

resumeOnVisible (true)

When true, the video will resume playing but only if it was previously paused; except for the known issue with YouTube iframes.
If false, the video remains paused when the video comes back into view.
There is one exception. When AnythingSlider has the mode option set to fade, setting this option to false will use jQuery's fadeOut function. Once the fadeOut animation has completed, the panel is set to display: none. This will reset any embedded objects within the slide, such as videos or embedded games. See this demo.

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).

addWmodeToObject ("opaque")

This option has been deprecated it has been replaced by the anythingSliderVideo option wmode
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.

Video Extension Options (new v1.9)

onVideoInitialized (null)

This callback function is called after the video extension has initialized.
The function is passed a base parameter function(base){} which is the same as using $('#slider').data('AnythingSlider').
All video functions are contained in base.video and video options are contained within base.video.options.

videoId ("asvideo")

This option contains the ID prefix added to each video set up by the video extension.
An id is needed for most video apis.
The suffix added to this is a number which increments with each supported video on the page.

wmode ("opaque")

This option replaces the addWmodeToObject option set in the AnythingSlider plugin core.
It is used to set the wmode of both embedded and iframe videos.
Embedded objects have numerous wmode settings, which are likely ignored in iframe and HTML5 video.

youtubeAutoLoad (true)

When this option is true, if YouTube iframe videos are included within AnythingSlider, it will automatically load the YouTube iframe API from http://www.youtube.com/iframe_api.
Setting this option to false, you will need to manually load (include the iframe api in the document head) if the YouTube iframe video is expected to pause & play as expected.

youtubeParams

When YouTube iframes are within the slider, the YouTube iframe api is loaded and rebuilds the iframe using the parameters from this option

Default parameters include:

youtubeParams   : {
  modestbranding : 1, // only show the transparent YouTube logo when hovering over the video
  iv_load_policy : 3, // hide annotations
  fs : 1              // allow fullscreen
}

Add any of the available iframe parameters (playlists, etc) found in this reference.

Using the Video Extension

Include the video extension script in the header of your page after loading the AnythingSlider script. Then initialize both - the video extension prior to v1.9 automatically initialized on page load.

<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css" media="screen" />
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>

<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<script>
$(function(){
  $('#slider')
    .anythingSlider({
      /* include AnythingSlider options */
    })
    // initialize the video extension, as desired (new v1.9)
    .anythingSliderVideo({
      // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
      videoId         : 'asvideo',
      // this option replaces the `addWmodeToObject` option in the main plugin
      wmode           : "opaque",
      // auto load YouTube api script
      youtubeAutoLoad : true,
      // YouTube iframe parameters, for a full list see:
      // https://developers.google.com/youtube/player_parameters#Parameters
      youtubeParams   : {
        modestbranding : 1,
        iv_load_policy : 3,
        fs : 1,
        wmode: 'opaque' // this is set by the wmode option above, so no need to include it here
      }
    });
});
</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

(updated for v7+ on 12/19/2016)

I set up a demo here showing you how to control a JW Player video. The code will use the slide init and complete callbacks to pause or play the video. It will also pause the slideshow while the video is playing.

But first, make sure you load in the jwplayer javascript in the head of your document and have a copy of the player.swf on your site - get, or point to the latest version from here.

<script src="jwplayer/jwplayer.js"></script>

Now set up the video containers in the slider

<ul id="slider">
  <li><div id="container1"></div></li>
  <li><div id="container2"></div></li>
</ul>

Then define the flash player url, a list of videos you want to add and set them up. You could also add the videos using SWFObject (docs), but this example still needs the list of videos (at least the container IDs in an array):

// Make a list of videos first
// ***********************
var flashplayer = "https://cdn.jsdelivr.net/jwplayer/7.1.4/jwplayer.flash.swf",
    videos = [];

// add videos as follows: videos.push([ id, file, image, height, width ]);
videos.push([
  "container1",
  "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
  "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
  300,
  200
]);

// using the same video for demo purposes ( because I'm lazy :P )
videos.push([
  "container2",
  "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
  "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
  300,
  200
]);

// Set up players
$.each(videos, function(i, v) {
  jwplayer(v[0]).setup({
    file: v[1],
    flashplayer: flashplayer,
    image: v[2],
    height: v[3],
    width: v[4]
  });
});

Finally, we can set up AnythingSlider using this code:

// Set up AnythingSlider
$('#slider').anythingSlider({
  // pause all videos when changing slides
  onSlideInit: function(e, slider) {
    if (jwplayer) {
      $.each(videos, function(i) {
        jwplayer(i).pause(true);
      });
    }
  },
  // Only play a paused video when a slide comes into view
  onSlideComplete: function(slider) {
    if (jwplayer) {
      $.each(videos, function(i, v) {
        // find ID in panel - if there are two videos in the same panel,
        // both will start playing!
        if (
          slider.$currentPage.find('#' + v[0]).length &&
          jwplayer(v[0]).getState().toUpperCase() === 'PAUSED'
        ) {
          jwplayer(v[0]).play();
        }
      });
    }
  },
  // *********** Video ***********
  // this DOES NOTHING because JW player is set up outside of AnythingSlider,
  // use SWFObject if you need to
  addWmodeToObject: "opaque", // deprecated option anyway ;)
  // return true if video is playing or false if not
  isVideoPlaying: function(slider) {
    if (jwplayer) {
      // jwplayer object is wrapped in #{id}_wrapper
      var vid = slider.$currentPage.find('[id$=_wrapper]'),
      jwid = (vid.length) ? vid.attr('id').replace(/_wrapper/, '') : '';
      if (
        vid.find('#' + jwid).length &&
        jwplayer(jwid).getState().toUpperCase() === 'PLAYING'
      ) {
        return true;
      }
    }
    return false;
  }
});

Flow Player

I set up a demo here showing you how to control a Flowplayer video. The code will use the slide init and complete callbacks to pause or play the video. It will also pause the slideshow while the video is playing.

But first, make sure you have the flowplayer.swf and flowplayer-3.2.6.min.js on your server. Then load in the Flowplayer javascript api script in the head of your document - download both from here.

<script src="flowplayer/flowplayer-3.2.6.min.js"></script>

Now set up the videos in the slider

<ul id="slider">
  <li><a class="flowplayer" href="myvideo1.flv"></a></li>
  <li><a class="flowplayer" href="myvideo2.flv"></a></li>
</ul>

Then initialize the player:

// Set up players
// ***********************
flowplayer('a.flowplayer', 'flowplayer/flowplayer-3.2.7.swf', {
  clip: {
    autoPlay: false
  }
});

Finally, we can set up AnythingSlider using this code:

// Set up AnythingSlider
$('#slider').anythingSlider({

  // pause all videos when changing slides
  onSlideInit: function(e, slider) {
    if ($f) {
      $f("*").each(function() {
        if (this.isPlaying()) {
          this.pause();
        }
      });
    }
  },

  // Only play a paused video when a slide comes into view
  onSlideComplete: function(slider) {
    if ($f) {
      slider.$currentPage.find('.flowplayer').flowplayer().each(function() {
        if (this.isPaused()) {
          this.play();
        }
      });
    }
  },

  // *********** Video ***********
  // this DOES NOTHING because flowplayer is set up outside of AnythingSlider
  addWmodeToObject: "opaque", // deprecated option anyway ;)

  // return true if video is playing or false if not
  isVideoPlaying: function(slider) {
    var playing = false;
    if ($f) {
      slider.$currentPage.find('.flowplayer').flowplayer().each(function() {
        if (this.isPlaying()) {
          playing = true;
        }
      });
    }
    return playing;
  }
});

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.

VideoJS

Check out this demo showing you how to control a VideoJS video. The code will use the slide init and complete callbacks to pause or play the video. It will also pause the slideshow while the video is playing.

But first, make sure you load in the videoJS code in the head of your document - download both from here.

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Now set up the videos in the slider. Make sure you include an id for the video and the class name video-js.

<ul id="slider">
  <li>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="none" width="320" height="240" data-setup="{}">
      <source src="video/movie.ogg" type="video/ogg"/>
      <source src="movie.mp4" type="video/mp4"/>
      <source src="movie.webm" type="video/webm"/>
      Your browser does not support the video tag. But you could include an iframe/embeded video here.
    </video>
  </li>
</ul>

Now we just need to set up a "list" of videos within the slider(s). Make sure the ID on the left of the colon matchs the ID inside the videojs code on the right:

var myPlayer = {
    "my_video_1" : _V_("my_video_1"),
    "my_video_2" : _V_("my_video_2")
};

Now we can set up AnythingSlider:

$('#slider').anythingSlider({
    // pause ALL videos when changing slides
    onSlideInit: function (e, slider) {
        for (var vid in myPlayer) {
            myPlayer[vid].pause();
        }
    },
    // Only play a paused video when a slide comes into view
    onSlideComplete: function (slider) {
        // the video gets wrapped in a div with the same ID
        var video = slider.$currentPage.find('div.video-js'),
            vid = video.attr('id');
        // check if video exists & check if paused
        if (video.length && myPlayer[vid] && myPlayer[vid].paused()) {
            // if already completed, the time resets to zero like the video was paused at the beginning
            myPlayer[vid].play();
        }
    },
    // return true if video is playing or false if not
    isVideoPlaying: function (slider) {
        var video = slider.$currentPage.find('div.video-js'),
            vid = video.attr('id');
        if (video.length && myPlayer[vid] && !myPlayer[vid].paused()) {
            return true;
        }
        return false;
    }
});

Add a player to the video extension

Coming Soon!

Home
FAQ
Setup
Usage
- Appearance
- Navigation
- Slideshow
- Callbacks
- Video
- Audio
- FX
- Interactivity
Themes
Change
Credits

Provide feedback

Saved searches

Use saved searches to filter your results more quickly