Looking for the old docs? Go here

API

Remote Playback

An overview on requesting and tracking remote playback.

The player supports playing on a remote device such as a TV when AirPlay or Google Cast are available. You can request remote playback by using the AirPlayButton, GoogleCastButton, remote control or via methods on the player instance.

The entire remote playback request process is async and lazy loaded to avoid bloating the player library and your application:

  1. The Google Cast framework is lazy loaded only on request.
  2. Once the framework is loaded, the cast prompt is shown.
  3. When a cast receiver device is selected by the user, the GoogleCastProvider is lazy loaded and switched with current provider. The remote cast player is set to the correct state with respect to paused, time, muted, captions, etc. A provider change and setup event is fired in this process.
  4. When the casting session ends, the GoogleCastProvider is destroyed.
  5. The previous provider is created and set back to its original state. A provider change and setup event is fired in this process.
    
    
INFO

AirPlay does not require loading any framework as it’s supported directly on the <audio> and <video> element via the Remote Playback API.

The media remote provides methods for dispatching media-airplay-request and media-google-cast-request request events like so:

    
    

The following requestAirPlay() and requestGoogleCast() methods are available on the player component instance for requesting remote playback:

ts
    
    
ts
    
    

The following remote playback properties are available on the media store:

  • canAirPlay: Whether AirPlay is supported.
  • canGoogleCast: Whether Google Cast is supported.
  • remotePlaybackState: Current remote playback state: connecting, connected, or disconnected.
  • remotePlaybackType: Type of remote playback: airplay or google-cast.
  • remotePlaybackInfo: Contains the device name when using Google Cast.
  • isAirPlayConnected: Whether the player is connected via AirPlay.
  • isGoogleCastConnected: Whether the player is connected via Google Cast.
    
    

The following media data attributes are available for styling based on the current remote playback state:

    
    

The following events are available for detecting remote playback changes: