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

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, you need to add the video containers to the slider

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

Then define the flash player, a list of videos you want to add and set up the videos. 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
// ***********************
// ** please use your own copy of JW Player and not the one listed below **
var flashplayer = "http://player.longtailvideo.com/player.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() === '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",
  // 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() === 'PLAYING') {
        return true;
      }
    }
    return false;
  }
});

##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