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 videojs-airplay
package that is in no way associated with @silvermine/videojs-airplay
. The
videojs-airplay
module appears to only support VideoJS version 5.x, whereas our
@silvermine/videojs-airplay
module supports VideoJS 6.x.
The @silvermine/videojs-airplay
plugin includes 3 types of assets: javascript, CSS and
images.
You can either build the plugin locally and use the assets that are output from the build process directly, or you can install the plugin as an npm module, include the javascript and SCSS source in your project using a Common-JS module loader and SASS build process, and copy the images from the image source folder to your project.
@silvermine/videojs-airplay
module
using npm install @silvermine/videojs-airplay
.devDependencies
are installed by running npm install
from within the folder you cloned or installed the project.grunt build
to build and copy the javascript, CSS and image files to the
dist
folder.dist
folder into your project as needed.dist/images
folder 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 https://example.com/plugins/images/
.Note: when adding the plugin's javascript to your web page, include the silvermine- videojs-airplay.min.js
javascript file in your HTML after loading Video.js. The
plugin's built javascript file expects there to be a reference to Video.js 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:
plugins.airPlay.addButtonToControlBar
- a boolean
flag 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 true
.plugins.airPlay.buttonPositionIndex
- a zero-based number specifying the index
of the AirPlay button among the control bar's child components (if
addButtonToControlBar
is set to true
). By default the AirPlay Button is added as
the last child of the control bar. A value less than 0 puts the button at the
specified position from the end of the control bar. Note that it's likely not all
child components of the control bar are visible.plugins.airPlay.addAirPlayLabelToButton
(default: false
) - by default, the
AirPlay button component will display only an icon. Setting addAirPlayLabelToButton
to true
will display a label titled "AirPlay"
alongside the default icon.For example:
var options;
options = {
controls: true,
plugins: {
airPlay: {
addButtonToControlBar: false, // defaults to `true`
}
}
};
videojs(document.getElementById('myVideoElement'), options);
Even though there are no configuration options, to enable the plugin you must either
provide an airPlay
entry in the plugins
option as shown above or you must call the
airPlay
plugin function manually:
var player = videojs(document.getElementById('myVideoElement'));
player.airPlay(); // initializes the AirPlay plugin
The AirPlayButton
component has two translated strings: "Start AirPlay" and "AirPlay".
.vjs-control-text
span and as the <button>
element's
title
attribute..vjs-airplay-button-label
span.To localize the AirPlay button text, follow the steps in the Video.js Languages
tutorial to add "Start AirPlay"
and "AirPlay"
keys to the map of
translation strings.
If you are using a module loader such as Browserify or Webpack, first install
@silvermine/videojs-airplay
using npm install
. Then, use
require('@silvermine/videojs-airplay')
to require @silvermine/videojs-airplay
into
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
videojs
:
var videojs = require('video.js');
// Initialize the AirPlay plugin
require('@silvermine/videojs-airplay')(videojs);
Then, follow the steps in the "Configuration" section above.
[!WARNING] This plugin's source code uses ES6+ syntax and keywords, such as
class
andstatic
. If you need to support browsers that do not support newer JavaScript syntax, you will need to use a tool like Babel to transpile and polyfill your code.Alternatively, you can
require('@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.js')
to use a JavaScript file that has already been polyfilled/transpiled down to ES5 compatibility.
If you are using SCSS in your project, you can simply reference the plugin's main SCSS file in your project's SCSS:
@import "path/to/node_modules/@silvermine/videojs-airplay/src/scss/videojs-airplay";
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
"images/ic_airplay_white_24px.svg"
.$icon-airplay--hover
- the path to the icon image that is displayed when the
user hovers over the AirPlay button. Defaults to
"images/ic_airplay_white_24px.svg"
.$airplay-icon-size
- the width and height of the icon (the button and icon is a
square). Defaults to 12px
.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 https://example.com/plugins/images/
.
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.