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时，它不会显示播放图标

<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>

重要事项： iOS 8+在控制中心有播放。不是视频

如果不起作用，我们可以使用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';
}

注意：请记住，HTML5 Airplay仅适用于Safari 9 +

html5视频over airplay没有在控件中显示airplay图标

1 个答案: