Consulta - Cargar video al hacer click en IFRAME

AlexKyle · 27 Nov 2021

Muy buenas tardes, después de tanto intentarlo y no encontrarle solución, vengo a molestar a esta comunidad.
Antes que nada, no soy programador, este es un proyecto de cuarentena que se dio para matar el aburrimiento, pero hoy es un sitio activo y me gustaría brindarle lo mejor posible a sus visitantes.

Mi problema es el siguiente, en un principio arme un blog con todos los capítulos de una serie, pero intentando mejorarlo, opte por cargar todos los capítulos en una misma pagina utilizando un iframe en cada uno de ellos, el problema es que demora mucho la carga. Existe alguna manera de que el video cargue solo al seleccionar el iframe o que el iframe se cree al hacer click en el episodio? Desde ya muchisimas gracias! Es un blog del blogger donde esta alojado. Saludos!

bits4me · 27 Nov 2021

agregue el siguiente codigo antes de </body>

HTML:

<script type="text/javascript">Element.prototype.watch=function(){const a=this;a.dataset.src=a.src;const b=new IntersectionObserver(b=>{b[0].isIntersecting?(a.src=a.dataset.src,a.removeAttribute("srcdoc")):(a.removeAttribute("src"),a.srcdoc=``)});b.observe(a)},document.querySelectorAll("iframe").forEach(a=>a.watch());</script>

aca puede ver el codigo sin obfuscar

Mr. Robot · 28 Nov 2021

Si te funciona avisa

Miroku97 · 28 Nov 2021

Creo que quieres hacer lo mismo que hace un tiempo consulté aquí. Y la solución que yo encontré es justamente una "función" con javascript.

Por lo que entendí en esa ocasión, esto depende del tipo de tabs que poseas; es decir, que según el botón que corresponda a uno de los contenedores del iframe, este cargue ese iframe al momento de hacer clic en aquel botón u opción; por lo que creo no existe un script único, a no ser que uses unas tabs y scripts que de antemano ya funcionan bien.

En el tema que presenté yo, puse un ejemplo al azar de tabs, y me supieron dar algunos scripts para modificar y que funcione en el mismo. Sin embargo, amablemente igual me brindaron ayuda con esa modificación vía pv.

Te dejo el post, donde podrás ver las respuestas a detalle:

Cómo hacer que un contenido de vídeo iframe se recargue al hacer clic en otra opción de tabs?

No sé si es posible hacer algo así en blogger, como las páginas de películas que al hacer clic en una opción que contiene un vídeo iframe, el contenido de la anterior opción o tab, deje de cargar, al hacer clic en otra; y lo mismo para el resto de tabs u opciones. Alguien sabe algún código que...

forobeta.com

Igual estaría bien que publiques tu tabs o demo para que te puedan ayudar con el script que mejor se adapte. Espero te sirva de alguna manera, o bien de aquí te ayuden.

Miroku97 · 28 Nov 2021

bits4me dijo:

agregue el siguiente codigo antes de </body>

HTML:

<script type="text/javascript">Element.prototype.watch=function(){const a=this;a.dataset.src=a.src;const b=new IntersectionObserver(b=>{b[0].isIntersecting?(a.src=a.dataset.src,a.removeAttribute("srcdoc")):(a.removeAttribute("src"),a.srcdoc=``)});b.observe(a)},document.querySelectorAll("iframe").forEach(a=>a.watch());</script>

aca puede ver el codigo sin obfuscar

Probé esto, y al parecer si funciona (no sé cómo 😅 , pero sirve), independientemente de cualquier tipo de tabs (si ya posees unas, debería funcionar). Basta con aplicarlo tal cual lo dice, dentro del body para mantener la particularidad en todas las entradas o páginas (si vas a realizar pruebas, puedes colocarlo el html de la entrada).

Genial.

Mr. Robot · 28 Nov 2021

Miroku97 dijo:
Probé esto, y al parecer si funciona (no sé cómo 😅 , pero sirve), independientemente de cualquier tipo de tabs (si ya posees unas, debería funcionar). Basta con aplicarlo tal cual lo dice, dentro del body para mantener la particularidad en todas las entradas o páginas (si vas a realizar pruebas, puedes colocarlo el html de la entrada).

Genial.

Gracias por contarnos sobre tu experiencia colega!

bits4me · 29 Nov 2021

Miroku97 dijo:
Probé esto, y al parecer si funciona (no sé cómo 😅 , pero sirve), independientemente de cualquier tipo de tabs (si ya posees unas, debería funcionar). Basta con aplicarlo tal cual lo dice, dentro del body para mantener la particularidad en todas las entradas o páginas (si vas a realizar pruebas, puedes colocarlo el html de la entrada).

Genial.

lo que hace es mantener el iframe en pantalla activo y los otros cerrados con contenido vacio

AlexKyle · 29 Nov 2021

bits4me dijo:

agregue el siguiente codigo antes de </body>

HTML:

<script type="text/javascript">Element.prototype.watch=function(){const a=this;a.dataset.src=a.src;const b=new IntersectionObserver(b=>{b[0].isIntersecting?(a.src=a.dataset.src,a.removeAttribute("srcdoc")):(a.removeAttribute("src"),a.srcdoc=``)});b.observe(a)},document.querySelectorAll("iframe").forEach(a=>a.watch());</script>

aca puede ver el codigo sin obfuscar

Muchas gracias! Me dio un excelente resultado. Gracias a todos por su tiempo. n.n

Miroku97 · 30 Nov 2021

bits4me dijo:
lo que hace es mantener el iframe en pantalla activo y los otros cerrados con contenido vacio

Bueno, aunque ahora que hice más pruebas...resulta que el apenas sale del campo de visión el vídeo se reinicia; asumo que esa era la intención, de mostrar el iframe siempre y cuando se acceda a él o se muestre en pantalla.

Ese sería un pequeño inconveniente, ¿tendría solución? o igual es cosa mía?

bits4me · 30 Nov 2021

Miroku97 dijo:
Bueno, aunque ahora que hice más pruebas...resulta que el apenas sale del campo de visión el vídeo se reinicia; asumo que esa era la intención, de mostrar el iframe siempre y cuando se acceda a él o se muestre en pantalla.

Ese sería un pequeño inconveniente, ¿tendría solución? o igual es cosa mía?

tiene razon, ya lo e cambiado

HTML:

<script type="text/javascript">Element.prototype.watch=function(){const a=this;a.dataset.src=a.src,a.removeAttribute("src"),a.srcdoc=``;const b=new IntersectionObserver(b=>{b[0].isIntersecting&&"ok"!=a.dataset.loaded&&(a.src=a.dataset.src,a.removeAttribute("srcdoc"),a.dataset.loaded="ok")});b.observe(a)},document.querySelectorAll("iframe").forEach(a=>a.watch());</script>

Miroku97 · 30 Nov 2021

bits4me dijo:

tiene razon, ya lo e cambiado

HTML:

<script type="text/javascript">Element.prototype.watch=function(){const a=this;a.dataset.src=a.src,a.removeAttribute("src"),a.srcdoc=``;const b=new IntersectionObserver(b=>{b[0].isIntersecting&&"ok"!=a.dataset.loaded&&(a.src=a.dataset.src,a.removeAttribute("srcdoc"),a.dataset.loaded="ok")});b.observe(a)},document.querySelectorAll("iframe").forEach(a=>a.watch());</script>

Cierto, ahí si se mantiene abierto el vídeo, y el resto aún sin cargar. Aunque si se navega entre opciones o ya decidimos cargar todos los src, se mantienen abiertos igual todos.

Esta función de IntersectionObserver, ¿ayuda de alguna forma la velocidad de carga del sitio? recién veo esto y pues me pareció curioso e interesante. Gracias por compartir esto, aquello se podría estar aplicando para las imágenes que se presenta de a primeras, manteniendo una carga diferida, ¿verdad?.

bits4me · 30 Nov 2021

Miroku97 dijo:
Cierto, ahí si se mantiene abierto el vídeo, y el resto aún sin cargar. Aunque si se navega entre opciones o ya decidimos cargar todos los src, se mantienen abiertos igual todos.

Esta función de IntersectionObserver, ¿ayuda de alguna forma la velocidad de carga del sitio? recién veo esto y pues me pareció curioso e interesante. Gracias por compartir esto, aquello se podría estar aplicando para las imágenes que se presenta de a primeras, manteniendo una carga diferida, ¿verdad?.

sucede que los iframes se cargan justo despues de cargar el documento y no deja terminar el hilo principal, entonces hasta que cada iframe sea cargado el hilo termina, lo que hace el script es a cada iframe le asigna un contenido html vacio, terminando el hilo principal y ganando velocidad de carga y cuando el iframe este en pantalla se cargue el url normal, la contraparte es que muchos elementos siendo observados pueden dañar la experiencia de usuario por un scroll torpe, la mejor opcion ala hora de trabajar con iframes es simplemente poner un boton para cargarlo al dom

YeltsinReyes · 4 Dic 2021

Miroku97 dijo:
Cierto, ahí si se mantiene abierto el vídeo, y el resto aún sin cargar. Aunque si se navega entre opciones o ya decidimos cargar todos los src, se mantienen abiertos igual todos.

Esta función de IntersectionObserver, ¿ayuda de alguna forma la velocidad de carga del sitio? recién veo esto y pues me pareció curioso e interesante. Gracias por compartir esto, aquello se podría estar aplicando para las imágenes que se presenta de a primeras, manteniendo una carga diferida, ¿verdad?.

IntersectionObserver detecta cuando el elemento sale en pantalla, ya luego tu haces lo que quieras con el.

Consulta - Cargar video al hacer click en IFRAME

AlexKyle

bits4me

Mr. Robot

Miroku97

Cómo hacer que un contenido de vídeo iframe se recargue al hacer clic en otra opción de tabs?

Miroku97

Mr. Robot

bits4me

AlexKyle

Miroku97

bits4me

Miroku97

bits4me

YeltsinReyes

Temas similares