web-dev-qa-db-fra.com

La vidéo HTML5 ne sera pas en boucle

J'ai une vidéo en arrière-plan d'une page Web et j'essaie de la faire passer en boucle. Voici le code:

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

Même si j'ai dit à la vidéo de boucler, ce n'est pas le cas. J'ai aussi essayé de le mettre en boucle avec l'attribut onended (comme ce fil de support de Mozilla , j'ai aussi essayé ce morceau de jQuery). Rien n'a fonctionné jusqu'à présent. Est-ce un problème avec Chrome ou mon code?

Modifier:

J'ai vérifié les événements réseau et HEAD d'une copie de travail ( http://fhsclock-labs.heroku.com/no-violence )) par rapport à l'application que je suis La différence est que la copie de travail sert la vidéo à partir d’un élément statique de Heroku (via Varnish, apparemment), alors que la mienne sert de GridFS (MongoDB).

L'onglet Réseau de l'inspecteur de Chrome indique que, dans mon application, la vidéo est demandée trois fois. Une fois le statut est "en attente", le second est "annulé" et le dernier est 200 OK. La copie de travail ne montre que deux demandes, l’une des statuts est en attente et l’autre est 206 Contenu partiel. Cependant, une fois la vidéo lue, cette demande devient "Annulé" et une autre demande est présentée pour cette vidéo. Dans ma demande, cela ne se produit pas.

En ce qui concerne Type, dans mon application, deux sont "indéfinis" et l'autre "vidéo/mp4" (ce qui est censé l'être). Dans l'application de travail, toutes les demandes sont "vidéo/mp4".

De plus, je reçois Resource interpreted as Other but transferred with MIME type undefined. avertissements dans la console.

Je ne sais pas trop par où commencer. Je pense que le problème concerne le serveur, car le fait de servir le fichier sous la forme d'actifs statiques fonctionne bien. Il se peut que le serveur n’envoie pas le type de contenu correct. Cela pourrait être un problème avec GridFS. Je ne sais pas.

En tout cas, la source est ici . Toute idée que vous pouvez offrir est appréciée.

google-chromemime-typeshtml5-videorackgridfs
66
Ethan Turkeltaub

Ah, je viens de tomber sur ce problème précis.

En fait, en boucle (ou toute sorte de recherche, d'ailleurs) dans <video> elements on Chrome ne fonctionne que si le fichier vidéo a été servi par un serveur qui comprend demandes de contenu partielles. Par exemple, le serveur doit honorer les demandes contenant " En-tête "Range" avec une réponse 206 "Contenu partiel". C'est le cas même si la vidéo est suffisamment petite pour être entièrement tamponnée par chrome, et qu'aucun autre aller-retour serveur n'est effectué: si votre serveur n'a pas honoré la requête Range de chrome la première fois, la vidéo ne sera ni en boucle ni utilisable.

Alors oui, un problème avec GridFS, bien que sans doute Chrome devrait être plus tolérant.

117
afri

Solution de contournement la plus simple:

$('video').on('ended', function () {
  this.load();
  this.play();
});

L'événement 'ended' Se déclenche lorsque la vidéo arrive à la fin, video.load() réinitialise la vidéo au début et video.play() commence à la lire immédiatement une fois chargée.

Cela fonctionne bien avec Amazon S3 où vous n’avez pas autant de contrôle sur les réponses du serveur et évite également les problèmes de Firefox liés à video.currentTime Ne pouvant pas être réglés si une métadonnée de longueur manque à une vidéo.

JavaScript similaire sans jQuery:

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};
16
d2vid

On dirait que ça a été un problème dans le passé, il y a au moins deux bogues fermés dessus, mais les deux disent qu'il a été corrigé:

http://code.google.com/p/chromium/issues/detail?id=3968

http://code.google.com/p/chromium/issues/detail?id=18846

Depuis Chrome et Safari utilisent tous les deux des navigateurs Webkit, vous pourrez peut-être utiliser certaines de ces solutions de rechange: http://blog.millermedeiros.com/2011/03/html5- vidéo-questions-sur-l'ipad-et-comment-les-résoudre /

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);
6
John

Juste au cas où aucune des réponses ci-dessus ne vous aiderait, assurez-vous que votre inspecteur ne s'exécute pas avec l'option Désactiver le cache cochée. Depuis Chrome saisit la vidéo dans le cache, cela ne fonctionnera qu'une fois. Il suffit de le déboguer pendant 20 minutes avant de réaliser que c'était la cause. Pour référence, je sais que je ne suis pas le seul - rapport de bug de chrome d'une autre personne .

3
srussking

Ma situation:

J'ai exactement le même problème, mais changer l'en-tête du message de réponse ne suffisait pas. Pas de boucle, rejouer ou chercher. De plus, un arrêt pur ne fonctionne pas, mais cela pourrait être ma configuration.

Réponse:

Selon certains sites (ils ne pourraient plus les trouver), il est également possible de déclencher la méthode load () juste après la fin de la vidéo et avant le début du prochain. Cela devrait recharger la source et créer un élément vidéo/audio à nouveau opérationnel.

@ john

Veuillez noter que vos réponses/liens sont des bogues normaux, et non centrés sur ce problème. L'utilisation d'un serveur/serveur Web est ce qui cause ce problème. Alors que les bugs décrits par ces liens sont d'un type différent. C’est aussi pourquoi la réponse ne fonctionne pas.

J'espère que cela aide, je cherche toujours une solution.

3
WhoKnows

c'est super boiteux mais dropbox utilise le bon code de statut. Alors téléchargez dans Dropbox et remplacez le www par dl.

Ainsi, en utilisant une URL Dropbox, la lecture de la vidéo est correcte.

1
gabrielstuff