web-dev-qa-db-fra.com

Supprimer le flash de chargement noir sur la vidéo HTML5

J'ai créé un site Web pour un jeu en ligne auquel je joue. Dans l'en-tête, j'ai une vidéo HTML5 qui joue très brièvement (1 seconde). Dans Internet Explorer, il n'y a pas de problème, cependant dans Chrome pendant le chargement de la vidéo, il y a un très bref flash d'écran noir. Existe-t-il un moyen de supprimer ce flash ou, à défaut, , faites-le blanc pour correspondre à l'arrière-plan? Vous pouvez voir ce que je veux dire ici http://testingfortagpro.meximas.com/ . Si vous l'essayez dans IE et le Chrome vous verrez la différence dans la façon dont la vidéo se charge. Sinon, y a-t-il une meilleure façon de l'implémenter? J'ai essayé d'utiliser un GIF animé mais la qualité est considérablement réduite.

Merci!

javascripthtmlcssgoogle-chromehtml5-video
21
Tom

La section affiche de ce article de blog indique ce qui suit:

"Si vous ne spécifiez pas d'image d'affiche, le navigateur peut simplement afficher une boîte noire remplissant les dimensions de l'élément."

Vous ne pouvez donc pas sembler résoudre ce problème en ajoutant simplement une couleur d'arrière-plan blanche à l'élément video ... mais vous pouvez ajouter une simple image d'affiche blanche comme ceci:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" >
  <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4">
</video>
31
TimHayes

Vous pouvez utiliser une affiche gif transparente:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Mais cela n'a pas suffi pour éliminer le clignotement dans Firefox. J'ai fini par cacher la vidéo jusqu'à sa lecture:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">

Réglez le délai comme bon vous semble. Lorsque je n'utilisais pas la lecture automatique, je devais l'augmenter jusqu'à 400 ms.

2
user

Mettre un attribut d'affiche dans la balise vidéo n'a pas empêché la boîte noire de clignoter lorsque l'utilisateur actualise la page, mais j'ai utilisé la fonction masquer sur l'événement `` beforeunload '' et maintenant le flash noir a disparu.

$(window).on('beforeunload', function() {
   $("video").hide();
});
1
Darryl Mendonez

J'ai eu le même problème et je l'ai résolu en masquant l'élément vidéo à l'aide de l'affichage CSS: aucun jusqu'à ce que l'élément vidéo signale qu'il avait terminé le chargement via son événement onLoadedData, et en réponse à cet événement, j'ai défini display: block.

Cela s'est débarrassé du flash noir.

1
Duke Dougal

$ (fenêtre) .on ('beforeunload', function () {$ ("video"). hide ();});

Cela masquera l'élément vidéo juste avant que la fenêtre ne décharge et charge le document suivant.

0
user990967

J'ai eu le même problème de clignotement dans Firefox, même avec un ensemble d'attributs d'affiche. J'ai corrigé cela en ajoutant une image d'arrière-plan au tag vidéo qui correspondait à la première image de ma vidéo.

0
user3350623