Etiqueta video html5

[Spanishpublic]

Buenas, soy nuevo en Javascript. He hecho un curso de iniciacion a la programación y el lenguaje ha sido Javascript, mis conocimientos son muy muy basicos.

Me gustaria saber como se inserta la etiqueta video de html5 en un if.

Mi intencion es usar un script creado con quicktime para la reproducción de video para iPhone si el if cumple las medidas del iPhone, sino, que lea la etiqueta video hmtl5. La idea la tengo, pero no se cual es la forma de hacerlo para que no de error de sintaxis.

La solución mas inmediata que he encontrado es hacer un redireccionamiento a otra URL si las medidas son del iPhone insertando el if en el head, pero no quiero tener que redireccionar porque me va a llevar crear el doble de paginas.

Sabeis como se puede solucionar?

Gracias. Saludos.

[emprear]

Leyendo un buen manual introductorio
http://librosweb.es
SAludos

[Spanishpublic]

con el document.write, pero teniendo en cuenta que donde haya por ejemplo size="30" hay que añadirle \ para que no haya error, qudando así: size=\"30\", no?

Creo que es esto. Saludos.

[Spanishpublic]

Buenas de nuevo, necesito otra vez ayuda. Resulta que la reproduccion de video con el if y la etiqueta <video> esta funcionando bien en safari, soy usuario mac, en firefox, chrome, opera, menos en que navegador? IE? Correcto, has acertado.

Porqué puede ser debido si en este enlace http://www.w3schools.com/html/html5_video.asp pone que lee mp4 con codec h.264?

No tengo IE para mac, por lo que he leido no hay version para mac 10.7.5, he descargado Netscape Navigator que es bastante parecido a la version IE para mac que habia usado anteriormente para hacer las pruebas, y de hecho las paginas se ven igual que en IE para windows, y tampoco funciona la etiqueta <video>.

Estaba pensando en usar flowplayer que es el reproductor que uso ahora mismo en las paginas, pero necesitaria detectar el navegador para agregarlo al if que ya uso para el iphone, y si no, si IE, usa flowplayer, si no, usa etiqueta <video>.

Como se detecta el navegador? He buscado y usado navigator.appName pero me dice en todos Nestcape menos en Opera, hay otra forma de detectar el navegador?

Saludos.

Pd: IE, puuaaaggg...

[ryugen]

Arranquemos por el principio, IE soporta el elemento video desde la versión 9 en adelante (fuente: http://caniuse.com/#feat=video). La versión 9 y 10 de IE solo corren en MS Windows.

Por otra parte, el elemento video no podrá ser visualizado por aquellos usuarios que visiten tu página utilizando IE8 o inferior . Si esto es requerido, yo me inclinaría hacia una versión flash del reproductor.

Finalmente, que Netscape funcione "bastante parecido" en MAC ( a pesar de llevar más de 4 años discontinuado) no quiere decir que sea lo mismo. Si requieres dar compatibilidad con IE necesitas testear tu página en ese navegador.

Saludos y felicidades

[Spanishpublic]

Buenas ryugen, gracias por contestar.

Eso habia leído, y juraría que habia testado la web con la ultima version de IE, no entiendo nada. Eso es lo que estoy tratando de hacer tambien para los usuarios que aun en mayoria usan la version 8, implementar el reproductor flash en el if, pero necesito averiguar que navegador y version es. De momento el objeto navigator.appName no ha funcionado como he dicho antes.

Tendré que duplicar las paginas solo para IE con el reproductor flash y hacer un if redireccionando, pero no me gusta la idea de tener que duplicar. Ahora mismo la web es pequeñita, pero cuando sea mas grande y tenga que hacer modificaciones será demasiado trabajoso.

Saludos y gracias por felicitarme.

[ryugen]

Spanishpublic hay reproductores HTML5 como el jPlayer ( http://jplayer.org/support/ ) que ya vienen con "fallbacks" en FLASH si video de HTML5 no es soportado por el navegador.

Yo me inclinaría a un reproductor como ese para evitar duplicar el contenido, que siempre es algo malo.

[Spanishpublic]

Buenas ryugen, gracias por contestar.

He estado haciendo varias pruebas, tanto con jPlayer como me recomiendas como con flowplayer que ya lo uso en las paginas, pero nada, no hay manera de que el reproductor funcione bien tanto en el iphone que no usa flash, como en IE8 que no soporta la etiqueta video de html5.

Con este codigo reproduce bien en el iPhone 3GS que es el que yo tengo, supongo que en el resto de versiones de iphone, ipod touch, y ipad funcionará bien, no he hecho la comprobación. Este es el código:

EN EL HEAD:

<script src="http://www.apple.com/library/quicktime/scripts/ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
<script src="http://www.apple.com/library/quicktime/scripts/qtp_library.js" language="JavaScript" type="text/javascript"></script>
<link href="http://www.apple.com/library/quicktime/stylesheets/qtp_library.css" rel="StyleSheet" type="text/css" />


EN EL BODY:

<script type="text/javascript">
function iphoneipad()
{
<!--
QT_WritePoster_XHTML('Click to Play', 'URL poster.jpg',
'URL video.mov',
'853', '496', '',
'controller', 'true',
'autoplay', 'true',
'bgcolor', 'black',
'scale', 'aspect');
//-->

}
// iPhone 3-3GS, iPod Touch 1-2-3
if (screen.width==320, screen.height==480)
{
iphoneipad();
}
// iPhone 4-4S, iPod Touch 4
else if (screen.width==640, screen.height==960)
{
iphoneipad();
}
// iPhone 5, iPod Touch 5
else if (screen.width==640, screen.height==1136)
{
iphoneipad();
}
// iPad 1-2 iPad Mini
else if (screen.width==768, screen.height==1024)
{
iphoneipad();
}
// iPad Mini
else if (screen.width==762, screen.height==1024)
{
iphoneipad();
}
else
{

document.write("<video id=\"my_video_1\" class=\"video-js vjs-default-skin\" controls");
document.write(" preload=\"auto\" width=\"304\" height=\"243\" poster=\"my_video_poster.png\"");
document.write(" data-setup=\"{}\"><source src=\"URL.mp4\" type='video\/mp4'><source src=\"URL.WebM\" type='video\/webm'><\/video>");
}
</script>

Pero si le agrego este código del flowplayer a la pagina el iphone lo coge por defecto y no el de quicktime asi es que no reproduce el video al ser flash, en cambio en IE8 ahora si que reproduce el video.

EN EL HEAD:

<script type="text/javascript" src="URL/flowplayer-3.2.6.min.js"></script>

EN EL BODY:


<a href="URL.flv" style="display:block;width:432px;height:243px;" id="player"></a>

<script language="JavaScript">
flowplayer("player", "URL/flowplayer-3.2.7.swf", {
clip: {
autoPlay: false,
autoBuffering: true
}
});
</script>

Como hago para que funcione cada cosa en su sitio? en iphone el quicktime, en IE8 flowplayer, y en el resto etiqueta video html5? Vuelvo a repetir que jPlayer no lo he sabido hacer funcionar como quiero.

Saludos y gracias.

[hackjose]

El elemento video no sirve en Internet explorer 7, 8 y 9.
Tendrás que usar flash.

Los demas navegadores si lo soportan.

Te dejo un excelente recurso

http://www.forosdelweb.com/f175/inse...0/#post4309879

saludos

[Spanishpublic]

(Editado)
Ya he conseguido que el reproductor de video funcione tanto en Safari, Firefox, Chrome, Opera, IE8, y iPhone. He mezclado un codigo y otro y vualá, jejeje. Gracias a todos los que me habeis ayudado.

Este es el codigo final:

<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Video HTML5</title>
<script src="http://www.apple.com/library/quicktime/scripts/ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
<script src="http://www.apple.com/library/quicktime/scripts/qtp_library.js" language="JavaScript" type="text/javascript"></script>
<link href="http://www.apple.com/library/quicktime/stylesheets/qtp_library.css" rel="StyleSheet" type="text/css" />
<!--[if lt IE 9]><script type="text/javascript" src="html5ie.js"></script><![endif]-->
</head>
<body>
<div>
<script type="text/javascript">
function iphoneipad()
{
<!--
QT_WritePoster_XHTML('Click to Play', 'URL.jpg',
'URL.mov',
'853', '496', '',
'controller', 'true',
'autoplay', 'true',
'bgcolor', 'black',
'scale', 'aspect');
//-->
}
// iPhone 3-3GS, iPod Touch 1-2-3
if (screen.width==320, screen.height==480)
{
iphoneipad();
}
// iPhone 4-4S, iPod Touch 4
else if (screen.width==640, screen.height==960)
{
iphoneipad();
}
// iPhone 5, iPod Touch 5
else if (screen.width==640, screen.height==1136)
{
iphoneipad();
}
// iPad 1-2 iPad Mini
else if (screen.width==768, screen.height==1024)
{
iphoneipad();
}
// iPad Mini
else if (screen.width==762, screen.height==1024)
{
iphoneipad();
}
else
{
document.write(" <video width=\"480\" height=\"360\" controls=\"controls\" preload=\"auto\">");
document.write(" <source src=\"URL.mp4\" type='video\/mp4' \/>");
document.write(" <source src=\"URL.ogv\" type='video\/ogg' \/>");
document.write(" <source src=\"URL.webm\" type='video\/webm' \/>");
document.write(" <!-- flash para IE < 9 -->");
document.write(" <object id=\"Object1\" type=\"application\/x-shockwave-flash\" data=\"player_flv_classic.swf\" width=\"480\" height=\"360\">");
document.write(" <param name=\"movie\" value=\"player_flv_classic.swf\" \/>");
document.write(" <param name=\"wmode\" value=\"opaque\" \/>");
document.write(" <param name=\"allowScriptAccess\" value=\"allways\" \/>");
document.write(" <param name=\"quality\" value=\"high\" \/>");
document.write(" <param name=\"menu\" value=\"true\" \/>");
document.write(" <param name=\"autoplay\" value=\"false\" \/>");
document.write(" <param name=\"autoload\" value=\"false\" \/>");
document.write(" <param name=\"FlashVars\" value=\"configxml=flv_video.xml\" \/>");
document.write(" <\/object>");
document.write(" <\/video>");
document.write("");
}
</script>
</div>

</body>
</html>

[Spanishpublic]

Vaya, sin darme cuenta me he creado un problema.

Resulta que por ejemplo el Samsung Galaxy Ace tiene la misma resolucion de pantalla que el iPhone, y el reproductor que uso para iphone, ipod touch, y ipad, no vale para otros moviles o tablets con las mismas medidas.

Solucion para que solo detecte los dispositivos de Apple sin tener que especificar resolucion de pantalla? Quiero que los videos se vean en todas las resoluciones, y en todos los navegadores habidos y por haber.

Saludos.

[hackjose]

para detectar el navegador
navigator.userAgent

Para que el video funcione en todos los navegadores te deje la otra vez un link, debe convertir tu video a los diferentes formatos que soportan los navegadores y el navegador automaticamente elige el que soporta

En cuanto a las resoluciones, una solucion seria usar CSS media queries o usa porcentajes width: 30%;

Saludos

[Spanishpublic]

Buenas hackjose. Ya tengo solucionado el problema, aparentemente.

Te hice caso y usé parte del código del enlace que dejaste, como habrás podido comprobar mas arriba. La solución al problema lo he encontrado en una web que ahora no recuerdo, con un if y el navigartor.userAgent.indexOf. Asi queda el codigo ahora:

<script type="text/javascript">
if ((navigator.userAgent.indexOf("iPhone") != -1) | (navigator.userAgent.indexOf("iPod") != -1) | (navigator.userAgent.indexOf("iPad") != -1) )
{
<!--
QT_WritePoster_XHTML('Click to Play', 'URL.jpg',
'URL.mov',
'432', '243', '',
'controller', 'true',
'autoplay', 'true',
'bgcolor', 'black',
'scale', 'aspect');
//-->
}
else
{
document.write(" <video width=\"432\" height=\"243\" controls=\"controls\" preload=\"auto\">");
document.write(" <source src=\"URL.mp4\" type='video\/mp4' \/>");
document.write(" <source src=\"URL.ogv\" type='video\/ogg' \/>");
document.write(" <source src=\"URL.webm\" type=\"video\/webm\">");
document.write(" <!-- flash para IE < 9 -->");
document.write(" <object id=\"Object1\" type=\"application\/x-shockwave-flash\" data=\"URL.swf\" width=\"432\" height=\"243\">");
document.write(" <param name=\"movie\" value=\"URL.swf\" \/>");
document.write(" <param name=\"wmode\" value=\"opaque\" \/>");
document.write(" <param name=\"allowScriptAccess\" value=\"allways\" \/>");
document.write(" <param name=\"quality\" value=\"high\" \/>");
document.write(" <param name=\"menu\" value=\"true\" \/>");
document.write(" <param name=\"autoplay\" value=\"false\" \/>");
document.write(" <param name=\"autoload\" value=\"false\" \/>");
document.write(" <param name=\"FlashVars\" value=\"configxml=URL.xml\" \/>");
document.write(" <\/object>");
document.write(" <\/video>");
document.write("");
}
</script>

En el iPhone funciona, supongo que en el iPod Touch y iPad tambien funcionará, pero no lo he comprobado aun.

Saludos.