Javascript 如何在Raspberry PI上顺利运行HTML、CSS和JS视频_Javascript_Html_Css_Slideshow

Javascript 如何在Raspberry PI上顺利运行HTML、CSS和JS视频

javascript html css

Javascript 如何在Raspberry PI上顺利运行HTML、CSS和JS视频,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,我有这个代码，可以在幻灯片中运行视频和图像。在我的电脑上测试过，效果很好（在chrome上）。当我在我的Raspberry Pi浏览器（chromium）上运行它时，它是起伏而缓慢的。我试过使用不同的树莓Pis和SD卡，但这不是问题。我在youtube上播放了一段随机视频，运行平稳，所以我的代码可能就是这样写的。知道怎么修理吗 HTML: 不幸的是，Chromium没有为Raspberry Pi使用的硬件实现视频加速，我想解决这个问题，但这项工作将非常艰巨我建议改为在你可以参考很多人都有同

我有这个代码，可以在幻灯片中运行视频和图像。在我的电脑上测试过，效果很好（在chrome上）。当我在我的Raspberry Pi浏览器（chromium）上运行它时，它是起伏而缓慢的。我试过使用不同的树莓Pis和SD卡，但这不是问题。我在youtube上播放了一段随机视频，运行平稳，所以我的代码可能就是这样写的。知道怎么修理吗

HTML:

不幸的是，Chromium没有为Raspberry Pi使用的硬件实现视频加速，我想解决这个问题，但这项工作将非常艰巨

我建议改为在

你可以参考

很多人都有同样的问题……

你是否将视频中使用的分辨率与YouTube使用的分辨率进行了比较？在播放过程中，Raspberry CPU和内存使用情况如何？

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

*{
    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); }
}