gpt4 book ai didi

javascript - CSS 背景图像转换使视频标记缓冲区

转载 作者:数据小太阳 更新时间:2023-10-29 04:48:45 24 4
gpt4 key购买 nike

我有一个视频标签,我想连续播放,而用户可以同时在网站上做一些事情。但是我发现,如果视频开始缓冲的背景图像之间的背景转换。我在下面的代码片段中有一个可运行的示例。

注意:如果代码段正常运行,缓冲似乎不会发生,但如果将代码段放在“整页”中,缓冲就会发生。

function changeBackground() {
const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
const element = document.getElementById('background');
const currentOpacity = element.style.opacity;
const currentBackground = element.style.backgroundImage;

switch (currentBackground) {
case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
break;
}
case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
break;
}
default: {
break;
}
}
}

const element = document.getElementById('background');
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;

background-size: contain;

transition: background-image 3s ease-in-out;
}

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

可能是什么原因造成的?有什么方法可以防止视频缓冲,同时仍然有背景图像过渡?

编辑:添加我在 MacOS 上使用 Chrome 可能很重要。

编辑 2:从我收集到的回复来看,并不是每个人都能重现这个问题,所以我找了一台老式的 Windows PC 并在那里试了一下。发现背景转换非常缓慢且滞后,但视频继续播放没有问题。它也适用于 MacOS 上的 safari,因此这似乎是一个仅限 Chrome MacOS 的问题。

最佳答案

我不得不承认我不完全确定这里发生了什么......鉴于这不是 100% 的重现案例,也很难确定任何解决方法是否真的有效......

但这里有一些意见和想法。


这似乎只发生在 .mp4 文件中。我可以使用其他 .mp4 视频进行复制,但不能使用任何 .webm 文件进行复制。
所以你可能想尝试的一件事是在 webm 中重新编码你的视频,这可能是 Chrome 的 mp4 解码器有一些问题。


似乎 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 控制,似乎 Web-Animations 也不受影响。

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>

关于javascript - CSS 背景图像转换使视频标记缓冲区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56233842/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com