Enabling Chromecast for HTML Video
 

Enabling Chromecast for HTML Video

Google's Chromecast[a] is pretty cool. To get your own videos to play on it you can, for example, upload them to YouTube and use the "cast" button in the YouTube app - and it's really satisfying to see your own video on a big screen. But what if you want to cast video from your own website?

Then you need to serve the video in the right format, with the right HTTP headers. Both requirements change over time as the HTTP standard and Chromecast evolves, but here are the known good settings as of right now.

Table of Contents

1. Format

2. HTTP Headers

2.1. Configuring .htaccess

1. Format

The video should conform to the HTTP live streaming standard[b]. While the Chromecast supports many video formats, this is the format it appears to prefer.

2. HTTP Headers

The M3U8 playlists and the TS segments must have proper CORS headers. These are known-good headers for the M3U8 file (with the Content-Length and associated headers of course being altered as needed):

Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: *
Connection: close
Content-Length: 844
Content-Range: bytes bytes 0-843/844
Content-Type: application/vnd.apple.mpegurl

These are known-good headers for the TS files:

Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: *
Connection: close
Content-Length: 3286804
Content-Range: bytes 0-3286803/3286804
Content-Type: video/mp2t

2.1. Configuring .htaccess

If you are using Apache[c] to serve the files, add this to the .htaccess file:

<FilesMatch "\.(m3u8|ts)$">
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET, OPTIONS"
</FilesMatch>