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

Question 1

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?

Question 2

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

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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

Question 7

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

Answer 1

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?

Answer 2

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

Answer 3

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

Answer 4

2

Cela ne fonctionne pas dans Safari. J'ai aussi essayé l'événement loadeddata. Des idées?

Simon Perepelitsa

Answer 5

Ça ne fait rien. C'est un problème avec le format WEBM. MP4 fonctionne bien.

Simon Perepelitsa

Answer 6

Utilisez l'événement 'durationchange' et appelez toujours pause avant d'apporter des modifications à la lecture de la vidéo

Jason White

Answer 7

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

Answer 8

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.

Answer 9

@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

Answer 10

y a-t-il un fragment pour définir l'heure de FIN?

DGoiko

Answer 11

Il permet même des fractions de seconde après un point: #t=17.79^ _ ^

Klesun

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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

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

Réponses: