Uno de esos días que seguía desarrollando la página de la Rendez-Vous para mis amigos del foro Fairlight Jarre, que además la hago para ver si aprendo de una vez ha hacer páginas Web decentes xDDD, pues me propuse dos objetivos:

  • Hacerla con HTML5
  • Hacerla compatible con versiones anteriores a Internet Explorer 10.

Aunque Internet Explorer 9 reconoce HTML5 lo hace solo en parte, es por eso que de todas maneras tanto a esa versión como a las anteriores les he puesto el archivo js para que les cree etiquetas como la nav y el HTML5 en Internet Explorer 8 e inferiores sea parecido al del 9. (En Internet Explorer 9 tambien tengo programado para que use ese archivo js aunque total no le servirá de mucho porque ya he dicho que lo reconoce en parte). Claro que me llevé una sorpresa en ver que la página me estaba quedando compatible hasta con Internet Explorer 7 con lo que se deduce que la página se verá correctamente en el modo de vista de compatibilidad (modo de vista de compatibilidad es ver la página como si estuvieras usando Internet Explorer 7). Todo iba bien salvo un detalle, por alguna causa en Internet Explorer 8 tenía problemas con los iframe. Cuando el vídeo terminaba de cargarse, si cambiaba a otra sección de la página se quedaba toda con un fondo negro que es el vídeo a pantalla completa pero que no se muestra, solo se oye. Después de volverme loco, quitando las propiedades “allowfullscrren” y frameborder=”0” se consiguió “algo” y era que el fondo negro se quedó reducido a una “pequeña” porción. (Lo de pequeña entre comillas porque era aun muy grande pero ya no ocupaba toda la pantalla). Entonces fue cuando buscando por Internet probé todo eso del fondo transparente (allowtransparency=”true”) junto a agregar el meta para hacerlo compatible con IE7 y cambiar el CSS pero nada… Lo más “gracioso” fue que solo me ocurría en Internet Explorer 8 viéndolo como su modo original. En IE7, IE9, IE10 todo iba bien y en todos los Internet Explorer (8,9,10) en vista de compatibilidad todo funcionaba bien. (Lógico si en IE7 se ve bien, pues en la vista de compatibilidad también). Entonces probé a insertar un vídeo Youtube de la forma que llaman anterior o vieja, usando object,param,embed y todo funcionó. Buscando que era mejor si usar iframe o object llegué a un blog en el explica una forma de insertar vídeos sin usar embed dado a que esta etiqueta se creó para el antiguo navegador Netscape cuando era importante y competía con Internet Explorer. (Firefox, Chrome son descendientes de Netscape).

Mis opciones eran:

  1. Cambiarlo todo por object y param como en el blog que encontré.
  2. Ver si de alguna manera se podía convertir de iframe a object y param.

Podía haber usado la primera opción que es válida para todos los navegadores pero estaba tentado por la curiosidad y porque dije que por mis narices esta página será en HTML5 salvo en aquellos navegadores que por alguna causa no lo puedan reconocer. (Corregirme si me equivoco pero creo que usas iframe de Youtube por ejemplo ver usando el vídeo usando HTML5 mientras que con object y param usas Flash Player).

Después del día de ayer, conseguí hacer un código usando JavaScript y jQuery para cambiar iframe por object y param. Para que esta entrada no se haga tan larga, he subido el código JavaScript y HTML de ejemplo a PasteBin. Los vídeos deben de estar dentro de un bloque div que tenga de nombre de id la palabra videos. (div id=”videos”).

Enlace al código: http://pastebin.com/XEHHnuTf

 

Vamos a imaginar que todo esto lo metemos en un archivo js llamado cambia_etiqueta. Pues un ejemplo de uso sería así:

 

Enlace al código: http://pastebin.com/NhSaVTJs

 

Y esta página en Internet Explorer 8 se leerá como si fuera:

 

Enlace al código: http://pastebin.com/GNpZjmbE

 

Nota: En una URL a la hora de programar y escribirla, poner // es exactamente igual a poner http://

Quizás pueda sorprender que primero haga esto:

nuevo=nuevo.replace(/allowfullscreen/gi,'type="application/x-shockwave-flash"><param name="movie" value="<aqui_aparecera_el_video>" /><param name="wmode" value="transparent" /');

Para luego hacer esto otro:

$("iframe").each(function(i){ 
var video_cuerpo_html = $(this).attr("src");
nuevo=nuevo.replace('value="<aqui_aparecera_el_video>"','value='+video_cuerpo_html); 
});

Cuando uno puede pensar que tendría que haberlo hecho así:

nuevo=nuevo.replace(/allowfullscreen/gi,'type="application/x-shockwave-flash"><param name="movie" value="<aqui_aparecera_el_video>" /><param name="wmode" value="transparent" /');
$("iframe").each(function(i){ 
var video_cuerpo_html = $(this).attr("src");
nuevo=nuevo.replace('value="<aqui_aparecera_el_video>"','value='+video_cuerpo_html); 
});

Quitando lo que puesto en la primera tabla. Pues os diré que lo hice y mi sorpresa fue QUE NO FUNCIONÓ. No se creó el resto de propiedades de la etiqueta object y tampoco se crearon las param ¿Por qué? Ni idea pero supongo que será por algo como esto:

Cuando programamos desde JavaScript (Con o sin jQuery), para acceder a propiedades de etiquetas HTML o cambiar las mismas, SOLO PODEMOS OBTENER VALORES Y CAMBIAR AQUELLAS QUE LAS HEMOS ESCRITO “FÍSICAMENTE” por decirlo de alguna manera, es decir la etiqueta object y param no existen físicamente, no las hemos escrito, estas etiquitas son el resultado de un programa JavaScript en este caso que se crean, por lo tanto en el caso de que se diera la posibilidad de acceder y manipular propiedades de estas etiquetas no escritas por nosotros físicamente, sino que se generan en un programa, debe de hacerse posteriormente y no en el momento donde se están generando porque sino no se crean porque aun no existen, dicho de otra forma. En la línea donde está la instrucción jQuery ahí si puedo cambiar la propiedad del value de la etiqueta param con JavaScript porque ya se ha generado líneas más arriba, ahora si que existen esas etiquetas con sus propiedades aunque no estén de forma física, pero sí están en la variable nuevo. Con jQuery hasta donde yo sé SOLO PODEMOS OBTENER DATOS Y CAMBIAR ATRIBUTOS DE LAS ETIQUITAS QUE EXISTAN FÍSICAMENTE ESCRITAS POR NOSOTROS EN HTML y no en aquellas que hacemos que creen en un lenguaje de programación. En jQuery como ves accedo con attr para obtener los vídeos del iframe que es una etiqueta que está escrita físicamente en la página html sin embargo no podría usarlo con la object y param, ni siquiera más adelante porque son etiquetas que no están físicamente escritas. Por eso tengo que escribir primero que se creen todas las etiquetas y una vez hecho, con JavaScript cambio el valor de esas etiquetas creadas con dicho lenguaje de script, sustituyendo el valor del value que le puse por los valores de la propiedad src del iframe, usando para ello jQuery.  Pero lo dicho, lo de acceder con jQuery a etiquetas creadas así a mi no me funcionó, sé que en este párrafo por aqui van los tiros pero no puedo garantizarlo por eso queda lo de siempre, el probarlo cada uno por su cuenta y como todo código, siempre está dispuesto a mejorarse. 😉

La función que hace este código se resume así:

  • Se ejecuta si se tiene Internet Explorer 8 sin vista de compatibilidad.
  • Se guarda todo el contenido de lo que hay en el bloque div con el id de nombre videos en una variable llamada viejo.
  • Se crea una variable llamada nuevo en la cual cambiarmos el nombre iframe por object, quitamos el allowfullscreen y ponemos las propiedades con valores de object y agregamos la etiqueta param con sus valores poniendo en la del video youtube cualquier cosa (aqui_aparecerá_el_vídeo) en mi caso.
  • Una vez hechos los cambios, mediante jQuery leemos todos los valores de la propiedad src de la etiqueta iframe que son los vídeos Youtube.
  • Se reemplaza mediante JavaScript el valor del value aqui_aparecerá_el_video por lo que hemos leido en el src del iframe. Debes de tener en cuenta una cosa, replace de JavaScript es para buscar una cadena o caracter y reemplazar TODOS por lo que le indiques, entonces lo que pasa aquí es que primero se generan una serie de etiquetas param que tienen todas el valor del primer valor leido del src del iframe, la siguiente vez como ya en la primera etiqueta no existe el valor (aquí_aparecerá_el_vídeo) se quedará intacta con lo cual todas las etiquetas param menos la primera tendran el segundo valor leido del src del iframe, la tercera vez tendrán todas el valor de la etiqueta param del tercer valor del src del iframe menos la primera y la segunda… Así sucesivamente hasta llegar al final que todas tendran los vídeos correspondientes. Al volver a ejectuar el script todas “se reiniciarán” y volverán a tener el valor (aquí_aparecerá_el_vídeo) para que esta operación se vuelva a repetir.
  • Quitamos de las URL de los vídeos Youtube la palabra embed y la sustiuimos por una v de las etiquetas object y param (de todo donde se encuentren vamos).
  • Hacemos desaparecer la propiedad frameborder=”0”. Esta propiedad no molesta, no existe ni tiene función ni en object ni en param (por lo menos a mi no me han funcionado, ya me corregiréis si me equivoco). La he escrito exactamente igual a como la lee Internet Explorer 8. Se sustituye por un espacio en blanco o nada según lo quiera leer el navegador.
  • Todos estos cambios realizados en las variable nuevo, los escribimos en el bloque div de id videos quitando el contenido con iframe.

Este código debería de permitirte que cada vez que hagas un cambio en tu página HTML, automáticamente será reflejado en la versión de Internet Explorer que te de problemas con el iframe. Da igual que quites vídeos, que pongas, que cambias encabezados dado a que lo primero que hacemos es recoger toda esa información y guardarla en la variable llamada viejo. Variable que si quieres puedes vaciarla, total cuando ejecutes de nuevo el script volverá a adoptar el valor.

Y bueno, creo que no me dejo nada, pongo los enlaces que me han servido de ayuda para realizar este trabajo:

http://www.yukei.net/2007/01/insertar-videos-de-youtube-con-xhtml-valido/

http://www.desarrolloweb.com/articulos/funcion-attr-jquery.html

Ya sé que es complicarme la vida, que era tan simple como escribirlo todo con el código de siempre object y param quitando algunas cosillas más que nada porque en Youtube está esa opción: (Uso de ejemplo un vídeo de Half-Life 2 que subió pixi_man)

No sabría decir que es mejor, si iframe u object. Es lo que pasa cuando buscas información, que algunos les gusta otros no… No lo sé, ahora lo que me parece curioso es como el iframe que fue una etiqueta que se diseñó para Internet Explorer a partir de la versión 4 (Ahora creo que está estandarizada porque la reconocen muchos navegadores como Chrome, Firefox, Safari…) Internet Explorer 8 en mi caso presente problemas (Una etiqueta que fue creada explícitamente para este navegador) y que en una versión anterior a él (Internet Explorer 7) funcione muy bien me dejó alucinado porque si dices que funciona en IE 8 pero en IE7 se puede llegar a entender pero al revés… En fin, cosas de Internet Explorer cuando diseñas páginas Web y querer llevar más estándares propios que reconocidos.

¡Saludos! Espero que os haya gustado.

PD.: El parámetro que he usado a veces en el replace de JavaScript /gi es para indicar que no haga distinción entre mayúsculas y minúsculas para que quede siempre reemplazado por lo que quiero. Para poner un parámetro en replace es así:

 replace (/<elemento a buscar>/parámetros,<elemento a reemplazar>); --> replace (/"azul"/gi,"verde");