Overview
AMP CAST is a new library to create Chromecast Receivers using AMP’s core alongside Google’s Cast Application Framework (CAF).
This tutorial shows how to create a custom CAF Receiver using AMP CAST.
This tutorial shows:
-
Getting AMP CAST.
-
Creating a basic HTML.
-
Including the Cast Receiver framework.
-
Including AMP CAST in your receiver.
-
Creating a Config Object.
-
Creating an AmpCaf instance.
-
Customizing the Receiver UI.
-
Using CafAds to serve client-side Ads.
-
Hosting your Custom Receiver
1. Getting AMP CAST
The customer’s premier license includes AMP CAST. To obtain a self-hosted package, reach AMP Support.
3. Including the Cast Receiver framework
Load the Cast Receiver Framework using a script tag in your head section and include the cast-media-player tag in the body of the HTML page.
4. Including AMP CAST in your receiver
Add AMP CAST to your basic HTML page using a script tag in your head section with src.
https://amp-a.akamaihd.net/hosted/1.1/cast.esi?apikey=API-KEY&version=1.0.05. Creating a Config Object
As with regular AMP, AMP CAST uses a akamai.amp.PlayerConfig object. So, declare a const for the config object and add any required configuration.
6. Creating an AMP CAST instance
Call the AMP constructor to create an AMP Cast instance, passing the config object and an event listener function as arguments.
7. Customizing the Receiver UI
To customize the receiver UI, include a style tag at the end of the page body and add any desired css. For further information on UI styling, please refer to google’s documentation.
8. Using CafAds to serve client-side Ads.
Include a cafads section in the config object to serve client-side ads. The cafads section should specify the provider of the ads and the vmapAdsRequest.
9. Hosting your Custom Receiver
The customer can host the custom receiver anywhere. To link your custom receiver to a sender application, login into your Google Cast SDK Developer Console and follow the Add New Application wizard.