javascript - reproducir - Detectar si el cliente permite la reproducción de medios en línea para video HTML5

reproductor de video html5

Question

¿Hay una buena manera de detectar si un navegador cliente permite la reproducción de medios en línea para video HTML5?

Actualizar

No estoy tratando de simplemente detectar soporte de video.

Estoy tratando de detectar si un video solo puede reproducirse a pantalla completa o también en línea. Debido a que en el iPhone, los videos de iOS solo se reproducen en pantalla completa, pero en el iPad los videos se pueden reproducir en línea. Y por inline me refiero en la página sin cambiar a pantalla completa.

Answer 1

A partir de iOS 10, la opción de pantalla completa de video también estará disponible para teléfonos, al agregar atributos en playsinline al elemento de video.

Para versiones anteriores webkit-playsinline se puede utilizar webkit-playsinline , pero solo se respetará en los iPhones cuando la página esté anclada en la pantalla de inicio.

<video webkit-playsinline playsinline></video>

Para detectar si la reproducción en línea está disponible, se puede canplay escucha de eventos, para verificar si el video está en pantalla completa. Si el teléfono no admite la reproducción en línea, irá directamente a pantalla completa cuando comience la reproducción.

var inlinePlaybackSupported = true;
var elem = document.querySelector(''video'');
elem.addEventListener(''canplay'', function () {
//if in fullscreen here, then inline playback is not supported;
if (elem.webkitDisplayingFullscreen) {
inlinePlaybackSupported = false;
}
});

Answer 2

La solución que estoy usando es la siguiente:

var video = document.createElement( ''video'' );
...
video.addEventListener( ''playing'', function () {
// Note: we are adding event listener for ''playing'' event, not for ''play'' event!
if ( video.webkitDisplayingFullscreen ) {
console.log( ''Inline playback is not supported'' );
} else {
console.log( ''Inline playback is supported'' );
}
}, false );

Obviamente, hay un problema con este enfoque: no se sabe si se admite Inline o no hasta después de que el video haya comenzado a reproducirse. Además, el evento puede activarse varias veces si el usuario detiene el video (no es realmente un problema, pero debe tener cuidado).

He probado esto en iPod touch, iPhone, iPad, Nexus 5 y HTC One X. Proporciona resultados correctos en todos estos aspectos.

No sé si funcionará en dispositivos Android que reproducen videos en pantalla completa de manera predeterminada. Personalmente, nunca he visto un dispositivo Android que reproduzca video en pantalla completa. Pero ejecutar mi método en nexus 5 da un interesante mensaje de registro de consola:

''HTMLVideoElement.webkitDisplayingFullscreen'' is deprecated. Please use the ''fullscreenchange'' and ''webkitfullscreenchange'' events instead.

Así que supongo que para Android tendrás que usar algo así:

video.addEventListener( ''webkitfullscreenchange'', function ( e ) {
if ( document.webkitIsFullScreen ) {
console.log( ''Inline playback is not supported'' );
} else {
console.log( ''Inline playback is supported'' );
}
}, false );

Pero personalmente, nunca vi este evento siendo despedido . Ni en Android, ni en iOS.

Algunas otras cosas que he probado en varios dispositivos iOS que NO FUNCIONAN :

1. propiedad video.webkitSupportsFullscreen - siempre devuelve falso
2. los eventos ''webkitendfullscreen'' y ''webkitenterfullscreen'' - estos son los divertidos - webkitendfullscreen funciona bien, pero el webkitenterfullscreen nunca se activa

ADICIONAL:

De hecho, logré encontrar un dispositivo Android que solo muestra el video en pantalla completa (Fly IQ245 Plus). Aunque su comportamiento es muy similar al de iOS, no pude detectar el cambio de pantalla completa por ninguno de los medios mencionados anteriormente.

Answer 3

Mientras que el documento Consideraciones específicas de iOS dice:

Actualmente, Safari optimiza la presentación de video para la pantalla más pequeña en el iPhone o iPod touch reproduciendo el video usando la pantalla completa. Los controles de video aparecen cuando se toca la pantalla, y el video se ajusta para ajustarse a la pantalla en modo vertical u horizontal. El video no se presenta dentro de la página web. Los atributos de alto y ancho afectan solo el espacio asignado en la página web, y el atributo de controles se ignora. Esto es cierto solo para Safari en dispositivos con pantallas pequeñas. En Mac OS X, Windows y iPad, Safari reproduce el video en línea, integrado en la página web.

iOS

var videoIsFullscreen = screen.width < 320 &&
navigator.userAgent.indexOf("Safari") > -1 &&
navigator.userAgent.indexOf("Chrome") == -1 &&
navigator.userAgent.match(/(iPhone|iPod)/);

Tenga en cuenta que no estoy seguro de si la pantalla pequeña es de 320 px, debe ajustar este valor.

EDITAR

Echa un vistazo a este post .

Resumiendo:

var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;

Después de todo, encontré este post que puede ayudarte mucho.

¿Puedo evitar el reproductor de video nativo de pantalla completa con HTML5 en iPhone o Android?

ANDROIDE

Cómo reproducir video en línea html5 en el navegador de Android

Tenga en cuenta que es para el navegador nativo de Android no para Android Chrome.

Answer 4

En iOS10, ahora puede tener una reproducción de video en línea si el atributo playsinline se agrega a la etiqueta de video.

Puede detectar esto con (''playsInline'' in document.createElement(''video'')) .

Sin embargo, esto no es suficiente porque no existirá en los navegadores de escritorio, donde obviamente jugar en línea es una característica estándar.

Así que esto es lo que se me ocurrió: si no es iPhone / iPad, simplemente asumimos que el video se puede reproducir en línea (esto puede fallar para ciertos dispositivos Android). De lo contrario, ejecute la prueba anterior para comprobar si hay iOS10

Aquí está mi prueba de modernizr.

 Modernizr.addTest(''inpagevideo'', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? (''playsInline'' in document.createElement(''video'')) : true;
});