ios - 通过 airplay 播放的 html5 视频未在控件中显示 airplay 图标

Question

根据 Apple 的说法，您应该能够通过 airplay 流式传输普通的 html5 视频

https://developer.apple.com/library/ios/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW5

当我尝试在 iphone 上从 safari 使用它时，它不会显示 airplay 图标

<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" x-webkit-airplay="allow" controls></video>

这个我也试过

<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>

我错过了什么吗？

Answer 1

那么试试这个:

<video controls id="video" x-webkit-airplay="allow" width="720"> 
    <source src="movie.mp4" type="video/mp4">       
</video>

Important: iOS 8+ have the airplay in the control center. not the video

---

如果不行，我们可以使用 Javascript 调用 airplay 函数。

HTML:

<video controls id="video" x-webkit-airplay="allow" width="720"> 
    <source src="movie.mp4" type="video/mp4">       
</video>
<button type="button" id="airplay"><i class="fa fa-apple fa-lg">Airplay</i></button>

Javascript:

var video = document.getElementById('video');
var airPlay = document.getElementById('airplay');

// Airplay
if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
        switch (event.availability) {
            case "available":
                airPlay.style.display = 'block';
                break;
            default:
                airPlay.style.display = 'none';
        }
        airPlay.addEventListener('click', function() {
            video.webkitShowPlaybackTargetPicker();
        });
    });
}else {
    airPlay.style.display = 'none';
}

NOTE: Remember the HTML5 Airplay only work in Safari 9+