Avviare il video HTML5 in una posizione particolare durante il caricamento?

91

Ho bisogno di un video HTML5 per iniziare a un certo punto. Diciamo alle volte 50 secondi in poi.

Ho provato ma non funziona come previsto. c'è qualcosa che sto facendo di sbagliato?

Ecco il codice:

   <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>

Quando la pagina viene caricata, la riproduzione inizia dall'inizio. Tuttavia, se lo chiamo durante la riproduzione come dopo un po 'di tempo, funziona bene. C'è qualcosa che mi manca?

javascript html5-video

— Johnydep
fonte

2

Quali browser? Hai provato a ritardare la chiamata di qualche millisecondo? Forse ci vuole un po 'più di tempo per caricare completamente l'elemento video

— Ortiga

130

Devi aspettare che il browser conosca la durata del video prima di poter cercare un momento particolare. Quindi, penso che tu voglia aspettare l'evento 'loadmetadata' qualcosa del genere:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

— Richard M
fonte

2

Questo non funziona in Safari. Ho provato anche l'evento loaddata. Qualche idea?

— Simon Perepelitsa

Non importa. Questo è un problema con il formato WEBM. MP4 funziona bene.

— Simon Perepelitsa

Usa l'evento 'durationchange' e chiama sempre la pausa prima di apportare modifiche alla riproduzione del video

— Jason White,

53

Puoi collegarti direttamente con Media Fragments URI , basta cambiare il nome del file in file.webm # t = 50

Ecco un esempio

Questo è abbastanza bello, puoi fare ogni genere di cose. Ma non conosco lo stato attuale del supporto del browser.

— rlovtang
fonte

Il supporto del browser è buono. Penso che tutti i browser che supportano HTML5 supportino almeno i frammenti di media temporali di base.

— Jim S.

@michaelhanon, sarebbe piuttosto facile scrivere un polyfill per IE per raggiungere questo obiettivo. Rileva il browser, se non supportato, suddividi l'URL, trova il parametro di ricerca, usa Javascript per cambiare l'ora del video ... Potrei farlo se ne avessi la possibilità

— gdgr

c'è un frammento per impostare l'ora di FINE?

— DGoiko

Permette anche frazioni di secondo dopo un punto: #t=17.79^ _ ^

— Klesun

51

SENZA USARE JAVASCRIPT

Basta aggiungere #t=[(start_time), (end_time)]alla fine del tuo URL multimediale. L'unico inconveniente (se vuoi vederlo in questo modo) è che dovrai sapere quanto tempo è il tuo video per indicare l'ora di fine. Esempio:

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

Note: non supportato in IE

— anita
fonte

la seconda cifra non sembra terminare la quantità di video caricata per cominciare ... la prima cifra ha funzionato. qualche idea?

— Martian 2049

questo non funziona davvero bene. il browser precarica ancora quanto vuole, forse inizia e finisce dove hai deciso, ma il precaricamento non si è fermato ...

— Martian2049

28

regolare l'ora di inizio e di fine del video quando si utilizza il tag video in html5;

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

dove a sinistra della virgola è l'ora di inizio in secondi, a destra della virgola è l'ora di fine in secondi. rilascia la virgola e l'ora di fine per applicare solo l'ora di inizio.

— BobK
fonte

la seconda cifra non sembra terminare la quantità di video caricata per cominciare ... la prima cifra ha funzionato. qualche idea?

— Martian 2049

Quando si lavora con i browser, è sempre meglio controllare le specifiche W3C e caniuse.com per vedere quanto sia ampiamente supportata una funzionalità. (Le migliori risposte StackOverflow si collegano alle specifiche.) In questo caso, si chiamano "Media Fragments" e le specifiche sono qui. w3.org/TR/media-frags

— Michael Scheper

3

Su Safari Mac per un'origine HLS, dovevo usare l'evento loaddata invece dell'evento metadata.

— Robert Reinhardt
fonte

Penso che i metadati caricati dovrebbero essere l'evento corretto, ma anch'io stavo ottenendo seekable.length 0 (solo in Safari su OSX) a meno che non ascoltassi dataloaded. Grazie

— Statuswoe

1

Perché questo è stato downvoted? Probabilmente non è direttamente correlato all'esempio fornito dall'OP, ma è effettivamente accurato e pertinente all'argomento generale della domanda.

— JayPea

3

Usare un #t=10,20frammento ha funzionato per me.

— Kamila
fonte

1

Questa è solo una ripetizione di altre due risposte con voti più alti che erano state scritte circa 5 anni prima.

— Michael Scheper