Skip to content

Video

Jump to bottom Edit New page
Mottie edited this page Dec 13, 2012 · 28 revisions

Sections: Video options | Using the Extension | JW Player | Flow Player | HTML5 video (no extension) | Add player to 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.

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.

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, 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 - download both 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 = "jwplayer/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

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",

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

Add a player to the video extension

  • Coming Soon!
Add a custom footer
Clone this wiki locally