How to Add AirPlay & Chromecast to Plyr Player

Plyr provides built-in AirPlay support that kicks in automatically on devices like iOS and Safari—no extra setup required beyond including 'airplay' in your controls array. For Chromecast, there’s an official plugin merged into Plyr’s codebase via pull request #706, letting you add a 'googlecast' button conditionally in Chrome browsers. You won’t need third-party libraries; just build Plyr with the plugin or grab the latest dist for seamless casting from Plyr players.

Contents

• AirPlay Support in Plyr
• Enabling AirPlay in Your Plyr Player
• Chromecast Integration with Plyr
• Adding the Google Cast Plugin
• Code Examples for AirPlay and Chromecast
• Limitations and Browser Compatibility
• Troubleshooting Common Issues
• Sources
• Conclusion

AirPlay Support in Plyr

Ever fired up a video player on your iPhone and seen that little AirPlay icon pop up in the controls? That’s Plyr doing its thing. Out of the box, Plyr AirPlay integration is native and hassle-free. The player detects AirPlay-capable devices—like Apple TVs or HomePods—and renders the button automatically if your controls array includes 'airplay'.

According to the official Plyr documentation, the default controls list already features it: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']. No custom JavaScript hacks. Just initialize your player, and on supported hardware, it appears. Tested this on iOS Safari? Works like a charm for mirroring video or audio to your TV.

Why does this matter for developers? It means fewer lines of code and better user experience without forcing users to hunt for casting options. Plyr handles the HTML5 Media Session API under the hood, so your videos stream smoothly via AirPlay 2.

Enabling AirPlay in Your Plyr Player

Getting AirPlay up and running takes seconds. Start with the basic Plyr setup from the Plyr GitHub repo. Grab the CDN link: <link rel="stylesheet" src="https://cdn.plyr.io/3.7.8/plyr.css" /> and the JS.

Here’s a quick embed:

<video id="player" playsinline controls>
 <source src="your-video.mp4" type="video/mp4" />
</video>

<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
 const player = new Plyr('#player', {
 controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'airplay', 'fullscreen']
 });
</script>

Boom. Load this on an iPad, tap the AirPlay button, and select your receiver. It supports seeking, playback controls, and even multi-room audio if your setup allows. But what if you’re on desktop Safari? Still works for AirPlay to nearby devices.

Pro tip: Set pip: true alongside for picture-in-picture fallback. Users love options.

Chromecast Integration with Plyr

Plyr Chromecast isn’t quite as “set it and forget it” as AirPlay, but it’s solidly built-in thanks to community efforts. Back in 2015, folks requested Google Cast support in issue #112, and it finally landed with PR #706 merging into master around 2020.

The plugin lives at plugins/google-cast.js. It adds a 'googlecast' control that shows up only on Chrome (desktop, Android, iOS)—smart, since Cast shines there. No bloat for other browsers. You’ll need the Google Cast SDK, but Plyr wraps it neatly.

Does it replace third-party libs like Shaka Player? For basic MP4/WebM casting from Plyr, yes. Forget wrestling with raw Cast APIs.

Adding the Google Cast Plugin

To enable Chromecast in Plyr, first build Plyr from source or use a custom dist. Clone the repo: git clone https://github.com/sampotts/plyr.git, then npm install && gulp.

Include the plugin in your controls—but check for Chrome:

const player = new Plyr('#player', {
 controls: [
 'play', 'progress', 'current-time', 'mute', 'volume',
 ...(window.chrome ? ['googlecast'] : []),
 'fullscreen'
 ]
});

Get your Google Cast app ID from the Cast Developer Console. Pass it via googlecast: { appId: 'YOUR_APP_ID' } in options. Initialize, and the Cast button appears. Tap it, select your Chromecast device, and stream away.

On Android TV or Nest Hub? Handles it. But HLS/DASH or YouTube providers? Those need extra work—stick to progressive downloads for now.

Code Examples for AirPlay and Chromecast

Want a full demo? Check this working Plyr AirPlay example on CodePen. It mirrors the official config, with AirPlay lighting up on iOS.

For Chromecast, here’s a beefed-up snippet:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
</head>
<body>
 <video id="player" controls crossorigin playsinline>
 <source src="big-buck-bunny.mp4" type="video/mp4" />
 </video>
 
 <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
 <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
 <script>
 const player = new Plyr('#player', {
 controls: ['play-large', 'progress', 'volume', 'settings',
 ...(Plyr.supports('chrome') ? ['googlecast'] : []),
 'airplay', 'fullscreen'
 ],
 googlecast: { appId: 'YOUR_APP_ID_HERE' }
 });
 </script>
</body>
</html>

Test on Chrome with a Chromecast nearby. AirPlay? Fire up Safari. Both buttons coexist peacefully.

Limitations and Browser Compatibility

Not everything’s perfect. AirPlay shines on Apple ecosystems—expect quirks on Windows via emulators. One ongoing issue notes seekbar glitches post-connection (duration shows 00:00). Workaround: Ensure your video has proper duration metadata.

Chromecast? Chrome-only party. Firefox/Edge users get nada from 'googlecast'. Supports HTML5 basics only—no live streams or adaptive bitrate yet. And always load the Cast SDK first to avoid console errors.

Mobile? Android Chrome casts fine, but iOS Chrome falls back gracefully. Build custom for edge cases.

Troubleshooting Common Issues

AirPlay not showing? Verify HTTPS—AirPlay hates plain HTTP. Or toggle enabled: true in fullscreen options for iOS native hints.

Chromecast silent? Double-check your app ID and Cast SDK load order. Console logging via player.on('googlecast-*', e => console.log(e)) helps debug sessions.

Player unresponsive after cast? Destroy/recreate on disconnect: player.destroy(); new Plyr(...). Common gotcha.

Stuck? Dive into Plyr options docs or the repo issues.

Sources

1. Plyr GitHub Repository — Core documentation on AirPlay controls and player options: https://github.com/sampotts/plyr
2. Plyr Options Documentation — Details controls array including airplay and custom plugins: https://github.com/sampotts/plyr#options
3. Google Cast Support PR #706 — Merged pull request adding googlecast plugin implementation: https://github.com/sampotts/plyr/pull/706
4. Google Cast Feature Request #112 — Original issue discussing Chromecast integration needs: https://github.com/sampotts/plyr/issues/112
5. Plyr AirPlay CodePen Demo — Working example configuration for AirPlay button: https://codepen.io/xavianaxw/pen/QVNyrQ

Conclusion

Plyr makes AirPlay dead simple with zero extras, while Chromecast requires a quick plugin tweak and Chrome check—both baked into the official codebase. Skip third-party headaches; a custom build or smart controls array gets you casting videos effortlessly. Grab the repo, test on real devices, and your players will handle modern streaming like pros. Questions? The GitHub community has your back.