我有一个视频标签,我想连续播放,而用户可以同时在网站上做一些事情。然而,我发现,如果背景在视频开始缓冲的背景图像之间转换。我在下面的代码片段中有一个可运行的示例。
注意:如果代码段正常运行,则似乎不会发生缓冲,但如果将代码段放在“整页”中,则会发生缓冲。
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电脑,并在那里尝试了一下。我发现背景转场真的很慢很慢,但视频继续播放没有问题。它也适用于MacOS上的safari,所以这似乎是一个Chrome MacOS独有的问题。
发布于 2019-06-05 10:55:07
我不得不承认我不完全确定这里发生了什么.考虑到这不是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>
发布于 2019-06-05 09:06:33
尝试在Chrome上启用/禁用硬件加速。
发布于 2019-05-21 17:11:43
我不能重现这个问题,所以这可能是你的ISP和延迟的问题(我在145 Mbps的时候没有这个问题)。看看你的代码,这个开关的效率不是很高。下面的演示使用了一个数组(还添加了另一个图像)。顺便说一句,将flex添加到包含子元素的元素中,否则毫无意义。
document.getElementById('button').onclick = changeBackground;
let i = 0;
function changeBackground(e) {
const images = ["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", "https://media.istockphoto.com/vectors/circuit-board-seamless-pattern-vector-background-microchip-technology-vector-id1018272944"];
const background = document.getElementById('background');
i++;
if (i >= images.length) {
i = 0;
}
background.style.backgroundImage = `url(${images[i]})`;
return false;
}
#background {
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);
transition: background-image 3s ease-in-out;
background-repeat: repeat-x;
}
#button {
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
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'>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"></video>
</div>
https://stackoverflow.com/questions/56233842
复制相似问题