Estoy usando un video incrustado de Vimeo (código de incrustación iFrame de su sitio web) en mi sitio web, y necesito que el video se detenga automáticamente en una marca de tiempo específica (usaré 6 segundos aquí) cada vez que los usuarios de mi sitio reproduzcan el video . El contenido después de la marca de tiempo no es necesario.
Pero a diferencia de YouTube, Vimeo no parece tener una manera fácil de establecer tiempos de finalización para cualquier video que incrustes desde ellos. Desafortunadamente, no soy el propietario del video, por lo que no puedo editar el metraje directamente, por lo que creo que una solución de JavaScript es la mejor opción.
Aquí está el HTML incrustado de iFrame mencionado anteriormente de Vimeo que uso en mi sitio:
<iframe id="vidz" src="https://player.vimeo.com/video/401649410?h=11d74aa27c&portrait=0" width="450" height="253" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>Al intentar seleccionar elementos dentro del iFrame (como el video en sí), mis selectores JS no parecen funcionar en absoluto, ¿quizás porque el video proviene de una fuente separada que no está alojada en mi sitio?
Aquí hay un código con el que he estado trabajando, pero no parece estar interactuando con el iFrame, ya que creo que necesitaría agregar este eventListener a un video, directamente. Pero parece que tampoco puedo seleccionar el video incrustado a través de JS. Así que no estoy muy seguro de cómo manejar esto:
var vid = document.querySelector("#vidz"); vid.addEventListener("timeupdate", function(){ if(t >= 6000) { vid.pause(); } });También puedo proporcionar el HTML a cualquier elemento dentro del iFrame, pero nuevamente, no estoy seguro de cómo podría interactuar con esos elementos.
¿Algunas ideas? Cualquier y toda ayuda sería profundamente apreciada. Salud.
use el archivo Vimeo js y debajo hay una secuencia de comandos que desea que el video se detenga después de 6 minutos (tiempo específico) (360 significa 6 minutos)
<script src="https://player.vimeo.com/api/player.js"></script> var iframe = document.querySelector('iframe'); var player = new Vimeo.Player(iframe); function foo() { player.getCurrentTime().then(function(time) { console.log('time:', time); if(time >= 360){ player.pause() } }); setTimeout(foo, 1000); } player.on('play', function() { foo(); }); </script>