2012-12-01 34 views
6

Qualcuno sa se c'è un modo per far funzionare Airplay su un video html5 che utilizza CONTROLLI PERSONALIZZATI? Questa è la parte importante, mi rendo conto che è possibile aggiungere l'attributo x-webkit-airplay = "allow" all'elemento se si utilizzano i controlli html5 incorporati. Ma il mio lettore video utilizza controlli personalizzati.Airplay con controlli html5 personalizzati

Sembra che Safari inserirà il pulsante Airplay nei controlli integrati in html5, ma c'è un modo per farlo se non utilizzo i controlli integrati? Ecco un link al player html5 che ho scritto. Si noti che i controlli in fondo sono il mio:

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

Grazie!

+0

si dovrebbe aggiungere il video a tutspuls.com sono abbastanza buone – TheCrazyProfessor

risposta

9

Buone notizie qui! La funzione è stata implementata in Safari 9.

Safari 9.0 consente di creare controlli personalizzati per supporti HTML5 con supporto JavaScript AirPlay. Utilizza Safari WebKitPlaybackTargetAvailabilityEvent per rilevare la disponibilità di Airplay e quindi aggiungere i tuoi controlli per lo streaming audio e video ai dispositivi AirPlay.

Via. What's New in Safari 9

Ecco un esempio da HTML5 video и кнопка для 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(); 
     }); 
    }); 
} 
+1

Questo dovrebbe essere la risposta accettata – Endless

1

Purtroppo Apple non ha implementato le chiamate agli eventi JavaScript di Airplay, soprattutto perché quando si utilizza AirPlay nei controlli Quicktime nativi AirPlay richiede all'utente i dispositivi AirPlay vicini. Attualmente non esiste un'implementazione JS specifica per Safari per estrarre questi dati nei tuoi contenuti e creare pulsanti in base a ciò che è disponibile.

A partire da febbraio 2013, l'unica cosa che è possibile specificare per AirPlay in HTML5 è se si desidera mostrare o non mostrare i controlli AirPlay.

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

è possibile presentare un bug con Apple se questa è una caratteristica che si desidera nelle versioni future: https://bugreport.apple.com/

Spero che questo aiuti.

0

Possiamo controllare evento webkitcurrentplaybacktargetiswirelesschanged per la cattura di spegnere il dispositivo AirPlay:

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