Brightcove AirPlay Plugin

Overview

The Brightcove AirPlay plugin allows you to stream video from your Brightcove Player to high-definition displays with Apple TV. Simply tap the AirPlay icon from Brightcove Player to share movies and videos to your Apple TV or AirPlay 2–enabled smart TV.

Note that the AirPlay icon in the player controlbar, as shown below, will only appear if the following apply:

• Your Brightcove Player is in the Safari browser
• This Brightcove AirPlay plugin has been added to your player
• The Safari built-in Webkit for AirPlay is available

Requirements

The following requirements are needed to use the Brightcove AirPlay plugin:

• Brightcove Player v6.51.4 and newer

How it works

When using the AirPlay plugin with Brightcove Player, requests for media assets are made as follows:

• When using AirPlay, AppleTV or other airplay devices get the manifest url and handle asset downloading
• When using AirPlay mirroring, the player on the sending device makes the video requests and downloads

Implement using Studio

The easiest way to configure your player with the Brightcove AirPlay plugin is with Video Cloud Studio.

1. In Video Cloud Studio, navigate to the Players module.
2. Open an existing player or create a new one.
3. In the left navigation, select Plugins.
4. Expand the Add a Plugin dropdown menu, and select Brightcove Plugin.

   

5. Expand the Brightcove Plugin dropdown menu, and select bc-airplay.

   

6. Select Save.
7. Publish your player by selecting Publish & Embed, and then Publish Changes.

Implement using code

To implement a plugin the player needs to know the location of the plugin code, a stylesheet if needed, the plugin name and plugin configuration options. The location of the plugin code and stylesheet are as follows:

1. Include the plugin code:

   https://players.brightcove.net/videojs-bc-airplay/1/videojs-bc-airplay.js

2. Include the plugin styles:

   https://players.brightcove.net/videojs-bc-airplay/1/videojs-bc-airplay.css

3. Use the plugin name to load it into the player: bcAirplay

4. Here is an example using the Advanced Embed implementation to associate the Playlist Endscreen plugin with a single instance of a player.

   <link href="https://players.brightcove.net/videojs-bc-airplay/2/videojs-bc-airplay.css" rel="stylesheet">
     
     <div style="max-width: 960px;">
     <video-js id="myPlayerID"
       data-account="your account ID"
       data-player="your player ID"
       data-embed="default"
       controls=""
       data-video-id="your video ID"
       data-playlist-id=""
       data-application-id=""
       class="vjs-fluid">
     </video-js>
   </div>
   <script src="https://players.brightcove.net/your account ID/your player ID_default/index.min.js"></script>
   
   <!-- script for the Brightcove AirPlay plugin -->
   <script src="https://players.brightcove.net/videojs-bc-airplay/2/videojs-bc-airplay.js"></script>
   
   <!-- custom script -->
   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
   
       // initialize the Brightcove AirPlay plugin
       myPlayer.bcAirplay(); 
     });
   </script>

Changelog

See the Brightcove AirPlay Plugin Release Notes.