Correction d'un problème de chevauchement de la vidéo dans Chrome - css, html5, google-chrome, html5-video

Lors de l'animation d'un arrière-plan vidéo plein écran, j'ai constaté que si deux <video> les balises se chevauchent, alors qu'elles sont traduites avec un transform, dans Chrome sous OSX, l’un des sous devient plus sombre Cela fonctionne parfaitement dans les autres navigateurs et sur Chrome pour Windows.

video {
width: 640px;
height: 320px;
display: block;
}

.top {
position:relative;
transform: translate(0,0);
transition: transform 1s ease;
}

.bottom {
position:relative;
transform: translate(0,10px);
transition: transform 1s ease;
}

.over:checked ~ .top {
transform: translate(0, 10%);
}

Over <input class="over" type="checkbox">
<video class="top" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>
<video class="bottom" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>

J'ai "recréé le problème ici: https://jsfiddle.net/2angdzzy/

Existe-t-il une solution de contournement à ce problème ou l’un d’entre vous at-il vu ou corrigé ce problème?

Réponses:

C'est un problème étrange en effet. J’ai découvert que si vous modifiez le format de fichier vidéo en ogg, ce n'est pas arrivé. Peut-être devriez-vous essayer d'autres Formats multimédia pris en charge par HTML pour complément d'enquête.

Voici votre mise à jour Violon.

Néanmoins, le meilleur moyen d’inclure un Vidéo HTML est avec plusieurs formats pour une meilleure compatibilité.

<video width="320" height="240" controls>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>