唤起 Safari 画中画和 AirPlay 的 javascript 方法是什么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2619 天前的主题，其中的信息可能已经有所发展或是发生改变。

自己做 HTML5 视频播放器（ Media Controller ），想加入画中画和 AirPlay 的按钮。

Apple.com 在 iPhone X 页面更新了网页视频播放器的外观，包含有这两个按钮，说明可以实现。

如何实现呀？

Airplay

画中画

播放器

按钮

5 条回复 • 2017-10-02 14:32:34 +08:00

ysc3839

2017-10-01 22:49:33 +08:00 via Android

善用搜索，关键词 safari js airplay

下面是搜到的结果
https://stackoverflow.com/questions/13655237/airplay-with-custom-html5-controls

sobigfish

2017-10-01 22:53:29 +08:00

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html
搜索
pip
airplay 部分

islujw

2017-10-02 01:08:17 +08:00

@ysc3839 谢谢，我有看过这个，但是 AirPlay 的失败了，没有菜单弹出。画中画的倒是成功了。
我有添加这个：
AirPlayBtn.addEventListener("click", function() {
video.webkitShowPlaybackTargetPicker();
});

islujw

2017-10-02 01:09:02 +08:00

@sobigfish 画中画的成功了。AirPlay 的失败了，没有菜单弹出。

全部 js 如下：

if (window.WebKitPlaybackTargetAvailabilityEvent) {
video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
switch (event.availability) {
case "available":
break;
case "not-available":
break;
}
AirPlayBtn.addEventListener("click", function() {
video.webkitShowPlaybackTargetPicker();
});
});
}

islujw

2017-10-02 14:32:34 +08:00

AirPlay 成功了。什么也没改动，估计当时抽风了吧……