Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Productividad: Cómo ver cualquier vídeo a otras velocidades (YouTube, Vimeo o HTML5)

VelVideosHTML5

En ocasiones cuando estás viendo un vídeo en Internet te puede resultar interesante poder cambiar su velocidad de reproducción. Es posible que sea un vídeo muy rápido y que quieras verlo a cámara lenta para poder percibir mejor ciertos detalles. O quizá todo lo contrario y lo que quieras es pasarlo a mayor velocidad para verlo entero en menos tiempo: Los vídeos a 1.25x se entienden casi tan bien como los vídeos a velocidad normal pero tardas mucho menos en verlos. Simple productividad ;-)

La cuestión es que algunos servicios como YouTube sí que permiten variar la velocidad de reproducción de los vídeos, aunque es una opción que está bastante escondida. Otros como Vimeo, sin embargo, no permiten variar la velocidad de reproducción, y además dicen que no tienen intención de soportar esta característica tampoco. En otras ocasiones el vídeo está simplemente embebido en una página y no nos ofrece controles de ningún tipo para controlarlo.

Un buen programador jamás se resigna, y busca formas de "hackear" los sistemas y saltarse estas limitaciones. Así que he creado un bookmarklet (es decir, un pequeño script que puedes arrastrar a los favoritos de tu navegador) que habilita un control de velocidad de reproducción en cualquier vídeo HTML que haya en una página.

Para añadirlo a tu navegador solo tienes que mostrar la barra de favoritos de tu navegador, y arrastrar encima el siguiente botón (en el segundo vídeo más abajo se ve cómo hacerlo, por si tienes dudas):

A partir de este momento, cuando estés en cualquier página que contenga vídeos HTML, bastará con que pulses ese nuevo enlace para que se añada automáticamente un control de velocidad a los vídeos de la página, pudiendo variar la velocidad de reproducción a voluntad.

En el siguiente vídeo tienes una explicación de cómo utilizar este bookmarklet en varias situaciones diferentes, y cómo puedes sacarle partido en webs conocidas como Youtube o Vimeo:

Finalmente, para los más técnicos, en el siguiente vídeo muestro el código con detalle, explicando cómo he construido toda la aplicación. Se trata de código JavaScript auto-contenido, sin ninguna dependencia de bibliotecas de terceros como jQuery. Aunque es un código relativamente simple, utiliza algunos conceptos avanzados de programación JavaScript como clausuras, funciones pre-configuradas, y funciones auto-ejecutables:

¡Espero que lo encuentres útil!

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web | Trucos

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (17) -

Espectacular! Hay alguna forma de llevar esta aplicación a una tablet? pues por más que busqué no encontré nada para ello :(

Responder

José Manuel Alarcón
Spain José Manuel Alarcón

Hola Carolina:

Gracias. Me alegro de que te guste.

En un navegador de Tablet debería funcionar sin problema. Lo único que tienes que hacer es crear un favorito y sustituir la URL a la que apunta por el script del botón que está en el post. Con eso te funcionará también, al menos en iOS y en Android. En tablets con Windows, si usas Internet Explorer o Edge me temo que no puedes usar scriptlets por lo que la única forma de ahcer lo funcionar es copiando y pegando el script en la barra de direcciones una vez estás en la página con el vídeo que te interesa. Algo nada práctico :-(

Saludos.

Responder

Hola, muchas gracias!
Pero no está funcionando en lo Firefox, solamente abre una página en blanco. ¿Hay alguna manera de solucionar este problema?

Responder

José Manuel Alarcón
José Manuel Alarcón

Vaya, lo acabo de comprobar. Habrán cambiado algo... Lo miraré a ver si lo soluciono. Mientras tanto, en Chrome funciona perfectamente.

Saludos y gracias por avisar.

Responder

José Manuel Alarcón
José Manuel Alarcón

Listo. Lo he corregido. Ahora ya debería funcionarte también en Firefox.

Saludos!

Responder

Hola, lo añadì en chrome para Vimeo, pero no me funciona.. Por q serà? Gracias

Responder

muchas gracias !!, ya me funcionò !

Responder

Muchas, muchas gracias. No te imaginas el tiempo que me has ahorrado.

Responder

juan gomez
juan gomez

Hola disculpa pero no me  aparece el bookmarklet  como botón si no como imagen y no lo ´puedo arrastrar a  mi barra de favoritos,  https://gyazo.com/b29e45ee01d1a956a2781d74af52a4d2
la letras de velocidad se pueden selecciónar, si no me equivoco si estuviera siendo un boton esto no lo podría hacer
agradezco tu ayuda de antemanos , saludos

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Juan:

Tienes razón: no funcionaba. Hace poco editamos el post para cambiarle un detalle en el título y el editor se cargó el código que había en el botón, por eso no te dejaba arrastralo.

Lo acabo de corregir y ya está el código de nuevo. Si ahora lo arrastras no deberías tener problemas. Disculpa.

Gracias por avisar.

Saludos.

Responder

Donde esta la descarga del controlador de velocidades p / videos?
no veo donde esta aqui ?

Saludos

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Tienes que arrastrar a tu barra de favoritos el botón que hay al principio del artículo. Se ve en el primero de los vídeos y se explica en el texto.

Responder

Espectacular, muchas gracias, justo lo que necesitaba.

Responder

Jacqueline
Jacqueline

Hola amigo, vi el cielo abierto con esta herramienta, ya que tengo que ver dos horas de clases 3 veces por semana y se me hace largo y pesado, lo he instalado pero solo me funciona en youtube y en las demás me sale este mensaje No hay vídeos HTML5 en esta página o están en otro dominio diferente!! será que no se podrá?
Gracias

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Como explico ene l post, solo funciona en vídeos que están en el mismo dominio. Si entras en una página que muestra vídeos albergados en otro sitio web diferente (aunque se vean dentro de la misma página) no te funcionará. Si los vídeos no se muestran usando la etiqueta <video> tampoco.

Esto lo hice ya hace mucho tiempo sobre todo por Vimeo, que no soportaba cambiar la velocidad, pero ahora tanto YouTube como Vimeo lo soportan. Es más un experimento que otra cosa.

Saludos!

Responder

Hola, hay algo parecido que funcione para videos en Flash?.

Gracias

Responder

campusMVP
campusMVP

Hola Didier,

Hay extensiones como "Video Speed Controller" (chrome.google.com/.../related) que te pueden servir.

Pero si lo que quieres es poder comunicar JavaScript con ActionScript para un desarrollo propio, mejor te recomendamos que te vayas olvidando de Flash. Con las capacidades actuales de HTML5 y JavaScript no te merece la pena y la tendencia es que desaparezca (ya hay muchos navegadores y dispositivos que no lo soportan por defecto).

Saludos

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.