This package has been deprecated

Package no longer supported. Use at your own risk. Use pure video.js instead.

wjplayer

Video.js bundle that supports HLS, VAST/VMAP/VPAID ads, 360-degree videos, and more.

Build Status bundlephobia npm npm David David

DEMO

What’s included

Video.js 5

Video.js plugins

HLS plugins

Other plugins

Plugins dependencies

Testing

npm install
npm start

index.html with the list of examples will be opened in your browser.

Usage

<link href="path/to/wjplayer/dist/wjplayer.css" rel="stylesheet">

<!-- If you need ads in your videos, include ima sdk first -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>


<!-- HLS support using videojs-contrib-hls -->
<script src="path/to/wjplayer/dist/wjplayer.js"></script>

<!-- OR  -->

<!-- HLS support using hls.js  -->
<script src="path/to/wjplayer/dist/wjplayer-hls-js.js"></script>

To enable 360-degree video support add these includes:

<link rel="stylesheet" href="/path/to/wjplayer/dist/wjplayer-360.css">
<script src="path/to/wjplayer/dist/wjplayer-360.js"></script>

Place a container in your html:

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

and pass its id and the list of sources to wjplayer.

Examples

Create a player instance

var player = wjplayer({
  containerId: 'player-container',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }, {
    src: '//vjs.zencdn.net/v/oceans.ogv',
    type: 'video/ogg'
  }]
);

HLS

var player = wjplayer({
  containerId: 'player-container',
  sources: [{
    src: 'path-to-video.m3u8',
    type: 'application/x-mpegURL'
  }]
});
player.reloadSourceOnError(); // init `reloadSourceOnError` plugin (part of videjs-contrib-hls)

Specify resolution and label of each source

var player = wjplayer({
  containerId: 'player-container',
  defaultQuality: 'high',
  // sourcesWithRes array will be passed to videojs-resolution-switcher
  sourcesWithRes: [
  {
    src: 'path-to-video-low-quality.m3u8',
    type: 'application/x-mpegURL',
    res: 360,
    label: 'SD'
  },
  {
    src: 'path-to-video-high-quality.m3u8',
    type: 'application/x-mpegURL',
    res: 720,
    label: 'HD'
  }]
});

Create an audio player

var audioPlayer = wjplayer({
  containerId: 'player-container',
  playerType: 'audio',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp3',
    type: 'video/mp3'
  }]
});

Insert ads

var player = wjplayer({
  containerId: 'player-container',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }],
  ads: {
    adTagUrl: '//example.com/vmap.xml'
  }
});

Send player events to Google Analytics

var player = wjplayer({
  containerId: 'player-container',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }]
);
player.ga({
  percentsPlayedInterval: 10,
  secondsPlayedMoments: [10, 30, 60, 3 * 60, 5 * 60],
  percentsPlayedInterval: 25,
  sendGaEventDirectly: true
});

360° video

var player = wjplayer({
  containerId: 'player-container',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }],
  panorama: {
    clickAndDrag: true,
    clickToToggle: true,
    autoMobileOrientation: true
  }
});

Custom skin

var player = wjplayer({
  containerId: 'player-container',
  // Skin name.
  // In this case 'vjs-custom-skin' class will be assigned to player.
  // 'vjs-default-skin' is used by default.
  skin: 'custom',
  sources: [{
    src: '//vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }]
});

CSS class ‘vjs-custom-skin’ will be assigned to player, so your can include your CSS file

<link href="path/to/skins/custom.css" rel="stylesheet">

and customize the player appearence using .vjs-custom-skin class.

Your can find links to some Video.js skins in video.js wiki.

API Reference

wjplayer()

Creates a new player and places it to container with the specified id.

Parameters

options: Object, Configuration options.

Returns: Object, the videojs player instance object.

Compatible

Browser IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android Phone Chrome for Android Tablet  
Live x n/a o о o o o o o о o  
with ads o n/a o оo o oo r1 x oo о o  
HLS master x n/a x x o x o x x o o  
HLS by resolution x n/a o о o о o x oo o o  
MP4 o n/a o оo o oo o x oo o o  
HLS and MP4 x n/a x x o x o x oo о o  
Stretch o n/a o о o o p1 x x x v1  
MP3 o n/a o o o о o x oo o o  
360° MP4 x n/a x o o o x x oo x o  

Notes:

Contributing

wjplayer is a free and open source library, and we appreciate any help you’re willing to give. Check out the contributing guide.

License

wjplayer is licensed under the MIT License. View the license file

Similar projects