Botón "Push to AirPlay" para etiquetas de vídeo HTML5

Funciona desde Safari y dispositivos que admita AirPlay.

#iot#html5#javascript
airplay-button-html5-video-tag

Mac OS El Capitan nos trajo desde la versión de Safari 9.0. una API de JavaScript para enviar vídeos a AirPlay.

Veamos un ejemplo. Por supuesto, sólo funciona desde Safari y dispositivos que admita AirPlay.

Aquí usamos el código JS de TreeHouse para crear botones y añadir una mejora a ellos. Básicamente hemos añadido un nuevo botón y algo de estilo para él.

Echemos un vistazo más de cerca al botón.

HTML code

<!-- HTML code -->
<video id="player" x-webkit-airplay="allow" class="player"> 
  <source src="https://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
</video>

<div id="play-controls">
  <button type="button" id="mute"><i class="fa fa-volume-up fa-lg"></i></button>
  <button type="button" id="airplay"><i class="fa fa-apple fa-lg"></i></button>
  <button type="button" id="play-pause"><i class="fa fa-play fa-lg"></i></button>
  <input type="range" id="seek-bar" value="0">
</div>

En nuestro ejemplo tenemos una etiqueta de video y un elemento id = "play-controls" que contiene los botones de control. Lo más interesante son el atributo x-webkit-airplay y el botón id = "airplay".

El atributo x-webkit-airplay se introdujo junto con iOS 5.0. Puede tener uno de dos valores: permitir y negar.

El primero permite transmitir video o audio a través de AirPlay.

El segundo niega la transmisión.

Esta funcionalidad se ve un poco diferente para varias versiones de iOS, pero más o menos así:

Con Safari 9 para ordenadores de sobremesa, Apple decidió ampliar la funcionalidad de AirPlay.

Antes los usuarios podían compartir toda la pantalla a través de Apple TV y ahora pueden transmitir sólo el contenido de vídeo desde el reproductor de HTML incorporado, además podemos personalizar el diseño de este botón.

JavaScript code:

// Detect if AirPlay is available
// Mac OS Safari 9+ only
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';
}

Window.WebKitPlaybackTargetAvailabilityEvent - es una propiedad del objeto global, que empuja la disponibilidad (o no) de Airplay en este navegador.

Si AirPlay está presente, podemos compartir nuestro contenido a través de Apple TV u otros dispositivos compatibles.

A continuación, esconder o mostrar el botón de compartir dependiendo de esta propiedad.

El próximo paso es agregar el evento listener para webkitplaybacktargetavailabilitychanged.

Este evento nos indica si la disponibilidad de los targets de AirPlay ha cambiado. Dentro de nuestro listener tendremos un argumento. Este argumento contiene una propiedad de disponibilidad.

Puede tener uno de dos estados - disponibles o no disponibles. Esta es también una condición para la visibilidad de nuestro botón.

A continuación, agregamos un evento de clic al botón.

Este evento activa la acción webkitShowPlaybackTargetPicker en el reproductor.

Como puede ver, la acción desencadenada nos muestra una lista de dispositivos disponibles. Malas noticias: no podemos controlar el diseño de esta lista. Youtube y Vimeo también han añadido botones similares a sus reproductores:

El ejemplo funcionando en jsfiddle