Add casting to a custom HTML5 video player without breaking it

Adding a cast button to a custom HTML5 video player without disrupting its functionality can be achieved using the Remote Playback API, along with a fallback for Safari's AirPlay feature. To ensure that casting works on laptops and TVs, four potential issues must be addressed: token expiry, CORS on the receiver, unreachable hosts, and treating prompt() as a connection.

Initial setup involves a basic HTML structure with a video element, a cast button, and a container for displaying the state. The accompanying JavaScript file (player.js) imports the HLS.js library for handling HLS manifest files. The code checks for the player's support of the MPEG URL format and loads the stream accordingly. It is crucial to note that the TV does not run the player; instead, it fetches the stream URL and plays it with its own stack.

Overlays, quality caps, analytics, and token refresh logic are not transferred, which adds complexity to casting code.

Feature detection is implemented across three methods to support various browsers: the standards-based path using remote Playback API, Safari's AirPlay interface, and the Cast SDK. The detectCastSupport function returns an object containing information about each path's availability.

For Remote Playback, two main calls are made: watchAvailability, which checks whether a device is reachable and determines whether to display the button, and prompt(), which opens the browser's device picker. The code ensures that the button is hidden if a device is not reachable or if the user dismisses the picker, preventing errors. The connecting event listener is used to update the onState function with the current state of the casting process.