Lancer la vidéo HTML5 à une position particulière lors du chargement?

91

J'ai besoin d'une vidéo HTML5 pour démarrer à un certain moment. Disons qu'au temps 50 secondes et plus.

J'ai essayé mais ça ne fonctionne pas comme prévu. est-ce que je fais quelque chose de mal?

Voici le code:

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

Lorsque la page se charge, la lecture commence simplement depuis le début. Cependant, si j'appelle cela pendant la lecture comme après un certain temps, cela fonctionne bien. Y a-t-il quelque chose qui me manque?

Johnydep
la source
2
Quels navigateurs? Avez-vous essayé de retarder l'appel de quelques millisecondes? Peut-être que cela prend un peu plus de temps pour charger complètement l'élément vidéo
Ortiga

Réponses:

130

Vous devez attendre que le navigateur connaisse la durée de la vidéo avant de pouvoir rechercher une heure particulière. Donc, je pense que vous voulez attendre l'événement 'sharedmetadata' quelque chose comme ceci:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);
Richard M
la source
2
Cela ne fonctionne pas dans Safari. J'ai aussi essayé l'événement loadeddata. Des idées?
Simon Perepelitsa
Ça ne fait rien. C'est un problème avec le format WEBM. MP4 fonctionne bien.
Simon Perepelitsa
Utilisez l'événement 'durationchange' et appelez toujours pause avant d'apporter des modifications à la lecture de la vidéo
Jason White
53

Vous pouvez créer un lien directement avec l' URI des fragments de média , changez simplement le nom de fichier en file.webm # t = 50

Voici un exemple

C'est plutôt cool, vous pouvez faire toutes sortes de choses. Mais je ne connais pas l'état actuel de la prise en charge des navigateurs.

rlovtang
la source
Le support du navigateur est bon. Je pense que tous les navigateurs prenant en charge HTML5 prennent également en charge au moins les fragments multimédias temporels de base.
Jim S.
@michaelhanon, il serait plutôt facile d'écrire un polyfill pour IE pour y parvenir. Détecter le navigateur, s'il n'est pas pris en charge, diviser l'URL, trouver le paramètre de requête, utiliser Javascript pour changer l'heure de la vidéo ... Je pourrais le faire si j'en ai l'occasion
gdgr
y a-t-il un fragment pour définir l'heure de FIN?
DGoiko
Il permet même des fractions de seconde après un point: #t=17.79^ _ ^
Klesun
51

SANS UTILISER JAVASCRIPT

Ajoutez simplement #t=[(start_time), (end_time)]à la fin de votre URL multimédia. Le seul inconvénient (si vous voulez le voir de cette façon) est que vous aurez besoin de savoir combien de temps votre vidéo est pour indiquer l'heure de fin. Exemple:

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

Remarques: non pris en charge dans IE

anita
la source
le deuxième chiffre ne semble pas mettre fin à la quantité de vidéo chargée au départ ... le premier chiffre a fonctionné tho. Des pensées?
Martian2049
cela ne fonctionne pas vraiment bien. le navigateur précharge toujours autant qu'il le souhaite, peut-être commencer et terminer là où vous avez décidé, mais la précharge ne s'est pas arrêtée ...
Martian2049
28

ajuster l'heure de début et de fin de la vidéo lors de l'utilisation de la balise vidéo en html5;

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

où à gauche de la virgule est l'heure de début en secondes, à droite de la virgule l'heure de fin en secondes. laissez tomber la virgule et l'heure de fin pour n'effectuer que l'heure de début.

BobK
la source
le deuxième chiffre ne semble pas mettre fin à la quantité de vidéo chargée au départ ... le premier chiffre a fonctionné tho. Des pensées?
Martian2049
Lorsque vous travaillez avec des navigateurs, il est toujours préférable de vérifier les spécifications W3C et caniuse.com pour voir à quel point une fonctionnalité est largement prise en charge. (Les meilleures réponses StackOverflow sont liées aux spécifications.) Dans ce cas, elles sont appelées `` fragments de média '', et la spécification est ici. w3.org/TR/media-frags
Michael Scheper
3

Sur Safari Mac pour une source HLS, je devais utiliser l'événement loadeddata au lieu de l'événement metadata.

Robert Reinhardt
la source
Je pense que les métadonnées chargées sont censées être l'événement correct, mais moi aussi j'obtenais seekable.length 0 (uniquement dans Safari sur OSX) à moins que j'écoute les données chargées. Merci
Statuswoe
1
Pourquoi cela a-t-il été rejeté? Ce n'est probablement pas directement lié à l'exemple fourni par le PO, mais il est factuellement exact et pertinent par rapport au sujet général de la question.
JayPea
3

Utiliser un #t=10,20fragment a fonctionné pour moi.

Kamila
la source
1
Ce n'est qu'une répétition de deux autres réponses aux votes plus élevés qui ont été écrites il y a 5 ans environ.
Michael Scheper le