javascript - resolucion - html identificar dispositivo
¿Detectar modelo de dispositivo iOS utilizando Javascript o HTML? (11)
Así que estoy sirviendo el video H.264 .mp4 en mi sitio web. Estoy usando el reproductor de video HTML5 de código abierto http://mediaelementjs.com/ . Algunos visitantes están viendo desde Safari para iPhone. El iPhone 4 admite la reproducción de video solo hasta 720p, por lo que si mis videos son más pequeños, funcionan en 4 y 4S. Pero el 4S soporta video de hasta 1080p. Entonces, ¿cómo serviría un video más grande para el 4S y un video más pequeño para el 4S? Intenté esto:
<video width="640" height="400" id="player" controls="controls" preload="auto">
<source src="https://s3.amazonaws.com/my-big-1080p-video.mp4" type="video/mp4">
<source src="https://s3.amazonaws.com/my-small-720p-video.mp4" type="video/mp4">
</video>
Pero no funcionó. El iPhone 4 no es lo suficientemente inteligente como para probar la segunda fuente. ¿Cómo puedo hacer que mi sitio web sirva el video correcto para los diferentes dispositivos?
Reproducir video de 720p en iPhone 4 - Video de 1080p en iPhone 4S
Prueba esto en un iPhone 4 y un 4S ( jsfiddle )
<video src="http://file.brow.sr/1080p.mp4" onerror="this.src=''http://file.brow.sr/720p.mp4'';" controls loop width="320" height="180">
</video>
Explicación
Cargue el video de 1080p, luego use onError de Javascript para volver a 720p.
Safari olfateará el encabezado del archivo de 1080p para determinar si se puede reproducir, y si es demasiado grande para decodificarlo, se generará un error. Entonces detectamos ese error para proporcionar el video de 720p.
Al utilizar este tipo de detección de características, el respaldo no solo funcionará en un dispositivo (iPhone 4), sino también en muchos navegadores con diferentes capacidades.
¿Por qué múltiples <source> no funcionan?
Cuando se usan varias etiquetas <source> con los mismos tipos MIME , el navegador cargará la primera fuente que tenga un tipo MIME compatible y descartará las demás, incluso si ese video no se puede reproducir. Esto se debe a que se espera que los elementos de source proporcionen códecs de video alternativos (por ejemplo, ogg, webm, mp4), no tamaños de trama / archivo alternativos.
Aquí está cómo hacerlo:
1) Recupere el modelo del dispositivo usando wurfl
<script type=''text/javascript'' src=“//wurfl.io/wurfl.js"></script>
Puede usar HTTP o HTTPS (ambos son compatibles) Si planea usar la información del dispositivo proporcionada por el script para tomar decisiones de representación, es posible que desee incluir el script en el elemento. De lo contrario, puede cargarlo de forma asíncrona. Ahora tienes acceso al objeto WURFL dentro de JavaScript.
La respuesta de la muestra se ve algo así como:
{complete_device_name: "Apple iPhone 5", form_factor: "Smartphone", is_mobile: true}
Por supuesto que puedes (y deberías)
console.log(WURFL);
para averiguar el resto de las propiedades que puede utilizar.
2) Ahora que sabe exactamente en qué modelo de dispositivo están sus usuarios, puede cambiar las configuraciones de los reproductores de video.
¿Qué tal algo así?
<video width="IPHONE5_VIDEO_WIDTH"
height="IPHONE5_VIDEO_HEIGHT"
id="player" controls="controls"
preload="auto">
<source src="IPHONE5_VIDEO_URL" type="video/mp4">
</video>
super limpio y legible ¿verdad? Espero que ayude.
El reproductor MEJS no maneja los errores correctamente, agregaría más soporte para poder detectar lo que realmente sucedió. En el iPhone, incluso a veces se produce un evento de error, pero no hay un error real y puede reproducir el video correctamente.
Abra mediaelement-and-player.js y busque
// error handling
media.addEventListener(''error'',function() {
loading.hide();
controls.find(''.mejs-time-buffering'').hide();
error.show();
error.find(''mejs-overlay-error'').html("Error loading this resource");
}, false);
Entonces usa este código:
// error handling
media.addEventListener(''error'',function() {
var
videoError = error.closest(''.mejs-inner'').find(''video,audio'')[0].error,
msg = ''Error loading this resource.'';
if (!videoError) { //webkit sometimes throws error event but video has no actual error and can play the video correctly - ignore the event
console.log(''MEJS event: error throws but no error found - ignored'');
return;
}
//hide elements visible while loading and playing - cannot play after error
loading.hide();
controls.addClass(''hidden''); //controls are automatically displayed when mouse hover is detected - must hide it permanently using class with !important
error.closest(''.mejs-inner'').find(''.mejs-overlay-play'').hide(); //also hide overlay with play button
error.show();
//get relevant error message
switch(videoError.code) { //see http://www.w3.org/TR/html5/embedded-content-0.html#error-codes
case videoError.MEDIA_ERR_ABORTED: //loading stopped (by user, e.g. by pressing ESC or Back)
msg = ''Video loading aborted'';
break;
case videoError.MEDIA_ERR_DECODE: //invalid format (actually presumed format is OK, but the data does not correspond with the defined format - probably corrupted file of data transfer)
msg = ''Video file is broken'';
break;
case videoError.MEDIA_ERR_NETWORK: //network problem (was able to connect to the provided URL but could not get the video data)
msg = ''Network connection lost'';
break;
case videoError.MEDIA_ERR_SRC_NOT_SUPPORTED: //invalid source URL (url provided does not lead to a supported video file)
msg = ''Video not supported'';
break;
}
//display error
console.log(''Video error: '' + msg + '', code: '' + videoError.code);
error.find(''.mejs-overlay-error'').html(msg);
}, false);
Si lo necesita, puede agregar su propio manejo que cambiará a 720p en caso de video no compatible.
Y en mediaelementplayer.css agregue esto (no estoy seguro de si realmente se requiere o solo mejora mi tema):
/* Display errors */
.mejs-overlay-error {
color: white;
background: black;
text-align: center;
font-size: 1.2EM;
}
.mejs-controls.hidden {
display: none !important;
}
/* End: Display errors */
Esto es para la versión 2.13.1, no estoy seguro si una versión más nueva es mejor.
Actualización: la versión más reciente 2.16.3 contiene exactamente el mismo controlador de errores inútil.
Esto detectará la versión de iOS. Tal vez pueda ser útil:
if (navigator.userAgent.indexOf(''5_0'') != -1) {
alert(''IOS 5'');
} else {
alert(''Other'');
}
Edit: He ajustado y probado el script.
No puedo ofrecer código de muestra ya que no soy un geek de Apple, pero puedo decirle que, basándose en mi experiencia, al intentar hacer que los sitios sean compatibles entre XHTML y HTML5, es mejor verificar la capacidad del navegador que la versión del navegador.
La razón de esto es que hay demasiadas versiones de navegador para justificar el mantenimiento, y también se puede modificar la cadena de agente de usuario. Le recomiendo que escriba un script que compruebe las capacidades de video HTML5 con una simple sentencia if, y luego reproduzca un video u otro dependiendo de los resultados.
Pon esto en tus etiquetas:
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">
<script>
if (window.screen.height==568) { // iPhone 5
document.querySelector("meta[name=viewport]").content="width=320.1";
// your code here
}
</script>
Pruebe this enlace La biblioteca debería poder detectar el agente de usuario y puede proporcionar los archivos apropiados en consecuencia.
Su solución no funciona debido a la razón mencionada por el querido @Duvrai. He buscado una forma correcta de cumplir con su propósito y parece que no tenemos otra opción a menos que utilicemos algún código javascript (aquí sin considerar la programación del lado del servidor) para tomar una decisión sobre qué fuente se debe entregar. El siguiente fragmento detecta el tipo de navegador y su versión :
navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*(/d+)/i) || [];
if(/trident/i.test(M[1])){
tem= //brv[ :]+(/d+)/g.exec(ua) || [];
alert(''IE ''+(tem[1] || ''''));
}
if(M[1]=== ''Chrome''){
tem= ua.match(//bOPR//(/d+)/)
if(tem!= null) alert(''Opera ''+tem[1]);
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, ''-?''];
if((tem= ua.match(/version//(/d+)/i))!= null) M.splice(1, 1, tem[1]);
alert( M.join('' ''));
})();
Ahora puede escribir algunas líneas de código en javascript y decidir cambiar las fuentes de video según el tipo y la versión del navegador.
Tengo un script php que hace esto. Lo obtuve aquí, http://detectmobilebrowsers.com/ , y sí, hay versiones de javascript, JQuery, etc. Ha funcionado bastante bien para nosotros y tiene la ventaja de que parece mantenerse bastante actualizado. El único problema con el que nos hemos encontrado fue un iPad que había sido configurado deliberadamente para no identificarse como un dispositivo móvil.
Una base de datos de detección de dispositivos móviles como WURFL (Wireless Universal Resource File - http://wurfl.sourceforge.net/ ) o DeviceAtlas puede ser excesiva si el video es la única capacidad que está verificando. Pero es una forma rápida de obtener una detección de capacidades robusta para una gama mucho más amplia de dispositivos de la que sería posible compilar verificaciones, y sería útil si su sitio alguna vez necesita verificar otras capacidades además del soporte de video.
Yo uso este código:
// iPhone 3
if (window.screen.height==480 && window.screen.width==320 && window.devicePixelRatio==1)
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:300px;width:500px;"></div>'');
}
// iPhone 4, this is Retina
else if (window.screen.height==480 && window.screen.width==320 && window.devicePixelRatio==2)
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:300px;width:500px;"></div>'');
}
// iPhone 5
else if (window.screen.height==568 && window.screen.width==320 && window.devicePixelRatio==2)
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:400px;width:600px;"></div>'');
}
// iPad
else if (window.screen.height==1024 && window.screen.width==768 && window.devicePixelRatio==1)
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:425px;width:680px;"></div>'');
}
// iPad Retina
else if (window.screen.height==1024 && window.screen.width==768 && window.devicePixelRatio==2)
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:425px;width:680px;"></div>'');
}
// all other, this was before for all
else
{
$(''#chartDivWrapper'').html(''<div id="chartdiv" style="height:400px;width:600px;"></div>'');
}