{
  "id": 7794689,
  "title": "Add casting to a custom HTML5 video player without breaking it",
  "url": "https://urgent.news/2026/09/16/add-casting-to-a-custom-html5-video-player-without-breaking-it",
  "topic": "culture",
  "section": "Culture",
  "published": "2026-09-16T13:39:41.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/masonwritescode/add-casting-to-a-custom-html5-video-player-without-breaking-it-44lo"
  },
  "original_language": "en",
  "account": "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.\n\nInitial 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.\n\nFeature 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.\n\nFor 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.",
  "summary": "TL;DR We're adding a cast button to a custom <video> player using the Remote Playback API, with an AirPlay fallback for Safari. Then we fix the four bugs that make casting work on your laptop and fail on an actual TV: token expiry, CORS on the receiver, unreachable hosts, and treating prompt() as if it were a connection. The thing to understand before writing any code: the TV does not run your…",
  "key_points": [
    "Add cast button using Remote Playback API",
    "Address token expiry, CORS, unreachable hosts",
    "Implement feature detection for browser compatibility"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}