logo
SDKs
IntroductionHow to update a SDK?
Web
Getting started on Web (Extended)Getting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframe?How 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 bar
Android
Getting started on AndroidAndroid SDK customizationAndroid SDK product flavorsHow 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
iOS
Getting started on iOSiOS SDK 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 SDK 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
Android TV
Getting started on Android TV
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
Getting started on Fire TV
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 behaviour:

  • 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 behaviour 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