silvermine/videojs-airplay

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 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.

How do I use it?

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.

Building the plugin locally

1. Either clone this repository or install the @silvermine/videojs-airplay module using npm install @silvermine/videojs-airplay.
2. Ensure that the project's devDependencies are installed by running npm install from within the folder you cloned or installed the project.
3. Run grunt build to build and copy the javascript, CSS and image files to the dist folder.
4. Copy the plugin's files from the dist folder into your project as needed.
5. Ensure that the images in the 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.

Configuration

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

Localization

The AirPlayButton component has two translated strings: "Start AirPlay" and "AirPlay".

• The "Start AirPlay" string appears in both of the standard places for Button component text: inside the .vjs-control-text span and as the <button> element's title attribute.
• The "AirPlay" string appears in an optional label within the Button component: inside the .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.

Using the npm module

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 and static. 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.

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:

@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.

Images

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/.

How do I contribute?

We genuinely appreciate external contributions. See our extensive documentation on how to contribute.

License

This software is released under the MIT license. See the license file for more details.

videojs-airplay's Issues

Can't resolve underscore

videojs-airplay/src/js/enableAirPlay.js

Line 8 in c1b783a

_ = require('underscore');

You are requiring underscore but it is not listed as a dependency in your package.json. Is this plugin still maintained? Thanks.

Airplay is not working when clicked

this is an example: http://rs.vod-platform.net/salloum/

it tries to load but nothing happens.

we are using videojs 6 and hls contrib 5.14

Airplay is not working in some browsers - videojs-7.6.6

Hi guys, how are you ?

we are using the last version of videojs, 7.6.6 version.

is videojs-airplay working fine with that version ?
because we tried in some browsers, and it doesn't work in all!
ex: we tried in Safari, the button showed up, but when we click on it, nothing happens.

Add option to disable automatic insertion of AirPlay button into the player's control bar

We should add a configuration option that allows users to disable the automatic insertion of the AirPlay button into the player's control bar.

Plugin users may want to specify where the AirPlay button appears in the player UI's component hierarchy using Video.js configuration options. With the way the plugin is now, the AirPlay button will be inserted into the control bar if the plugin does not find it at the root level of the controlBar component. If a plugin user specifies the AirPlay button to appear nested within an element in the controlBar, for example, the plugin will insert another AirPlay button at the root controlBar level.

Loading "Gruntfile.js" tasks...ERROR

I run into problems in "Building the plugin locally" steps 2 & 3.

I've just cloned the repository and ran into this:

npm install

> [email protected] install /home/runcloud/webapps/kuu/kato/videojs-airplay-master/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.1/linux-x64-57_binding.node
Download complete .] - :
Binary saved to /home/runcloud/webapps/kuu/kato/videojs-airplay-master/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /home/runcloud/.npm/node-sass/4.13.1/linux-x64-57_binding.node

> [email protected] postinstall /home/runcloud/webapps/kuu/kato/videojs-airplay-master/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /home/runcloud/webapps/kuu/kato/videojs-airplay-master/node_modules/node-sass
> node scripts/build.js

Binary found at /home/runcloud/webapps/kuu/kato/videojs-airplay-master/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> @silvermine/[email protected] prepublish /home/runcloud/webapps/kuu/kato/videojs-airplay-master
> grunt build

fatal: not a git repository (or any of the parent directories): .git
Loading "Gruntfile.js" tasks...ERROR
>> Error: Command failed: git describe --always --dirty --tags
>> fatal: not a git repository (or any of the parent directories): .git
Warning: Task "build" not found. Use --force to continue.

Aborted due to warnings.
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! @silvermine/[email protected] prepublish: `grunt build`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the @silvermine/[email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runcloud/.npm/_logs/2020-12-17T11_24_34_961Z-debug.log

grunt build
module.js:550
    throw err;
    ^

As for step 3.

grunt build

Error: Cannot find module 'findup-sync'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/lib/nodejs/grunt-cli/bin/grunt:8:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

FYI:

uname -a
Linux kuu 4.15.0-99-generic #100-Ubuntu SMP Wed Apr 22 20:32:56 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

The log file:
2020-12-17T11_26_14_504Z-debug.log

Thank you.

AirPlay fails for FairPlay protected content

While videojs-airplay works fine for unprotected content - great work on that - it fails for me when I am trying to send FairPlay protected content that is being played back by videojs-contrib-eme.

In this case, audio starts playing back on the AppleTV I am sending to, but video is still being shown only on the source device.

Not sure whose responsibility this is as the documentation on the inner workings of AirPlay is quite sparse.

player.paused() = true while playing via Airplay

I'm using Brightcove + videojs-airplay. When I send the video to Airplay output, the big play button appears over the "This video is playing on 'X'" message, and the player emits a "paused" event.

While the video is playing on the AppleTV, I can call player.paused() and the result is true.

Is this expected behaviour?

I see that there's no incidence of "pause" in the videojs-airplay code.

Hmm, this sounds similar:

• https://forums.developer.apple.com/thread/92375

More frequent releases | Create a new tag

@jthomerson @yokuze @izkmdz

I'd like to see more frequent releases. Majority of the time PRs get merged but no new tags are created. As a user I occasionally mention maintainers in issues/PRs in the hope they see it, but lots of times it takes months before even gets noticed or delegated to the right person, and even longer before it gets merged.

With new fixes/changes in the current master branch, it would be very much appreciated if a maintainer could create a new tag.

Note
The same goes for silvermine/videojs-chromecast

Android WebView: Cannot convert a Symbol value to a string

Same issue as zloirock/core-js#1292, babel/babel#16219.

It seems to exclusively occur in Android WebView, even though theoretically that should be nearly identical to the latest version of Chrome. (Currently I have 1.20.x vs Chrome at 1.21.x, but it makes no difference in regular Android Chrome.)

Should be fixed by babel/babel#16225, available in v7.23.9

Something along these lines suffices to run grunt build, but the end result doesn't appear to be completely correct for Video.js purposes. Hopefully it's a quick fix for someone who knows what they're doing. ;-)

@babel/core": "7.23.9", is for the bug fix, "grunt-contrib-uglify": "5.2.1", is because older than v2 doesn't support keywords like const, which apparently doesn't play together with the newer babel/core.

diff --git a/package.json b/package.json
index ae16f82..1bc4728 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
   },
   "homepage": "https://github.com/silvermine/videojs-airplay#readme",
   "devDependencies": {
-    "@babel/core": "7.21.0",
+    "@babel/core": "7.23.9",
     "@babel/preset-env": "7.20.2",
     "@silvermine/eslint-config": "3.0.1",
     "@silvermine/standardization": "2.2.1",
@@ -43,7 +43,7 @@
     "babel-eslint": "10.1.0",
     "babelify": "10.0.0",
     "check-node-version": "4.0.2",
-    "core-js": "3.28.0",
+    "core-js": "3.35.1",
     "coveralls": "3.0.2",
     "eslint": "6.8.0",
     "expect.js": "0.3.1",
@@ -51,7 +51,7 @@
     "grunt-browserify": "5.3.0",
     "grunt-contrib-clean": "1.1.0",
     "grunt-contrib-copy": "1.0.0",
-    "grunt-contrib-uglify": "3.0.1",
+    "grunt-contrib-uglify": "5.2.1",
     "grunt-contrib-watch": "1.1.0",
     "grunt-postcss": "0.9.0",
     "grunt-sass": "3.1.0",

videojs.extend has been removed from VideoJS v8

Will there be an update to move toward E6 classes to replace the videojs.extend method?

Support localized control text for the AirPlay button

Currently, the AirPlay plugin allows you to pass a string literal option called buttonText that becomes the button's .vjs-control-text text. However, the AirPlay Button component overrides the createControlTextEl method and does not add the aria-label to the button as its parent does.

A simpler method would be to call this.controlText('Start AirPlay') from the constructor, and let the Button component handle adding the control text. This has the added advantage of integrating with Video.js' localization API.

Airplay not working with overrideNative : true

I am using @silvermine/airplay library for casting. I am facing issue while connecting to airplay. It immediately disconnects if I am casting with overrideNative flag set to true.

I have set the overrideNative:true as without this I am unable to get the 'vhs' inside the tech Object present in player instance, which is required to get the available resolutions.

videojs version: 7.20.3
silvermine/airplay version: 1.1.0
Configuration:

html5: {
        vhs: {
          overrideNative: false
        },
}

How to solve the warn log?

Users of the library are seeing this warning in the browser console:
VIDEOJS: WARN: videojs.extend is deprecated as of Video.js 7.22.0 and will be removed in Video.js 8.0.0

How to solve the warn log? Thx~

Airplay 2 support

hello, any plans to support airplay 2?

How to debug immediate disconnect

The airplay button opens a menu with the available devices on my wifi, but after selecting a target device, the video player only displays the "Airplay" logo on black background for a second or so, until returning to the in-browser video player.

From Youtube in the same browser, I can connect just fine, so I assume I need to adjust some configuration in my implementation - but without any error messages, I don't know where to start digging. Is there a way to get some feedback on what went wrong during the connection attempt?

package not found on npm

 npm install silvermine-videojs-airplay --save
npm ERR! code E404
npm ERR! 404 Not Found: silvermine-videojs-airplay@latest

Is it still available?

Perform a release

There's been several commits to this repo since the 1.0.0 release in April 2018.

Why hasn't a release been published to npm?

underscore.js dependency for a single extend call is overkill

This is a runtime dependency and has to be downloaded, extracted, parsed by every enduser.

Please replace the extend call with Object.assign or some other plain method and drop the dependency.

Text tracks not working

Hi everyone,
could someone help me how to make text tracks working on airplay?
The problem is that I'm not able to see text tracks in the airplay subtitles option.

I'm using .vtt subtitles, which are working on Chrome browser or iOS (Safari) devices.

Thanks a lot!

webkitplaybacktargetavailabilitychanged listener is not removed when AirPlayButton is disposed

The event listener is not removed when the AirPlayButton is disposed, so if the event is raised, AirPlayButton tries to hide or show itself, but this._el is null and an error is throw.

Add support for 'buttonPositionIndex' like the chromecast plugin

The option to specify the location of the airplay button would be nice. You could use the same logic as for the Chromecast plugin.

Could you add that option also in the airplay plugin?

Update "peerDependencies" for compatibility with Video.js 7

Currently, the peerDependencies setting in package.json includes only Video.js version 6.x, but this plugin is also compatible with 7.x. Please update the peerDependencies setting and the README to reflect this.

Can't get the plugin

npm install sil... (error 404)

grunt build

fatal: Not a git repository (or any of the parent directories): .git
Loading "Gruntfile.js" tasks...ERROR

Error: Command failed: git describe --always --dirty --tags
fatal: Not a git repository (or any of the parent directories): .git

any fix? can you make the dist available on a CDN?