如何在Safari中通过AirPlay启用FairPlay流媒体？

API 探路者

2026-5-1

在Safari中通过AirPlay启用FairPlay流媒体的实现方法

我之前在项目里刚好踩过这个坑，Apple官方对Web端的描述确实太零散了，结合实际折腾出来的经验，给你整理几个关键步骤：

配置HTML5 Video核心属性
首先得给你的<video>标签开启AirPlay权限，必须添加x-webkit-airplay="allow"属性；同时为了兼容iOS端Safari的播放逻辑，建议加上playsinline（或兼容旧版的webkit-playsinline）属性。示例代码：
```
<video id="fairplay-player" controls x-webkit-airplay="allow" playsinline></video>
```
自带的controls属性会让Safari默认显示播放控制栏，当附近有可用AirPlay设备时，控制栏里会自动出现AirPlay按钮；如果用自定义控制栏，也可以保留这个属性，或者通过JS手动触发设备选择器。
确保FairPlay解密流程正常
Safari里FairPlay的实现依赖WebKit的webkitMediaKeys API，你得先把基础的FairPlay解密跑通：
1. 从HLS流的EXT-X-KEY标签里拿到密钥URI和证书URI
2. 请求FairPlay证书并转成ArrayBuffer格式
3. 创建webkitMediaKeys实例并绑定到video元素
4. 获取内容密钥完成解密
  只有FairPlay解密正常工作了，AirPlay才能传输加密流——要是解密失败，Safari会直接隐藏AirPlay选项。

用JS监听AirPlay状态并触发选择
可以通过监听video元素的webkitplaybacktargetavailabilitychanged事件，实时检测AirPlay设备的可用性：

const video = document.getElementById('fairplay-player');
video.addEventListener('webkitplaybacktargetavailabilitychanged', (event) => {
  if (event.availability === 'available') {
    // 检测到AirPlay设备，可以显示自定义的AirPlay按钮
    console.log('AirPlay设备已就绪');
  }
});

如果需要手动唤起AirPlay设备选择器，直接调用video元素的webkitShowPlaybackTargetPicker()方法就行：

document.getElementById('custom-airplay-btn').addEventListener('click', () => {
  video.webkitShowPlaybackTargetPicker();
});

几个容易踩坑的注意点
- 你的HLS流编码得是H.264/AAC格式，EXT-X-STREAM-INF标签里别加禁用AirPlay的属性
- 必须用HTTPS环境测试，Safari在HTTP下会直接限制AirPlay和FairPlay功能
- iOS端Safari需要用户手动触发播放（比如点播放按钮），自动播放会被浏览器拦截，进而影响AirPlay启用

补充一句：Apple没在FairPlay文档里单独写Web端AirPlay配置，是因为WebKit已经把这些逻辑整合到了video元素和MediaKeys API里——只要FairPlay基础流程没问题，再加上AirPlay的属性配置，功能就能跑起来。

内容的提问来源于stack exchange，提问作者Scott