cómo detectar si el video html5 se reproducirá en línea

Question

Tengo un video HTML5 con una imagen splash en la parte superior. En los dispositivos de escritorio, quiero hacer clic en la imagen de bienvenida para que la imagen desaparezca y el video se reproduzca. En el teléfono móvil, al hacer clic en la imagen, el video se reproduce en una aplicación separada, de modo que cuando el usuario haga clic atrás para volver a la página web, quiero que la imagen salpicada siga allí (el componente de video simple, al menos en mi Teléfono Android, es bastante fugly).

¿Cómo puedo saber si el video se reproducirá "en línea" o se lanzará a una nueva aplicación? Si se muestra en línea, ocultaré la imagen de bienvenida y si se lanza a una nueva aplicación, no lo haré.

Una forma es olfatear al agente de usuario para ver si se trata de un teléfono. Esa no es una buena idea por razones obvias (podría romperse cuando salga un nuevo teléfono, debería probarse en cientos de dispositivos). Otra posibilidad podría ser atrapar algún tipo de evento cuando salgamos de la página para saltar al reproductor de video o volver del reproductor de video. Pero no estoy seguro de qué atrapar. Otra posibilidad que he considerado es configurar un temporizador para verificar algunas propiedades del componente de video ... para ver si se está reproduciendo ... o algo así.

Estoy usando jQuery, en caso de que importe.

Answer 1

En iOS el elemento de vídeo tendrá la propiedad webkitDisplayingFullscreen, por lo que se puede comprobar y averiguar si el vídeo está en línea o pantalla completa:

var videoFullscreenStatus = document.getElementById("myVideo").webkitDisplayingFullscreen; 

La propiedad es cierto cuando se reproduce un vídeo a pantalla completa, falsa de otra manera. Entonces, en teoría, puedes verificar esto tan pronto como comience a reproducirse el video, y configurar la imagen del póster en consecuencia.

Estoy mucho menos familiarizado con Android, pero hay un evento, webkitfullscreenchange, que es posible que pueda escuchar cuando aparezca en pantalla completa. No tengo idea si eso funcionará en dispositivos móviles, no creo que funcione para iOS.

Sé que esta es una vieja pregunta, pero espero que esto ayude a alguien.

Answer 2

Consultar oncanplay. Para videos que se reproducen en línea, parece estar preestablecido en null.

var playsInline = typeof document.getElementByID('myVid')['oncanplay'] !== 'undefined'; 

o como una función

function playsInLine(vidId) { 
    return typeof document.getElementByID(vidId)['oncanplay'] !== 'undefined'; 
} 

Advertencia: este método podría no dar el resultado correcto en todos los navegadores en todos los dispositivos, y también puede dar resultados no deseados debido a los cambios futuros. Pero en el momento de escribir esto, esto funcionó para mí en todas partes que revisé (Windows: Chrome 42, IE11, FF36, Opera 29, Safari. Android: Chrome. IPad y iPhone 4S: Safari)