时间戳

首页 > 解决方案 > 如何在 Raspberry PI 上流畅运行 HTML、CSS 和 JS 视频

javascript - 如何在 Raspberry PI 上流畅运行 HTML、CSS 和 JS 视频

问题描述

我有这段代码可以在幻灯片中运行视频和图像。在我的电脑上测试过，效果很好（在 chrome 上）。当我在我的 Raspberry Pi 浏览器（铬）上运行它时，它不稳定且缓慢。我尝试使用不同的 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); }
}

标签： javascripthtmlcssslideshow

解决方案

不幸的是，Chromium 没有为 Raspberry Pi 使用的硬件实现视频加速，我想解决这个问题，但工作量真的很大

我建议改为在Chromium 的问题列表中打开一个问题

你可以参考这里

有很多人有同样的问题......

推荐阅读