Устранение проблемы с перекрытием видео в Chrome

Question

При анимации полноэкранного видео фона я обнаружил, что если два тега <video> перекрываются, а в переводе с transform, в Chrome OSX, один из них становится темнее. Он отлично работает в других браузерах и в Chrome для 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>

Я воссоздал вопрос здесь: https://jsfiddle.net/2angdzzy/

Есть ли решения этой проблемы, или имеет какой-либо из вас видели или устранили эту проблему?

Answer 1

Это действительно странный вопрос. Я узнал, что если вы измените формат видеофайла на ogg, этого не произойдет. Возможно, вы должны попробовать другие HTML supported media formats для дальнейшего изучения.

Ваш последний номер Fiddle.

Тем не менее, лучший способ включить HTML video - это несколько форматов для лучшей совместимости.

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