Я должен признать, что я не совсем уверен в том, что здесь происходит ... Учитывая, что это не 100% случай репро, также трудно быть уверенным, что любой обходной путь действительно работает ...
Но здесьВот некоторые комментарии и идеи.
Кажется, что это происходит только с .mp4 файлами.Я мог бы воспроизводить с другими .mp4 видео, но никогда с любым .webm файлом.
Так что одна вещь, которую вы можете попробовать, это перекодировать ваше видео в webm, это может бытьчто у mp4-декодера Chrome есть некоторые проблемы.
Кажется, что CSS анимации не вызывают эту проблему.Таким образом, вы можете переписать свой код перехода в CSS-анимацию, с основной проблемой, что вы не сможете остановить его посередине (но в любом случае фоновые переходы плохи).
function changeBackground() {
const element = document.getElementById('background');
if(element.classList.contains('apple')) {
element.classList.remove('apple');
element.classList.add('so');
}
else {
element.classList.add('apple');
element.classList.remove('so');
}
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
#background.apple {
animation: apple-to-SO 3s ease-in-out forwards;
}
#background.so {
animation: SO-to-apple 3s ease-in-out forwards;
}
@keyframes apple-to-SO {
from {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
to {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
}
@keyframes SO-to-apple {
from {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
to {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
Теперь, если вы предпочитаете управление js, кажется, что веб-анимация также не затрагивается.
let current = 1;
const urls = [
"https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png",
"https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg"
];
function changeBackground() {
const element = document.getElementById('background');
element.animate({
backgroundImage: ['url(' + urls[current] + ')', 'url(' + urls[+(!current)] + ')']
}
, {
duration: 3000,
iterations: 1,
fill: 'both'
}
);
current = (current + 1) % 2;
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>