Supprimer de charge noir flash sur la vidéo HTML5

J'ai été la création d'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 (1second). Dans Internet Explorer, il n'est pas question, cependant, dans Chrome, comme la vidéo est en cours de chargement n'est qu'un bref flash de l'écran noir. Est-il possible que je peux enlever ce flash, ou, à défaut, de le rendre 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 google Chrome, vous verrez la différence dans la façon dont la vidéo se charge. Sinon est-il une meilleure façon de mettre en œuvre cette? J'ai essayé d'utiliser un GIF animé, cependant la qualité est considérablement réduite.

Merci!

InformationsquelleAutor Tom | 2014-10-06
  1. 31

    L'Affiche de la section de cette post de blog indique les informations suivantes:

    "Si vous ne spécifiez pas une image d'affiche le navigateur peut simplement afficher un
    la boîte noire de remplissage des dimensions de l'élément."

    Si vous n'arrivez pas à résoudre ce problème en ajoutant simplement une couleur d'arrière-plan blanc de l' video élément... mais vous pouvez ajouter une simple feuille blanche de l'image comme ceci:

    HTML:

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

    • J'ai téléchargé des changements, mais il semble toujours être comment c'était avant :/
    • Avez-vous essayez de rafraîchir le cache de votre navigateur? Il a fonctionné parfaitement pour moi en chrome dans l'exemple de code.
    • Il fonctionne très bien pour la première charge, mais alors si vous actualisez la page ou cliquez sur les autres liens de la boîte noire est de retour.
    • Je pense que la boîte noire se produit alors que la vidéo est en cours de déchargement. Si c'est un deal-breaker, vous pouvez essayer de masquer la vidéo sur la page du beforeunload événement.
    • Sur une inspection plus minutieuse, je pense que vous avez raison. Je pense que cette solution pourrait fonctionner, mais je ne sais pas comment aborder la chose, des conseils? Merci pour l'aide pour l'instant trop.
    • Puisque vous êtes déjà à l'aide de jQuery dans votre page, essayez $(window).sur('beforeunload', function() { $("video").hide(); });
    • Il a travaillé comme un régal, merci beaucoup!
    • Très intelligent.

    InformationsquelleAutor TimHayes
  2. 2

    Vous pouvez utiliser gif transparent affiche:

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

    Mais ce n'était pas suffisant pour éliminer le clignotement dans Firefox. J'ai fini par cacher la vidéo jusqu'à ce qu'il joue:

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

    Régler le délai d'attente que vous voyez l'ajustement. Lorsque vous n'utilisez pas la lecture automatique, j'ai dû augmenter jusqu'à 400 ms.

    • Cela ne fonctionne pas. Il clignote en noir et puis il cache la vidéo pour la quantité de temps spécifié faire des contre-productif.
    • quel navigateur et système d'exploitation utilisez-vous? Vous pouvez essayer d'enlever la lecture automatique et démarrer la vidéo manuellement.
    • C'était la même chose pour moi sur Firefox pour Mac. La vidéo que j'ai est censé jouer au chargement de la page. C'est ce que mon client veut.
    InformationsquelleAutor user
  3. 1

    J'ai eu le même problème et il fixe en cachant l'élément vidéo à l'aide de CSS display:none jusqu'à ce que l'élément vidéo signalé qu'il avait fini de se charger, par l'intermédiaire de son onLoadedData de l'événement, et en réponse à cet événement, j'set display:block.

    Que se débarrasser de l'éclair noir.

    InformationsquelleAutor Duke Dougal
  4. 1

    Mettre dans une affiche de l'attribut dans la balise vidéo ne s'arrête pas la boîte noire de clignoter lorsque l'utilisateur actualise la page, cependant, j'ai utilisé la fonction masquer sur le beforeunload de l'événement et maintenant, le noir flash a disparu.

    $(window).on('beforeunload', function() {
   $("video").hide();
});
    • Mettez en pause les vidéos. Il ne cache pas, juste des pauses. Est plus lisse. Aidé pour moi: $(window).on('beforeunload', function() { $("video").each( function() { $(this).get(0).pause(); }); });
    InformationsquelleAutor Darryl Mendonez
  5. 0

    J'ai eu le même clignotant problème dans Firefox, même avec une affiche ensemble d'attributs. J'ai résolu ce problème en ajoutant une image de fond d'écran de la vidéo de la balise correspondant à la première image de ma vidéo.

    InformationsquelleAutor user3350623
  6. 0

    $(window).sur('beforeunload', function() { $("video").hide(); });

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

    InformationsquelleAutor user990967