Airplay z niestandardowymi kontrolkami html5

Question

Czy ktoś wie, czy istnieje sposób, aby Airplay działał na html5 wideo, który używa CUSTOM CONTROLS? To jest ważna część, zdaję sobie sprawę, że możesz dodać atrybut x-webkit-airplay = "allow" do elementu, jeśli używasz wbudowanych formantów html5. Ale mój odtwarzacz wideo wykorzystuje niestandardowe wbudowane elementy sterujące.

Wygląda na to, że Safari umieści przycisk Airplay na wbudowanych kontrolkach HTML5, ale czy istnieje sposób, aby to zrobić, jeśli nie używam wbudowanych kontrolek? Oto link do odtwarzacza html5, który napisałem. Zauważ, że kontrole na dole są moje własne:

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

Dzięki!

Answer 1

Dobra wiadomość tutaj! Ta funkcja została zaimplementowana w Safari 9.

Safari 9.0 umożliwia tworzenie niestandardowych formantów dla mediów HTML5 z obsługą JavaScript AirPlay. Użyj przeglądarki Safari's WebKitPlaybackTargetAvailabilityEvent, aby wykryć dostępność Airplay, a następnie dodaj własne kontrolki do przesyłania strumieniowego audio i wideo do urządzeń AirPlay.

Via. What's New in Safari 9

Oto przykład z 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(); 
     }); 
    }); 
} 

Answer 2

Niestety Apple nie zaimplementował wywołań zdarzeń Airplay JavaScript, głównie dlatego, że podczas korzystania z funkcji AirPlay w macierzystych kontrolkach QuickTime użytkownik pyta użytkownika w pobliżu urządzeń AirPlay. Obecnie nie ma implementacji JS dla konkretnej przeglądarki Safari, która pobierałaby te dane do twoich treści i tworzy przyciski w zależności od tego, co jest dostępne.

Od lutego 2013 jedyną rzeczą, którą możesz określić dla AirPlay w HTML5, jest wyświetlanie elementów sterujących AirPlay.

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

Można zgłosić błąd z Apple, czy jest to cecha chciałbyś w przyszłych wydaniach: https://bugreport.apple.com/

Nadzieja to pomaga.

Answer 3

Możemy sprawdzić webkitcurrentplaybacktargetiswirelesschanged zdarzenie złapać wyłączyć urządzenie AirPlay:

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