Video.js bundle that supports HLS, VAST/VMAP/VPAID ads, 360-degree videos, and more.
npm install
npm start
index.html with the list of examples will be opened in your browser.
<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.
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.
Creates a new player and places it to container with the specified id.
Parameters
options: Object, Configuration options.
options.containerId: String, REQUIRED id of the container
where player shoud be inserted (appendChild() will be used)
options.sources: Array, REQUIRED IF sourcesWithRes IS NOT PROVIDED
Array of sources to pass to player.src()
options.sourcesWithRes: Array, REQUIRED IF sources IS NOT PROVIDED
Array of sources to pass to player.updateSrc()
options.playerId: String, id to assign to the player element.
Defaults to "player"
options.playerType: String, "video" or "audio"
Defaults to "video"
options.defaultQuality: String | Number, "low", "high" or Number
options.pathToSwf: String, Path to flash player file (will be passed to videojs as videojs.options.flash.swf)
options.locale: String, If specified, will be set as player and ads locale.
This may be any ISO 639-1 (two-letter) code.
options.autoplay: Boolean, Defaults to false
options.controls: Boolean, Defaults to true
options.loop: Boolean, The loop attribute causes the video to start over as soon as it ends.
Defaults to false
options.preload: String, Defaults to "metadata"
options.poster: String, The width attribute sets the display width of the video (in pixels).
This will take effect only if options.classes param is set
(vjs-fill class, used by defaults, sets player width and height to 100%).
options.width: Number, The height attribute sets the display height of the video (in pixels).
options.height: Number, Player height
options.videojs: Object, Any additilnal ptions to pass to videojs.
options.muted: Boolean, Indicates whether the player should be muted by default.
Defaults to false
options.playsinline: Boolean, Indicated whether the video should be allowed to play inline,
and will not automatically enter fullscreen mode when playback begins.
@see https://webkit.org/blog/6784/new-video-policies-for-ios/
Defaults to false.
options.skin: String, Skin name.
Defaults to "default"
options.classes: Array, CSS classnames to assign to the player in addition to video-js.
By default, the following classes are used:
['vjs-default-skin', 'vjs-fill', 'vjs-big-play-centered']
options.stretch: Boolean, Indicates whether video should stretch to fit the container.
Defaults to false
options.playOnClick If true, click/touch event on player will start/stop the playback even if controls are disabled. Defaults to false
options.downloadButton: Boolean | Object, Indicates whether a download button should be shown in control bar.
options.downloadButton.text: String, Button title.
Defaults to "Download"
options.volumeStyle: String, "horizontal" or "vertical".
Defaults to "vertical"
options.panorama: Boolean | Object, Used for pamoramic (360-degree) videos.
Pass true or options object for videojs-panorama plugin
options.crossorigin: String, Used with videojs-panorama plugin.
Pass "anonymous" to avoid cross domain issue
(will work on Chrome and Firefox, not Safari)
options.ads: Object, Settings for videojs-ima plugin.
options.ads.adTagUrl: String, Tag url. The only requried setting here.
options.ads.adLabel: String, Replaces the "Advertisement" text in the ad label.
options.ads.showControlsForJSAds: Boolean, Defaults to false
options.share: Object, Will be passed to videojs-share plugin.
options.share.socials: Array, List of social networks. See vanilla-sharing for details.
options.share.url: String, This is the URL that points to your custom web page
which has your video and the meta tags for sharing.
Defaults to the current page url.
options.share.embedCode: String, Iframe embed code for sharing the video.
Defaults to iframe with the current page url specified as src.
options.share.title: String, Title to share.
options.share.description: String, Description to share.
options.share.image: String, Image to share.
Defaults to options.poster.
options.share.fbAppId: String, Required for share to Facebook.
options.share.redirectUri: String, Defaults to ${url}#close_window.
options.enableHlsSupport: Boolean, Set to false in order to disable any workarounds etc. that are required to make HLS support a reality.
(e.g. stops forcing flash on IE11 and brings back videoJsResolutionSwitcher + ads)
Defaults to true
Returns: Object, the videojs player instance object.
| 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 |
wjplayer is a free and open source library, and we appreciate any help you're willing to give. Check out the contributing guide.
wjplayer is licensed under the MIT License. View the license file
FAQs
Video.js HLS bundle that supports VAST/VMAP ads, 360-degree videos, and more
We found that wjplayer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.