Silvermine Video.js AirPlay Plugin
What is it?
A plugin for Video.js versions 6+ that adds a button to the control bar that will open the AirPlay menu if it is available on the user's device.
NOTE: there is a
package that is in no way associated with
videojs-airplay module appears to only support VideoJS version 5.x, whereas our
@silvermine/videojs-airplay module supports VideoJS 6.x.
How do I use it?
Building the plugin locally
- Either clone this repository or install the
npm install @silvermine/videojs-airplay.
- Ensure that the project's
devDependenciesare installed by running
npm installfrom within the folder you cloned or installed the project.
- Copy the plugin's files from the
distfolder into your project as needed.
- Ensure that the images in the
dist/imagesfolder are accessible at
./images/, relative to where the plugin's CSS is located. If, for example, your CSS is located at
https://example.com/plugins/silvermine-videojs-airplay.css, then the plugin's images should be located at
window.videojs and will throw an error if it does not exist.
After both Video.js and
@silvermine/videojs-airplay have loaded, follow the steps in the
"Configuration" section below.
Once the plugin has been loaded and registered, add it to your Video.js player using Video.js' plugin configuration option (see the section under the heading "Setting up a Plugin" on Video.js' plugin documentation page. Use these options to configure the plugin:
booleanflag that tells the plugin whether or not it should automatically add the AirPlay button to the Video.js player's control bar component. Defaults to
var options;options =controls: trueplugins:airPlay:addButtonToControlBar: false // defaults to `true`;;
Even though there are no configuration options, to enable the plugin you must either
airPlay entry in the
plugins option as shown above or you must call the
airPlay plugin function manually:
var player = ;player; // initializes the AirPlay plugin
AirPlayButton component has one translated string: "Start AirPlay". The "Start AirPlay" string appears
in both of the standard places for Button component accessibility text: inside the
and as the
To localize the AirPlay button text, follow the steps in the Video.js Languages tutorial
to add a
"Start AirPlay" key to the map of translation strings.
Using the npm module
If you are using a module loader such as Browserify or Webpack, first install
npm install. Then, use
require('@silvermine/videojs-airplay') to require
your project's source code.
require('@silvermine/videojs-airplay') returns a function
that you can use to register the plugin with videojs by passing in a reference to
var videojs = ;// Initialize the AirPlay pluginvideojs;
Then, follow the steps in the "Configuration" section above.
Using the CSS and images
If you are using SCSS in your project, you can simply reference the plugin's main SCSS file in your project's SCSS:
Optionally, you can override the SCSS variables that contain the paths to the icon image files:
$icon-airplay--default- the path to the icon image that is displayed when the AirPlay button is in its normal, default state. Defaults to
$icon-airplay--hover- the path to the icon image that is displayed when the user hovers over the AirPlay button. Defaults to
$airplay-icon-size- the width and height of the icon (the button and icon is a square). Defaults to
The plugin's images are located at
@silvermine/videojs-airplay/src/images. If you have
not overridden the icon image path variables in the SCSS, then copy the images from the
src/images folder to a folder that is accessible at
./images/, relative to where the
plugin's CSS is located. If, for example, your CSS is located at
https://example.com/plugins/silvermine-videojs-airplay.css, then the plugin's images
should be located at
How do I contribute?
We genuinely appreciate external contributions. See our extensive documentation on how to contribute.
This software is released under the MIT license. See the license file for more details.