我有一段代码可以在幻灯片中运行视频和图像。在我的电脑上测试过，效果很好(在铬上(。当我在我的Raspberry Pi浏览器(铬(上运行它时，它是断断续续的，速度很慢。我试过使用不同的树莓派和SD卡，但这不是问题。我在youtube上播放了一段随机视频，运行得很顺利，所以我的代码可能就是这样写的。知道怎么修吗？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://pitastreetfood.com/wp-content/uploads/custom-css-js/heh.css " rel="stylesheet" />
</head>
<body>
<div class="container"><video id="video1" class="video1" autoplay="autoplay" width="300" height="150">
<source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" />
</video>
<video id="video2" class="video2" width="300" height="150">
<source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" />
</video>
<video id="video3" class="video3" width="300" height="150">
<source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" />
</video>
<img id="imagen1" class="imagenes" src="http://pitastreetfood.com/wp-content/uploads/2018/07/image1.jpg" /></div>
<div class="marquee">
<p>Za quick brown fod a ashdfija dfojahbdsf jahdsf oahs foduiha dsfojha doufh aodijugfh aoiudfh aouidshf oauhdsf oajusdhgf ouahdf ouahd fsoujahd fouah dfouah dfouha dofuh adoufh aouidfh oaudhf oajuidhf ouaihdf </p>
</div>
<script>
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
var imagen2 = document.getElementById('imagen2');
var imagen3 = document.getElementById('imagen3');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
</script>
</div>
</body>
</html>
CSS：
*{
padding:0;
margin:0;
}
video{
width:100%;
height:100%;
position:absolute;
object-fit:cover;
transition: all 1.2s linear;
z-index: -10;
}
.video1{
opacity:1;
}
.video2{
opacity:0;
}
.video3{
opacity:0;
}
.imagenes{
opacity:0;
transition:opacity 2s;
width:100%;
height:100%;
position:absolute;
object-fit:cover;
z-index: -10;
}
.container {
width:100%;
height:100%;
}
.marquee {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
background-color: rgba(255, 227, 219, 0.7);
color: black;
font-size: 50px;
font-family: Sans-serif;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: bottom;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 35s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
不幸的是，Chromium没有为Raspberry Pi使用的硬件实现视频加速，我想解决这个问题，但这项工作将是非常巨大的
我建议在Chromium的问题列表中打开一个问题，而不是
你可以从这里获得参考
很多人都有同样的问题。。。。