Contact Support | System Status
Page Contents

    Brightcove AirPlay Plugin

    In this topic, you will learn how to use the Brightcove AirPlay plugin to stream content from Brightcove Player to your Apple TV.

    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
    AirPlay icon
    AirPlay icon

    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.
      Brightcove Plugin
      Brightcove Plugin
    5. Expand the Brightcove Plugin dropdown menu, and select bc-airplay.
      AirPlay Plugin
      AirPlay Plugin
    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/1/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/1/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.


    Page last updated on 29 Sep 2021