html5 video over airplay not showing airplay icon in controls

Question

According to Apple you should be able to stream normal html5 video over airplay

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

When I try to use this from safari on an iphone it won't show the airplay icon

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

I also tried this

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

Am I missing something?

TheCrazyProfessor TheCrazyProfessor · Accepted Answer · 2017-02-21T11:34:32

Well try this:

<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

If that not work, we can call the airplay function using Javascript.

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+

html5 video over airplay not showing airplay icon in controls

1 Answers