Code Examples

Initialization

Single Player

HTML

<div id="player"></div>

JS

var wjs = require("wcjs-player");
var player = new wjs("#player").addPlayer();

(demo app of single player)

Multiple Players

HTML

<div id="player1"></div>
<div id="player2"></div>

JS

var wjs = require("wcjs-player");
var player = new wjs("#player1").addPlayer();
var player2 = new wjs("#player2").addPlayer();

JS (alternative, using multiscreen feature)

var wjs = require("wcjs-player");
var player = new wjs("#player1").addPlayer({ multiscreen: true });
var player2 = new wjs("#player2").addPlayer({ multiscreen: true });

(demo app of multiscreen feature)

Creating a Playlist

There are three different ways to create a playlist with the .addPlaylist() function.

Method One (passing a string)

player.addPlaylist("http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");
player.addPlaylist("http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4");
player.addPlaylist("http://archive.org/download/popeye_patriotic_popeye/popeye_patriotic_popeye.ogv");
player.play();

Method Two (passing an array)

player.addPlaylist([
    "http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4",
    "http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4",
    "http://archive.org/download/popeye_patriotic_popeye/popeye_patriotic_popeye.ogv"
]);
player.play();

Method Three (passing an object)

This method is useful if you also want to declare specific parameters for each playlist item (such as vlcArgs)

player.addPlaylist({
    url: "http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4"
});
player.addPlaylist({
    url: "http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4"
});
player.addPlaylist({
    url: "http://archive.org/download/popeye_patriotic_popeye/popeye_patriotic_popeye.ogv"
});
player.play();

Event Listeners

player.onState(function(state) { console.log("current state: "+state); });
player.onBuffering(function(percent) { console.log("buffering "+percent+"%"); });
player.onPosition(function(pos) { console.log("current position: "+pos); }); // from 0.0 to 1.0
player.onTime(function(t) { console.log("current time: "+t); }); // in milliseconds
player.onMediaChanged(function() { console.log("media item has changed"); });
player.onIdle(function() { console.log("player is idle"); });
player.onOpening(function() { console.log("opening a video"); });
player.onPlaying(function() { console.log("playing"); });
player.onPaused(function() { console.log("paused"); });
player.onError(function() { console.log("error occurred"); });
player.onEnded(function() { console.log("end reached"); });
player.onStopped(function() { console.log("player has stopped"); });
player.onForward(function() { console.log("fastforwarding"); });
player.onBackward(function() { console.log("going backwards through the media"); }); // input must support backwards playback