-apple-system-headline1
-apple-system-headline2
-apple-system-body
-apple-system-subheadline1
-apple-system-subheadline2
-apple-system-footnote
-apple-system-caption1
-apple-system-caption2
-apple-system-short-headline1
-apple-system-short-headline2
-apple-system-short-body
-apple-system-short-subheadline1
-apple-system-short-subheadline2
-apple-system-short-footnote
-apple-system-short-caption1
-apple-system-tall-body
<video id="video" src="my-video.mp4"></video>
<div id="controls">
<button id="playButton">Play</button>
<button id="pauseButton" hidden>Pause</button>
<button id="airPlayButton" hidden disabled>AirPlay</button>
</div>
if (window.WebKitPlaybackTargetAvailabilityEvent) {
video.addEventListener('webkitplaybacktargetavailabilitychanged',
function(event) {
switch (event.availability) {
case "available":
airPlayButton.hidden = false;
airPlayButton.disabled = false;
break;
case "not-available":
airPlayButton.hidden = true;
airPlayButton.disabled = true;
break;
}
}
);
}
if (!window.WebKitPlaybackTargetAvailabilityEvent)
return;
var airPlayButton = document.getElementById("airPlayButton");
var video = document.getElementById("video");
airPlayButton.addEventListener('click', function(event) {
video.webkitShowPlaybackTargetPicker();
})