the - Airplay con controles html5 personalizados

video html loop

Question

¿Alguien sabe si hay una manera de hacer que Airplay trabaje en un video html5 que usa CONTROLES PERSONALIZADOS? Esa es la parte importante, me doy cuenta de que puedes agregar el atributo x-webkit-airplay = "allow" al elemento si estás utilizando los controles html5 incorporados. Pero mi reproductor de video usa controles personalizados.

Parece que Safari pondrá el botón Airplay en los controles html5 incorporados, pero ¿hay alguna manera de hacerlo si no estoy usando los controles integrados? Aquí hay un enlace al reproductor html5 que he escrito. Tenga en cuenta que los controles en la parte inferior son míos:

http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security

¡Gracias!

Answer 1

Lamentablemente, Apple no ha implementado las llamadas de eventos de Airplay JavaScript, principalmente porque cuando usa AirPlay en sus controles nativos de Quicktime, AirPlay le solicita al usuario que se acerque a los dispositivos de AirPlay. Actualmente no existe una implementación de JS específica de Safari para extraer estos datos en su contenido y crear botones en función de lo que está disponible.

A partir de febrero de 2013, lo único que puede especificar para AirPlay en HTML5 es si desea mostrar o no los controles de AirPlay.

https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html

Puede presentar un error con Apple si esta es una característica que le gustaría en versiones futuras: https://bugreport.apple.com/

Espero que esto ayude.

Answer 2

Buenas noticias aquí! La característica se ha implementado en Safari 9.

Safari 9.0 le permite crear controles personalizados para medios HTML5 con soporte de JavaScript AirPlay. Utilice WebKitPlaybackTargetAvailabilityEvent de Safari para detectar la disponibilidad de Airplay y luego agregue sus propios controles para transmitir audio y video a dispositivos AirPlay.

Vía. Qué hay de nuevo en Safari 9

Aquí hay un ejemplo de video HTML5 и кнопка для AirPlay

// Detect if AirPlay is available
// Mac OS Safari 9+ only
if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener(''webkitplaybacktargetavailabilitychanged'', function(event) {
        switch (event.availability) {
            case "available":
                AirPlayButton.show();
                break;
            default:
                AirPlayButton.hide();
        }
        AirPlayButton.on(''click'', function() {
            video.webkitShowPlaybackTargetPicker();
        });
    });
}

Answer 3

Podemos verificar el evento webkitcurrentplaybacktargetiswirelesschanged para capturar el apagamiento del dispositivo airplay:

      this.on(videoEl, ''webkitcurrentplaybacktargetiswirelesschanged'', this.checkWireles);