Para reproducir un vídeo (o audio) de forma nativa desde una página Web lo único que tenemos que hacer es usar una etiqueta <video>, y si el elemento multimedia está en un formato apropiado se reproducirá sin problemas:
<video src="miVideo.mp4" autoplay controls> </video>
Esto es solo rascar la superficie, pero lo pongo solo para situarnos.
Si necesitamos reproducir el archivo, no desde el principio sino desde una posición posterior, normalmente deberíamos recurrir a un poco de código JavaScript para establecer el punto actual con la propiedad currentTime del objeto correspondiente.
Lo que ya no es tan conocido es que en la mayor parte de los navegadores (todos excepto Internet Explorer), es posible conseguir ese efecto simplemente añadiendo un parámetro a la URL que indica dónde está almacenado el vídeo. Este parámetro es #t=.
Por ejemplo, si el vídeo anterior lo incluimos de esta manera:
<video src="miVideo.mp4#t=90" autoplay controls> </video>
El vídeo empezará a reproducirse automáticamente a partir del segundo 90, saltándose por tanto, de entrada, el primer minuto y medio. Si no le hubiésemos puesto el atributo autoplay no se reproduciría automáticamente, pero quedaría ya cargado directamente en ese punto, de modo que al darle al botón de "play" comenzaría a reproducir desde allí.
Podemos indicar también el otro extremo del intervalo, es decir, dónde queremos que se detenga automáticamente, usando el mismo parámetro:
<video src="miVideo.mp4#t=90,130" autoplay controls> </video>
De esta manera se reproducirá desde el segundo 90 y se detendrá automáticamente al llegar al segundo 130 (2 minutos y 10 segundos del inicio).
Si omitimos el primer parámetro (es decir, ponemos una coma y luego un número) el vídeo o el audio se empezará a reproducir desde el principio y se detendrá automáticamente al llegar al tiempo indicado:
<video src="miVideo.mp4#t=,130" autoplay controls> </video>
En este ejemplo se pararía a loas 130 segundo.
Es posible especificar valores decimales para finar más:
<video src="miVideo.mp4#t=10.25,130.5" autoplay controls> </video>
Y también expresiones en formato de hora (hh:mm:ss):
<video src="miVideo.mp4#t=00:00:10.25,00:02:10.5" autoplay controls> </video>
Que sería equivalente al ejemplo anterior, pero en este caso el segundo tiempo (el de detención) es más fácil de leer.
Recuerda que esto funcionará sin problema en Chrome, Firefox y Opera, pero Internet Explorer hará caso omiso. En ese caso lo reproducirá de la forma normal. Si es importante que funcione en todos los navegadores entonces deberás usar JavaScript. Si simplemente es una cuestión de asistir un poco al usuario y no es tan importante que empiece justo donde decimos, esta solución te valdrá perfectamente pues funcionará para un % muy alto de los navegadores del mercado. Y te evita programar 🙂
¡Espero que te sea útil!
