Skip to content

cnico/videojs-playLists

 
 

Repository files navigation

#videojs-playlists

Sexy Playlists for VideoJS.

##Installation

###Bower

bower install videojs-playlists

###Manual Download

##Usage

Initialize playList

In order to initialize playList you need to pass an array of videos with this structure:

videos = [
  {
    src : [
      'http://stream.flowplayer.org/bauhaus/624x260.webm',
      'http://stream.flowplayer.org/bauhaus/624x260.mp4',
      'http://stream.flowplayer.org/bauhaus/624x260.ogv'
    ],
    poster : '',
    title : 'Whales'
  },
  {
    src : [
      'http://vjs.zencdn.net/v/oceans.mp4',
      'http://vjs.zencdn.net/v/oceans.webm'
    ],
    poster : 'http://www.videojs.com/img/poster.jpg',
    title : 'Ocean'
  }
];

Now, when videos plays they automatically jump to the next one. You also gain a couple of methods

Jump to video

Use player.playList(index) to jump to a video into the playlist.

next

VideoJS receives a next() function which put in place the next video.

prev

VideoJS receives a prev() function which put in place the previous video.

Events

NameDescription
nextFired when you use the `next()` function or when one video finish and the next starts.
prevFired when you use the `prev()` function.
lastVideoEndedFired when the playlist has finished.

A demo is now available to showcase what you can create with this plugin.

##Pending

Pass video parameter to next and prev events. That should need to rewrite the trigger function from videojs since doesn't allow passing events.

As a workaround, the player.pl.current is updated with the actual index and player.pl.currentVideo contains the video object.

##Development

###Requirements

  • node and npm
  • bower npm install -g bower
  • grunt npm install -g grunt-cli

###Setup

  • npm install
  • bower install

###Run

grunt dev

or for just running tests on file changes:

grunt ci

###Tests

grunt mocha

About

VideoJS playlists done right!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 79.9%
  • HTML 20.1%