/ / Naprawienie problemu z nakładaniem się filmów w Chrome - css, html5, google-chrome, html5-video

Naprawianie problemu z nakładaniem się filmów w Chrome - css, html5, google-chrome, html5-video

Podczas animowania tła pełnoekranowego wideo stwierdziłem, że jeśli dwa <video> tagi nakładają się, podczas gdy są tłumaczone za pomocą a transform, w Chrome na OSX, ten w ramach staje się ciemniejszy. Działa doskonale w innych przeglądarkach i w Chrome dla 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>

Odtworzyłem ten problem tutaj: https://jsfiddle.net/2angdzzy/

Czy istnieje obejście tego problemu, czy ktoś z was widział lub naprawił ten problem?

Odpowiedzi:

1 dla odpowiedzi № 1

To naprawdę dziwna kwestia. Dowiedziałem się, że jeśli zmienisz format pliku wideo na ogg, to się nie stało. Być może powinieneś spróbować innych Obsługiwane formaty multimediów w formacie HTML do dalszego badania.

Oto Twoja aktualizacja Skrzypce.

Niemniej jednak najlepszym sposobem na włączenie Film HTML jest z wieloma formatami dla lepszej kompatybilności.

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