¿Iniciar el video HTML5 en una posición particular al cargar?

91

Necesito que el video HTML5 comience en cierto punto. Digamos en el momento 50 segundos en adelante.

Lo intenté pero no funciona como se esperaba. ¿Hay algo que esté haciendo mal?

Aquí está el código: 

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script>

Cuando se carga la página, comienza a reproducirse desde el principio. Sin embargo, si llamo a esto durante la reproducción, como después de un tiempo, funciona bien. ¿Hay algo que me esté perdiendo?

javascript html5-video Johnydep
fuente
2
¿Qué navegadores? ¿Ha intentado retrasar la llamada unos milisegundos? Tal vez esté tardando un poco más en cargar completamente el elemento de video
Ortiga

Respuestas:

130

Debe esperar hasta que el navegador sepa la duración del video antes de poder buscar una hora en particular. Entonces, creo que desea esperar el evento'loadedmetadata 'algo como esto:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);
Richard M
fuente
2
Esto no funciona en Safari. También probé el eventoloadeddata. ¿Algunas ideas?
Simon Perepelitsa
No importa. Este es un problema con el formato WEBM. MP4 funciona bien.
Simon Perepelitsa
Use el evento 'durationchange' y siempre llame a la pausa antes de realizar cambios en la reproducción del video
Jason White
53

Puede vincular directamente con URI de fragmentos de medios , simplemente cambie el nombre del archivo a file.webm # t = 50

Aquí hay un ejemplo

Esto es muy bueno, puedes hacer todo tipo de cosas. Pero no conozco el estado actual del soporte del navegador.

rlovtang
fuente
El soporte del navegador es bueno. Creo que todos los navegadores compatibles con HTML5 también admiten al menos los fragmentos de medios temporales básicos.
Jim S.
@michaelhanon, sería bastante fácil escribir un polyfill para que IE lo logre. Detectar el navegador, si no es compatible, dividir la URL, encontrar el parámetro de consulta, usar Javascript para cambiar la hora del video ... Podría hacerlo si tengo la oportunidad
gdgr
¿Hay un fragmento para establecer la hora de FINALIZACIÓN?
DGoiko
Incluso permite fracciones de segundo después de un punto: #t=17.79^ _ ^
Klesun
51

SIN USAR JAVASCRIPT

Solo agregue #t=[(start_time), (end_time)]al final de su URL multimedia. El único inconveniente (si desea verlo de esa manera) es que necesitará saber cuánto tiempo dura su video para indicar la hora de finalización. Ejemplo: 

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Notas: No compatible con IE

anita
fuente
el segundo dígito no parece terminar con la cantidad de video que se cargó para empezar ... aunque el primer dígito funcionó. ¿Alguna idea?
Martian2049
esto realmente no funciona bien. el navegador todavía precarga todo lo que quiere, tal vez solo comience y termine donde usted decidió, pero la precarga no se detuvo ...
Martian2049
28

ajustar la hora de inicio y finalización del video cuando se utiliza la etiqueta de video en html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

donde la izquierda de la coma es la hora de inicio en segundos, la derecha de la coma es la hora de finalización en segundos. elimine la coma y la hora de finalización para afectar solo la hora de inicio.

BobK
fuente
el segundo dígito no parece terminar con la cantidad de video que se cargó para empezar ... aunque el primer dígito funcionó. ¿Alguna idea?
Martian2049
Cuando se trabaja con navegadores, siempre es mejor consultar las especificaciones de W3C y caniuse.com para ver qué tan ampliamente admitida es una función. (Las mejores respuestas de StackOverflow se vinculan a las especificaciones). En este caso, se denominan 'Fragmentos de medios' y la especificación está aquí. w3.org/TR/media-frags
Michael Scheper
3

En Safari Mac para una fuente HLS, necesitaba usar el evento cargado de datos en lugar del evento de metadatos.

Robert Reinhardt
fuente
Creo que se supone que los metadatos cargados son el evento correcto, pero yo también estaba obteniendo seekable.length 0 (solo en Safari en OSX) a menos que escuchara los datos cargados. Gracias
Statuswoe
1
¿Por qué se votó en contra? Probablemente no esté directamente relacionado con el ejemplo proporcionado por el OP, pero es fácticamente preciso y relevante para el tema general de la pregunta.
JayPea
3

Usar un #t=10,20fragmento funcionó para mí.

Kamila
fuente
1
Esto es solo una repetición de otras dos respuestas más votadas que se escribieron unos 5 años antes.
Michael Scheper