logo
SDKs
IntroductionHow to update an SDK?THEOplayer 5.0 - Native Mobile iOS/tvOS and Android SDKs
Web
Getting started on Web (Extended)Getting started with the new Web UIGetting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframeHow to implement a seamless transition between videos?How can I use video inside THEOplayer?How to work around browser cache with a new license?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control barHow to play an LCEVC source with THEOplayerHow to use WebXR with THEOplayer
Android legacy (4.12.x)
Getting started on Legacy Android SDK (4.12.x)Legacy Android SDK (4.12.x) customizationHow to couple the native MediaRouteButton to THEOplayerHow to enable -experimental- native rendering on AndroidHow to do offline Playback with AES-128 Encrypted Streams on Android
Android
Getting started with the Android UIGetting started on AndroidAndroid Feature IntegrationsMigration from THEOplayer Android/AndroidTV/FireTV SDK 4.x to THEOplayer Android SDK 5.0
iOS legacy (4.12.x)
Getting started on iOSiOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) CustomizationMy app does not want to build for the app storeHow to bypass copy() not working in Safari consoleHow to couple the native GCKUICastButton to THEOplayeriOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
iOS
Getting started guide for THEOplayer iOS/tvOS SDK 5.0THEOplayer iOS/tvOS 5.0 Feature IntegrationsMigration from THEOplayer iOS and tvOS SDK 4.x to THEOplayer iOS/tvOS SDK 5.0
Android TV Legacy (4.12.x)
Getting started on Android TV Legacy (4.12.x)
tvOS
Getting started on tvOS
Chromecast
Getting started on ChromecastChromecast Application Customization
Webos
Getting Started on webOS
Tizen
Getting started on TizenInstalling the Tizen developer toolsSetting up a Tizen device for debuggingDeploying a test app on a physical Tizen deviceDeploying a test app on a Tizen emulator
Roku
Getting Started on Roku
Fire TV Legacy (4.12.x)
Getting started on Fire TV Legacy (4.12.x)
Frameworks

How to couple the native MediaRouteButton to THEOplayer

This page shows how to wire up the Android's native MediaRouteButton to THEOplayer. Your MediaRouteButton will be provided with the following behavior:

  • Clicking the button while disconnected will start a Chromecast session. The currently set source will start playing.
  • Clicking the button while casting will stop the current session. The player will be paused.

Objectives

  • Extend the MediaRouteButton and MediaRouteActionProvider
  • Wire up the button with an activity and THEOplayerView

Step-by-step guide

You can modify the behavior of the MediaRouteButton by creating a subclass of the MediaRouteButton and overriding the performClick or showDialog method. Below, we provide an example implementation which uses the Cast API of an attached TheoPlayerView.

class TheoMediaRouteButton(context: Context): MediaRouteButton(context) {
    companion object {
        var theoPlayerView: THEOplayerView? = null
    }
 
    override fun showDialog(): Boolean {
        val chromecast = theoPlayerView?.cast?.chromecast
 
        if (chromecast == null) {
            return super.showDialog()
        } else if (chromecast.isCasting) {
            chromecast.stop()
            return false
        } else {
            chromecast.start()
            return true
        }
    }
}

You can afterwards create a subclass of the MediaRouteActionProvider, overriding the onCreateMediaRouteButton allows us to insert our previously created MediaRouteButton.

class TheoMediaRouteActionProvider(context: Context) : MediaRouteActionProvider(context) {
    override fun onCreateMediaRouteButton(): MediaRouteButton {
        return TheoMediaRouteButton(context)
    }
}

Finally, you will add the cast button to your activity. As explained here, you should first add a menu item or a MediaRouteButton in the xml file that defines your menu, and use CastButtonFactory to wire it up with the framework. THEOplayer requires one extra step, and that is wiring up the TheoPlayerView with the TheoMediaRouteButton. Do not forget to unset the TheoPlayerView when you destroy the activity to avoid memory leaks.

An example menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/media_route_menu_item"
        android:title="Cast"
        app:actionProviderClass="com.your-project.TheoMediaRouteActionProvider"
        app:showAsAction="always" />
</menu>

The wiring code that has to be added to your activity

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    super.onCreateOptionsMenu(menu)
    menuInflater.inflate(R.menu.activity_main_menu, menu)
 
    if (isGooglePlayServicesAvailable(applicationContext)) {
        TheoMediaRouteButton.theoPlayerView = theoPlayerView
        CastButtonFactory.setUpMediaRouteButton(applicationContext, menu, R.id.media_route_menu_item)
    }
 
    return true
}
 
override fun onDestroy() {
    super.onDestroy()
    TheoMediaRouteButton.theoPlayerView = null
    theoPlayerView.onDestroy()
}
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona