Después de haber charlado con mi amigo de Steam “Arkanos” sobre este tema de diseño web que está más metido que yo, he llegado a las siguientes conclusiones

  • El usar object y param es mucho mejor ante la duda dado a que iframes no está garantizado que funcione siempre. (Cierto, en Safari tampoco me lo funcionó, cosa que object y embed sí)
  • La etiqueta embed aunque tengo entendido que, a pesar de lo que he leido en ciertos blogs que al ser diseñada para Netscape cuando este era el navegador alterno a Internet Explorer, se puede seguir usando sin problemas ya que lo reconocen los navegadores.

Si de todas maneras quieres usar iframes menos en aquellos donde te de problemas el navegador, aquí te dejo el código. En mi caso fue Internet Explorer 8 y Safari, por lo tanto solo lo ejecutaremos en esos dos navegadores:

var nombre_navegador=navigator.appName; // Detectar nombre del navegador
var browser=navigator.userAgent;    // Información complementaria del navegador para saber si es Safari
var ieversion=parseInt((navigator.appVersion).substr(22,4)); // Obtenemos la versión de Internet Explorer
if((nombre_navegador=="Microsoft Internet Explorer" && ieversion==8) || ((browser.toLowerCase().indexOf('safari')>0) && (browser.toLowerCase().indexOf('opr')==-1) && (browser.toLowerCase().indexOf('chrome')==-1))){    

        // Este if se puede cambiar poniendo or (||) con las versiones de IE que den problemas. En mi caso solo fue la 8.

            /* Como en Internet Explorer 8 y Safari dan problemas los <iframe>, creamos un código para
               reemplazarlos por el clásico <object> pero sin la etiqueta . La detección de Safari
               la hacemos con indexof en la cual si el resultado de esa instrucción es mayor que cero es
               porque lo estamos usando. En caso contrario, si es 0 o menor es otro navegador. También
               tenemos que comprobar que en la variable safari no se encuentren las letras OPR en minúscula
               para que esta instrucción no se ejecute si estás usando el navegador Opera. En el navegador
               Ópera se encuentra la palabra Safari si visualizas el contenido de navigator.userAgent.
               El valor -1 significa que la palabra a buscar NO EXISTE. Como Safari también se encuentra en
               Chrome, debemos de excluirlo para que no entre en este condicional. Aquí tienes la prueba
               de que es mucho mejor usar <object> y <param> (con o sin ) que <iframe>. Modifica este
               código de acuerdo a tu gusto y necesidades según creas conveniente. En Opera para XP el <iframe>
               iba bien pero para Windows 8 bueno... Va bien pero quizás sería mejor añadir el allowtransparency="true"
               a ver que sucede o bien usar siempre <object> y <param>.
            */

            // 1- Guardamos en la variable viejo todos los vídeos y el cuerpo HTML original (lo que hay dentro del <div> de los vídeos):

            var viejo=document.getElementById("videos").innerHTML;

            // 2- Comenzamos a reemplazar elementos:

            var nuevo=viejo.replace(/iframe/gi,'object');    // Reemplazamos la etiqueta <iframe> por <object>
            nuevo=nuevo.replace(/src/gi,'data');    // Reemplazamos la propiedad src por data
            nuevo=nuevo.replace(/allowfullscreen/gi,'type="application/x-shockwave-flash"><param name="movie" value="<aqui_aparecera_el_video>" /><param name="wmode" value="transparent" /');// Eliminamos el allowfullscreen agregando las propiedades que le faltan a <object>, la etiqueta <param> juntos a sus propiedades y un valor cualquiera en la propiedad value dado a que más adelante será reemplazada por el vídeo.        

            // 3- Reemplazo de todos los vídeos del <param> por los que tiene el <iframe> usando jQuery

            $("iframe").each(function(i){
            var video_cuerpo_html = $(this).attr("src");    // Videos Youtube originales del <iframe>

                // Reemplazamos el valor de la propiedad value de la etiquieta <param> cuando sea un vídeo Youtube (Para no quitar el value="transparent" de la otra etiqueta <param>)

                nuevo=nuevo.replace('value="<aqui_aparecera_el_video>"','value='+video_cuerpo_html);    // Los vídeos de Youtube no estarán encerrados entre comillas dobles como a mi tanto me gusta :-(. Las comillas daban problemas y no funcionaba bien.
            });

            // 4- Reemplazamos embed de la URL de los vídeos Youtube por v y eliminamos la propiedad frameborder="0"

            nuevo=nuevo.replace(/embed/gi,'v');    
            nuevo=nuevo.replace('frameBorder=0',''); // Lo escribo así porque es como Internet Explorer 8 lo interpreta. No ocurre nada si se deja ya que <object><param> no tienen esta propiedad.

            // 5- Sustituimos el contenido del <div> de los vídeos actual por el que tiene todos los cambios realizados.

            document.getElementById("videos").innerHTML=nuevo;
}

Partiendo de este código, no debería de resultar complicado hacer la operación contraria, pasar de object y param a iframe. De todos modos por lo que he estado charlando vuelvo a lo mismo, es mejor hacerlo ya directamente con object y param (Lo que en Youtube ,como he puesto en la entrada anterior, es el código antiguo) aunque tenga el embed ya que pasar de la forma que tiene Youtube con dicha etiqueta a esta forma sin usarla (la embed) es parecida, teniendo en cuenta que la URL de youtube hay que cogerla de la etiqueta embed y cada vez que se haya leido esa URL hay que usar un replace para quitar toda esa etiqueta embed junto al vídeo que tenga. (Recuerda que replace SUSTUYE TODO POR LO QUE LE INDICAS DE UNA SOLA VEZ así que para hacerlo de uno en uno debe de estar en un recorrido que es en el que leemos las URL de los vídeos Youtube). Quizás algún día me anime y los haga…

De todas maneras los dicho, ante la duda parece que es mejor usar, sobretodo a la hora de diseñar web, object y param incluso con el embed aunque este ya, a convenir de cada uno. Pues eso, un  saludo y que os guste. 😉 Recordar que esto lo hice yo porque me he querido “matar” la cabeza y aprender algo nuevo porque perfectamente podía haber reemplazado todos los iframe por el codigo antiguo con object y param en la página web que estoy desarrollando para que sea más compatible con la mayor parte de los navegadores. En Safari los videos del iframe quedaban por encima como si de un z-index de nivel alto se tratase cuando esto no tiene nada que ver (de ahí que por mucho que se use style=”z-index:0;” no funcionase).

Tanto iframe como object,param y embed trabajan para HTML5 como para Flash Player, otra cosa es que una trabaje de una manera por defecto si no se lo indicas o de otra si tampoco se lo indicas. Con object,param y embed se pueden ver videos HTML5 sin tener flash player siempre que en data se indique que es codec H.264:

http://www.circulodemaquetadores.com/codec-video-en-formatos-html-5/

Además Flash Player siempre hay que tenerlo instalado sí o sí porque algunas aplicaciones sean para el ordenador de Internet en el navegador siguen usando el formato flash (swf) y es necesario. Que HTML5 no requiera Flash Player y suponga una gran ventaja, sobretodo para diseñar menús más las nuevas etiquitas y código CSS, no significa que hay que olvidarse de él así que los vídeos sí o sí los podrás ver. 😉

Páginas Web que me han ayudado:

http://www.ehowenespanol.com/detectar-navegador-safari-javascript-como_268440/


http://www.forosdelweb.com/f13/detectar-navegador-opera-256519/