Ver Mensaje Individual
  #8 (permalink)  
Antiguo 02/01/2013, 11:25
Avatar de Spanishpublic
Spanishpublic
 
Fecha de Ingreso: abril-2012
Ubicación: Barcelona
Mensajes: 25
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Etiqueta video html5

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.