Curso JavaScript: 100. DOM: Video Inteligente (IntersectionObserver & VisibilityChange) -

[@emersonpalaciootalvaro2632]

este curso supera en 100%👌, cualquier curso de udemy , next-u ,(⭐⭐⭐⭐⭐ 5/5) se lo dice alguien que ya estado inscrito en estos cursos.

[@jonmircha]

Muchísimas gracias!

[@federicoraulmaciasaparicio1339]

Wow. Ya 100 episodios. Muchas felicidades Jon. Ahora por otros 100 más, jeje.

[@jonmircha]

jejeje pos igual, quien sabe cuantos me falten

[@eribertmarquez452]

@@jonmircha me encanto esa respuesta, eres grande, muchas gracias 😁

[@AlejandroDiaz-te4ey]

Bueno llegamos al video 100 que maravilla ome, los mejores deseos y muchas gracias por tanto Jon eres grande amigo.

[@jonmircha]

Muchas gracias👋🏻😉

[@D.VincyPro]

cuando le dije a un amigo que me gustaría aprender el Js me dijo, si quieres aprender js,html, css lo que sea tienes que ver a este hombre primero antes que todo..... que razón tenía, he visto 100 videos ya y me parecen pocos, voy a verme todos los videos del canal

[@elweonweandolaweafome]

Una clase entretenida de principio a fin, no es casualidad que tambièn este viendo sus cursos de css

[@jonmircha]

👋🏻😉

[@nihil_um]

Independientemente de las gracias que te mereces por el trabajo que te tomas, me gustaría decirte que espero que tú y los tuyos estéis bien después del terremoto de hace unos días. Un saludo a tí y mucho ánimo a México.

[@alexanderlozada799]

Dios, al fin la clase 100 :D. maestro mircha gracias por tanto, perdon por tan poco, a mis compañeros de carrera les he compartido tu curso :D

[@jonmircha]

👋🏻😉

[@reyns8059]

si por casualidad a otros les ocurre el problema que no se les detiene al cambio de pestaña, revisen su código. Tuve que descargar un video con sonido para notar que no pausaba y justo antes de probar con una idea que vi acá en comentarios me fijé, cuando fui a borrar, que habia declarado el listener del visibility change fuera de la callback y, por supuesto, no estaba funcionando porque nunca se ejecutaba con el observador y no hacia nada. Espero que esto sirva a alguien y otra cosa, tratar de ver y entender primero el video y luego escribir el codigo sin hacer un copia y pega para que asi trates de memorizar y entender lo que hace Jon. Y si tienes errores, muchisimo mejor, igual sin ver el codigo de Jon, intenten encontrar el error por ustedes mismos para que entiendan qué era y cual era la solucion. Ya he tenido varios de estos y, en este mundo de la programacion que nos adentramos, siento que mientras mas errores cometes, mas aprendes. Suerte y exito a todos!

[@oscarsamuelramirezvargas2489]

Por fin el 100, llevo 6 meses aprendiendo contigo todos los días Maestro! Muchas muchas gracias por tu labor!🎉

[@jonmircha]

Felicidades!👋🏻😉

[@alphaphantom3846]

y llegamos al video 100, aun con muchas cosas que vuelan la cabeza pero motivados por la pasión y el don de enseñanza del profe jon...🎉🎉🎉🎊🎊 a seguir dándole carajo! saludos desde Colombia.

[@jonmircha]

👏🏻👏🏻👏🏻

[@brandonluna8245]

Me alegra haber solucionado el problema de una manera similar a la tuya Jon , estuve mucho tiempo trabado intentando agregar el atributto autoplay y quintandoselo respectivamente , al final repasando la documentación aprendí sobre play() y pause() y pude solucionarlo! 🤓💪

[@jonmircha]

👋🏻😉

[@eliam9461]

Fue hace un mes y ya van más videos pero aún así quiero agradecerte profe por 100 capitulosss!! Ha sido mi mejor inversión de tiempo en cuarentena 🤓👆

[@jonmircha]

Excelente :) que bueno que te sirva

[@fmliadiazloza4219]

Gracias querido amigo ojala dios te bendiga por ser una gran persona👌

[@jonmircha]

🥰🙌🏻

[@miltontsilva]

Hola John, llega a la clase 100 y voy hasta el final. Luego volveré al principio para practicar. Muchas gracias por tu esfuerzo y dedicación. Viendo tus videos en abril de 2023 desde Brasil.

[@jonmircha]

😉👋🏻

[@seica5561]

excelente JOn.. eres un crack.. Gracias por tus enseñanzas.. me toca ver el curso de NodeJS.. Me quedo atónito con todas las posibilidades de JavaScript.. San Antonio de Los Altos. Estado Miranda. Venezuela (25/06/2020)

[@miktl]

Logré hacerlo profe 🤩 con el intersecting y el visibilitychange

[@jonmircha]

😉👏🏻

[@victormaldonado6269]

Saludos profe, muchas gracias por preocuparse en que quede tan claro cada concepto. No me funcionaba el detener el vídeo cuando cambio de tab en el navegador, vi que en el código del ejercicio colocó un manejador de evento a cada intersectionObserverEntry. Después e muchas vueltas decidí colocarle un solo manejador del evento visibilitychange al grupo de vídeos y cuando suceda, se pausa cada vídeo dentro de este grupo. Usé un vídeo mas largo para evitar que por un loop no se pudiera apreciar muy bien, porque entre un cambio de tab y el otro el desfase entre el pausarlo y continuarlo es como de 2 o 3 segundos y no se puede apreciar muy bien. Esta fue la modificación, usé variables en español porque aprendiendo prefiero diferenciar lo que es código JavaScript y cosas del desarrollador: const d = document, w = window; export default function smartVideo() { const $videos = d.querySelectorAll("video[data-smart-video]"); const cb = (entradas) => { entradas.forEach((entrada) => (entrada.isIntersecting) ? entrada.target.play(): entrada.target.pause()) } const observador = new IntersectionObserver(cb, { threshold: 0.8 }); $videos.forEach(el => observador.observe(el)); w.addEventListener("visibilitychange", (e) => $videos.forEach(el => (d.visibilityState === "visible") ? el.play() : el.pause())) }

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy bueno el curso!!

[@jonmircha]

😉👋🏻

[@leomax522]

Muy bueno el video explicativo. Voy a intentar que el video se reproduzca cuando se pasa el mouse sobre el video. Gracias Jon.

[@jonmircha]

Mucha suerte!👋🏻😉

[@kevinayerdi]

Y un dia llegamos al video numero 100. tremendo laburo profe!

[@jonmircha]

😉👌🏻

[@cristianvianey]

Jon amigo, eres un maestro Jedi del JavaScript, voy terminando este capítulo 100, y sigo todos los días para poder ser muy buen programador y conseguir un empleo en el área. Mil bendiciones! Sigue asi! No sabes a cuanta gente estas ayudando de verdad. Le doy me gusta a todos tus videos, suscrito hace un año... Espero un día poder retribuírtelo.

[@jonmircha]

😉👋🏻

[@angelalejandro6794]

Gracias por el tiempo que te das para enseñarnos javaScript ... un saludo desde Peru. Jonmircha (profesor)

[@jonmircha]

De nada, comparte para llegar a más gente

[@josevicentegonzalezsuarez516]

Ya el video 100!!! Gracias por compartir tus conocimientos, estoy haciendo un reciclaje que sin tí seguro no hubiera sino lo mismo. Todas las explicaciones del código claras y sin irte por las ramas. Un saludo desde #GranCanaria #IslasCanarias

[@jonmircha]

😉👍🏻

[@lubergonzalez7750]

Muchas gracias por el curso esta genial ya al fin me estoy poniendo al día no es fácil 100 videos y ademas muy bien explicados le deseo muchos exitos en su camino y agradecido nuevamente por compartir sus conocimientos con esta comunidad saludos desde Caracas.

[@jonmircha]

De nada, comparte para llegar a más gente 💪🤓

[@nicolasdelgado8128]

Llegue a los 100!! Gracias Jon!

[@jonmircha]

Felicidades!

[@user87546]

estaba repitiendo toda la intro en tiempo real y cuando dijo clase 100 tambien dije wow y quedó al unísono tambien. Creo que ya estoy demasiado jonmirchaizado

[@jonmircha]

😅

[@axelpaz4601]

grande jon felicitaciones y gracias 🍻🍻🍻🍻!!!!!!!!!!

[@jonmircha]

😉👋🏻

[@josepalacios9273]

Felicitaciones por los 100 videos. Tu forma de enseñar es tan buena que ni se siente que han pasado 100 clases. Vamos por mas, hasta las ultimas consecuencias :)

[@jonmircha]

Gracias :) comparte para llegar a más personas

[@shepharddeveloper5823]

Por fin llegué al video 100 :3 ahora solo me faltan 65 videos mas, igual no dudo que un futuro tenga que repasar algunos videos xD Gracias por tanto Jon Mircha

[@jonmircha]

👋🏻😉

[@benitoalvarez8032]

gracia jonnnnn llegue tarde para felicitarte por tu video100. Estaré atento al 200!!! saludos buen doo ccente

[@jonmircha]

Gracias por el apoyo

[@snk263]

impresiontante tu curso jon llevo casi un mes y medio desde que empece , no tenia idea de nada y ya siento q empiezo a entender un poco

[@jonmircha]

:)

[@edgarzambrano3505]

profe llegando a la clase 100 , gracias profe

[@jonmircha]

👏🏻👏🏻👏🏻

[@CTZDev]

Estoy feliz, por encontrar este hermoso canal y un profe tan genial , sigue así Jon muchas bendiciones :D :D . Motivas a muchas personas a seguir en este hermoso mundo de la programación , éxitos profe

[@jonmircha]

Gracias por tus bendiciones

[@heimancastro1954]

otra buena clase del maestro

[@jonmircha]

👋🏻😉

[@danielfabiani4468]

Fantastic. 100 veces gracias.

[@jonmircha]

Mil gracias!

[@instintoimagen]

este es el mejor #curso de #javascript

[@jonmircha]

😉👍🏻

[@LuisCabrera]

Kenay! wow hace como 5 o 6 años aprendí POO con uno de tus videos y recuerdo ese nombre

[@jonmircha]

;)

[@korbal1123]

100 veces GRACIAS!!

[@jonmircha]

😉👍🏻

[@baneymelo7468]

Ready to start!

[@lucianomoreno5070]

No se porque se han parado las clases. Es temporal o indefinidamente

[@carloscontreras6051]

100 veces gracias Jon por llegar hasta aca (mas todas las de los otros cursos) a paso lento pero voy avanzando muchisimo gracias a tus clases!! Un comentario sobre esta clase, a alguien mas le paso esto? tuve q definir asi es addEventListener (perdon por poner codigo pero se me borran los links) (d.visibilityState === "visible" && entry.isIntersecting) ?entry.target.play() :entry.target.pause(); Poque me paso que se pause el video por estar fuera del viewport, cambiar de pag y al volver se reinicia sin verse

[@jonmircha]

😀👍🏻

[@AlejandroGuerrero]

¡¡¡Llegué al 100!!! GRACIAS!!!

[@jonmircha]

Felicidades!

[@perezheguy]

100 geniales clases¡¡¡¡¡ Gracias

[@jonmircha]

Hola, muchas gracias, comparte para llegar a más gente :)

[@raulgarciaespinoza3044]

Genial profe! ansioso hasta el próximo capítulo :( espero sea asi

[@jhonsuarez2103]

Bueno, llegue al 100 jajajajaj, gracias Jon, vamos hasta el final.

[@jonmircha]

🙌🏻😉

[@z3r0krypt]

Revisando los ejercicios anteriores me di cuenta de algo, cuando cambiamos el foco, el listener del "visibilitychange" con el operador ternario lo único que evalúa es el document.visibilityState, el problema es que al cambiar de pestaña, cuando vuelves a la pagina el video se continua reproduciendo, sin importar si es visible o no y eso seria "un problema", imaginad en netflix, que al cambiar el foco de vuelta te reproduzca todo... De locos. Sería tan sencillo como evaluar lo siguiente: w.addEventListener("visibilitychange", (e) => { (d.visibilityState === "visible" && entry.isIntersecting) ? entry.target.play() : entry.target.pause() });

[@jonmircha]

🤓👍🏻

[@alexdurand5287]

Buen video Jon. Quisiera hacer un pequeño aporte cuando cambiamos de ventana o minimizamos y volvemos a la ventana de nuestro dom, los 2 videos se reproducen para que esto no pase simplemente lo modifique al evento visibilitychange w.addEventListener("visibilitychange", (e) => { if (d.visibilityState === "visible" && entry.isIntersecting) { entry.target.play(); } else { entry.target.pause(); } });

[@jonmircha]

🤓👍🏻

[@_-_-_-_-_-_-_-_-_---_-_--_----]

Mas sencillo hacerlo con document.hidden, devuelve true o false

[@CarritosParaPerros]

llegamos al 100! Gracias Jon!

[@jonmircha]

Felicidades!

[@addevmoises]

Ya 100 videos vistos en esta gran aventura virtual aprendiendo JS, he aprendido mucho desde estos 5 o 6 meses que me suscribí a tu canal, no tenía idea de JS para nada muchas gracias Jon. Tengo una duda aparte, ¿todas las APIS que hemos visto son promesas internamente? ¿o solo son promesas las APIS que ocupan .then y .catch como se vio en la clase de las promesas?

[@jonmircha]

Sólo cuando usamos then y catch

[@addevmoises]

@@jonmircha gracias por aclarar mis dudas :)

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@joelant03]

Muchas gracias por mostrarnos la verdad y el camino. Quiero saber gran maestro, es de buena practica crear un modulo para cada función y si es así usted recomienda que sea default siempre?

[@jonmircha]

Depende de la complejidad de tu módulo puede ser uno por función pero quiza algunos tendrán más de uno. De Preferencia es mejor evitar el default 😉

[@joelant03]

@@jonmircha Muchas gracias otra vez, por último, cabe la posibilidad de uno o dos videos que solo hablen de las buenas prácticas actuales. Créame es algo que no se enseña en la uni, sino en a nivel laboral!

[@maximocapital]

Saludos, excelentes tus videos. ¿cómo empatas el video inteligente con el diseño responsable?

[@jonmircha]

PUes así, meter la programación del video inteligente en la mediaqueries para desktop

[@jasserblanco2805]

El mejor video de lo que va el curso para mi gusto, lo que si no logre comprender porque puso el el evento visibilityChange dentro del IF, yo habia hecho el ejercicio antes de ver el video y pues lo use fuera del if me podria explicar porque profesor?

[@adriel8152]

Hola; no lo puso dentro del if, si te fijas bien está dentro de las llaves {} que engloban el forEach de entries. Funciona bien y es óptimo, pero definitivamente hay otras maneras de hacerlo. Si tú lo hiciste de otra forma y te funciona, y es más óptimo entonces igual está bien.

[@juancruzledesma5693]

Apenas consiga el primer trabajo pago, prometo invitarte un taco Jon!

[@jonmircha]

🤗💛🌮😋

[@miguelfasanella6042]

Lo mismo digo! Sin conocerle siento que le tengo una deuda gigantesca

[@davidavellaneda133]

Ese ejercicio del envío del formulario lo hace el profe Jon en los ejercicios de Ajax?

[@jonmircha]

Sï

[@reyns8059]

y una duda que tengo, aunque creo que la respuesta sería que si, es si este tipo de comportamientos de autoplay y pause al cambio de pestañas y cambio de foco funcionarian por ejemplo en el caso de algun slider con autoplay o en algun otro tipo de elemento que tenga algun tipo de animacion? Sé que probablemente es tontería pero por saber nunca está de más xD

[@cleimangerman]

Muy bueno

[@jonmircha]

😉👍🏻

[@timawid]

❇️❇️❇️❇️❇️ excellent!

[@jonmircha]

👋🏻😉

[@rutita]

1🍎🍎!!! Gracias por tanto querido profesor!!!

[@jonmircha]

😋🍎

[@davidm.8835]

Muy útil! Yo he visto que en versión móvil por ejemplo youtube tambien utiliza este sistema y mi pregunta es que cantidad de datos consume esto, aunque sólo se ejecute segundos. ¿No sería mejor poner una foto-enlace que redirigiera por link al video en versión móvil? Me ha gustado :D

[@manuseitz8887]

Jon, respecto a lo que decís en el minuto 25:33 siempre he tenido una duda. ¿Qué pasa si el usuario entra a las herramientas de desarrollador del navegador y elimina esos atributos "required"? ¿El formulario se enviaría en ese caso?

[@illiantech1080]

buen video, explicas muy genial, aunque tengo una duda, cuando salgo y entro en la pestañá sin que el elemento este intersectado (aunque lo llego a estar) se dispara el evento "visibility change", en funcion de lo que se quiere conseguir eso no deberia pasar, me imagino que pasa porque al dispararse el evento se guarda el registro del mismo de manera asyncrona, me he dado cuenta de ello tras juguetear mucho con eventos, me imagino que se puede solucionar esto con por ejemplo (removeEventListener) pero si alguien sabe otra manera diganme, gracias de antemano ☺☺

[@NonsenseIsOver]

Profe, y sirve en IntersectionObserver para aplicar estilos a los elementos cuando aparecen en el viewport, o para eso es mejor utilizar las propiedades del scroll?

[@NonsenseIsOver]

Como por ejemplo scrollTop, offsetTop y el evento 'scroll'

[@jonmircha]

Si también se podría

[@mariofernandorobayorestrep4470]

La función addeventlistener no estaría agregando se por cada cambio de sección?

[@jonmircha]

no, gracias a la delegación de eventos

[@nelosanjines6463]

Exelente el video, Jon una consulta Cual seria la configuracion y el plugin en gulp para trabajar con los modulos, si estamos trabajando en un archivo src y que involucra sass y pug, que sale a conpilacion, o de pronto se puede trabajar en el archivo public de salida, no se si esto causaria algun problema, es decir mandar a llamar directamente desde el archivo public script(src= `../dev/js/modules.js` type= 'module') es posible?

[@jonmircha]

NO tengo idea tengo años que no trabajo con Gulp pero seguro si buscas en su página de plugins habrá uno :)

[@jorgerafaelcallejoflores67]

excelente...

[@tomasalvarez922]

Gracias profe! Ahora me voy a trabajar a netflix😎

[@jonmircha]

jejejeje

[@NonsenseIsOver]

Profe, una pregunta que no tiene nada que ver con este vídeo pero que a lo largo del curso he estado viendo: ¿Cuando se trabaja sin frameworks todos los estilos se escriben en un sólo archivo CSS? Porque recuerdo que en React hay una hoja por componente, y "creo" que al transpilar el código se convierten todas en una sola.

[@jonmircha]

Es lo recomendable para no lidiar con tanta hoja de estilos

[@statuqo]

Hola profesor! Me imagino que va a utilizar Postman o algún app por el estilo en el siguiente ejercicio.

[@jonmircha]

No lo sé talvez, pero si usará un software para consumir APIs usaría INSOMNIA es más ligero y su interfaz muy minimalista

[@statuqo]

@@jonmircha no he probado INSOMNIA pero ya está en mi lista...

[@colommbiano]

maestro nos podria hacer el favor de enseñar a través de un vídeo acá en youtube como podemos darle formato moneda a un input con javascript, es decir cuando el usuario digite un numero salga de esta manera $ 399.000 me entiende

[@perdomoyaneri8018]

[@jonmircha]

👋🏻😉

[@martinbenitez5150]

Hola Jon, te hago una consulta o a cualquiera que lea esto, ¿con esto se puede hacer un seguimiento de los segundos del video? Por ejemplo, si quiero que salte un popup en x minuto o x segundo de un video, la idea es que no debería importar si adelantan el video o si tiene la velocidad aumentada o disminuida, la idea es que salte en el tiempo que yo quiero configurarlo independientemente de como estén viendo el video.

[@jonmircha]

mmm necesitas más cosas pero sí podría ayudar el intersection observer

[@martinbenitez5150]

@@jonmircha Lo logre realizar usando currentTime. No se si es la mejor solución pero me funciono.

[@Alejandro20302]

excelente tus clases jon, definitivamente el mejor... una duda, cuando cambio de pag sigue funcionando el video, el erro q da es q no esta entry definido, he intentado muchas soliciones incluyendo las q dan los compañeros abajo, pero no funciona, alquien sabe pq? estos son mis codigos: export default function smartVideo(){ const $videos = document.querySelectorAll("video[data-smart-video]"); const cb = (entries) => { entries.forEach((enrty)=> { if(enrty.isIntersecting){//cuando intersecto el espacio dnd esta el video enrty.target.play(); //entry tiene target }else{ enrty.target.pause(); console.log( enrty) } window.addEventListener("visibilitychange", (e) => document.visibilityState === "visible" ? entry.target.play() :entry.target.pause() ); }); } const observer = new IntersectionObserver(cb, {threshold: 0.5});//limite al 50 porciento $videos.forEach((el) => observer.observe(el)) }

[@Alejandro20302]

ya solucione, publico por si alguien tiene el mismop error, cree esta function fuera del cb. document.addEventListener('visibilitychange', function (e) { for (let i = 0; i < $videos.length; i++) { !document.hidden ? $videos[i].play() : $videos[i].pause() } })

[@codelessbudd7108]

@@Alejandro20302 El problema era que le habías puesto 'enrty' al parámetro en el forEach, y luego accediste a este dentro handler como 'entry' :)

[@Alex-iv3nv]

Creo que hay un error el eventlistener del visibilitychange es independiente del observador por lo cual cuando sales de la pestaña del navegador funciona y se pausan los videos, peroooo cuando vuelves a la pestaña se comienzan a reproducir y esto ocurre independientemente de que tengan o no el foco del obsevador, me di cuenta por que trabaje con el sonido activado, y luego lo hice con el video desactivo con menos del 50% de vista en pantalla... Así lo solucione espero que este bien.... w.addEventListener("visibilitychange", (e) => entry.isIntersecting && d.visibilityState === "visible" ? entry.target.play() : entry.target.pause() );

[@estebanoctaviopavezllanca2385]

Estimado adjunto ejercicio, github.com/Stev-189/Ejercicio_DOM Gracias Profe.-

[@perdomoyaneri8018]

[@jonmircha]

👋🏻😉

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@jonmircha]

😉👋🏻

[@ManuelMartinez-oe1ov]

Hay un problema profe, cuando se regresa a la pagina, todos los videos se vulven a reproducir, aqui adjunto mi modificacion para solucionarlo. Por otro lado, medio que me da ansiedad por el uso de recursos jajaj y recuerdo que dijo que hay que cuidar la acumulacion de listeners, y aqui veo que se añade un listener cada que se ejecuta la cb del inserctionObverver:(, muchas gracias por todo lo que comparte profesor, saludos desde Perú. window.addEventListener("visibilitychange", e => { if (d.visibilityState === 'visible' && entry.isIntersecting) { entry.target.play() } else { entry.target.pause() } })

[@jonmircha]

😉👍🏻

[@braianrico4422]

🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

🙌🏻🙌🏻🙌🏻

[@cinefusion6374]

Hola amigo necesitaba un scripts que detecte el usuario cuando vea el vídeo y terminé apartesca el botón ver siguiente video y lo empuje a la otra página, que contenga ganancias y punto d evista

[@abelsilvasantacruz9584]

Video 100 ♥ ♥.♥

[@jonmircha]

😎

[@martinbergesio1990]

Buenos días. Que buenos ejercicios Jon, son realmente prácticos. Pero con este me surge una duda la funcionalidad de pausar y reanudar el video al cambiar de pestaña no me acaba de funcionar. Me pasa que al cambiar de pestaña si se pausa, pero cuando vuelvo a mi página comienza a reproducirse los dos videos, no solo el que esta en foco. La verdad no pude ver si a ti también te pasa porque no se llegan a ver los dos ideos a la vez en tu pantalla. Y estuve leyendo información pero no logro resolver ese problema. ¿A ti también te pasa? Un saludo muchas gracias :D

[@jonmircha]

Por eso es que yo tengo separado los videos para quenunca se vean al mismo tiempo ya que el observer los reproduciría en el momento que estos esten en pantalla

[@martinbergesio1990]

@@jonmircha Perdona que insista, pero yo también los tengo separados e incluso hice una prueba con 50 br para asegurar que nunca se puedan ver los dos a la vez pero me sigue pasando lo mismo. Ya se que ha pasado mucho tiempo desde que hiciste este ejercicio y no lo tendrás en la memoria pero yo tengo la sospecha que el problema esta a la hora de ejecutar el addEventListener ya que ahí solo verificamos que el d.visibilityState sea "visible" y entonces pausamos o le reanudamos el video pero peo no comprueba si el entry.isIntersecting sea true o false. const cb = (entries) => { //console.log(entries); entries.forEach((entry) => { //console.log(entry.target); if (entry.isIntersecting) { entry.target.play(); } else { entry.target.pause(); } w.addEventListener("visibilitychange", (e) => { if (d.visibilityState === "visible") { entry.target.play(); console.log(entry.target); } else { entry.target.pause(); } }); }); }; Perdón por ser pesado, pero llevo horas con este ejercicio probando cosas, incluso lo puse en un condicional if para poder ir poniendo consol.log a ver si así detectaba el problema. Si alguien tiene el mismo problema y lo ha podido resolver me sería de gran ayuda. Un saludo para ti Jon y para todos :D

[@martinbergesio1990]

Por lo que me parece entender el problema esta en que en esta linea de código que está fuera del if donde comprobamos si entry.isIntersecting es true le decimos que cuando se pase ese evento si d.visibilityState es visible que lo ponga en play con lo cual se ponen en reproducción los dos videos no solo el que esta en foco. Pero no logro ver la solución a dicho problema o quizás me estoy equivocando, que también es muy probable w.addEventListener("visibilitychange", (e) => (d.visibilityState === "visible" ? entry.target.play() : entry.target.pause())); Lo siento por la insistencia, más que anda lo escribo porque me ayuda a ordenar las ideas y tambien por si algún alumno tambien me puede ayudar no solo tu. Un saludo, muchas gracias :D

[@martinbergesio1990]

Bueno después de haberme pasado toda la noche peleandome con este problema al final me fui a dormir, y esta mañana más despejado me volví a poner a intentar resolver este problema. Y al final creo que he conseguido solucionarlo, como decía creo que el problema estaba en que a la hora de volver a la pestaña del ejercicio como ya estabamos fuera del if que verificaba si el video estaba en foco o no ponia en reprducción los dos videos. Así que añadí al condicional del addEventListener otra condición donde comprobara que entry.isIntersecting sea true y con esto resolví el problema. Lo siento por este bombardeo de comentarios pero, iggualmente muchas gracias por todo. Aquí dejo la modificación que hice para solucionarlo. w.addEventListener("visibilitychange", (e) => { if (d.visibilityState === "visible" && entry.isIntersecting) { entry.target.play(); console.log(entry.target); } else { entry.target.pause(); } }); Un saludo, muchas gracias! :D

[@jonmircha]

@@martinbergesio1990 bien :)

[@franciscomarichal9593]

la verdad esta API de intersection Observer y el evento Visibility Change No fueron dificiles, una vez que tienes los conceptos basico de la documentacion y te pones a Codear

[@jonmircha]

👏🏻

[@andresparragarzon4572]

😎😎😎👌👌👌

[@federicoraulmaciasaparicio1339]

Jon. Dejo la resolución del ejercicio de validaciones de formularios en JavaScript. Es bastante básico, pero al menos funciona y las expresiones regulares también cumplen su función. codepen.io/Scipio14/details/ZEQvwWW

[@jonmircha]

Muy bien :)

[@infinity5135]

ya me hiciste enojar, porque apenas me voy enternando que habia esto , y no lo sabia :D

[@jonmircha]

¯\_(ツ)_/¯

[@brandon400]

100🎉🎉🎉

[@strongapm5335]

profe jon. A que se debe que cuando accedo al valor de cualquier propiedad de "entries" me sale como undefinded y cuando accedo a la propiedad como tal me muestra todos sus valores. Por lo tanto, no puedo validar como verdadero mi condición con isIntersecting :(

[@jonmircha]

😮

[@cristianroldan337]

Buenas noches Jon. Consulta. Pude resolver el ejericicio, pero tengo un problema, el intersectioObserver solo me funciona cuando abro la consola. Yo paso por el video, y no se inicia, y estando en la misma posicion, al abrir la consola con F12, el video se incia, y luego si, anda todo, cuando me alejo (no lo veo) se pausa, y cuando lo veo, se activa nuevvamente. Pero el problema está en que solo funciona si abro la consola (si la abro y luego la cierro, sigue funcionando, pero para que funcione, parece que es necesario que abra la consola)

[@jonmircha]

😮

[@cristianroldan337]

@@jonmircha no le pasa lo mismo en el minuto 17:53 🤔

[@sandokanArg]

Jon, todo bien? hace dias que no subir nada

[@jonmircha]

Todo bien kzbin.infoUgwekUq7gSq9J51Ecd94AaABCQ

[@cinefusion6374]

Muy buenas tarde un favor necesito un script de alerta cuando el usuario no vea el vídeo y cuando lo vea salga puedes ver el siguiente video en html y un sumador de ganancias vídeo visto 1 as ganado $ que sume los votos y las ganancias.

[@HexordZX]

Si les pasa como a mí que el vídeo no se redimensiona o se ve muy grande, agreguénle un width del 100% al data-smart-video en sus estilos

[@jonmircha]

😉

[@hardisonpaulino8846]

🫡🫡👏👏

[@jonmircha]

👋🏻😉

[@sandokanArg]

ahi me entere que hubo un sismo, ustedes estan bien?

[@ArturoJimenez]

Lo dijiste y ya esta pasando ... Bootstrap 5 Alpha - No usa jQuery .... Javascript Vanilla - blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

[@jonmircha]

😎

[@GERARDHHH]

video 100 y todavia no se ni por donde me da el sol