首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Raspberry PI上流畅地运行HTML、CSS和JS上的视频

如何在Raspberry PI上流畅地运行HTML、CSS和JS上的视频
EN

Stack Overflow用户
提问于 2018-07-21 07:15:58
回答 1查看 988关注 0票数 0

我有这个代码,可以在幻灯片中运行视频和图像。在我的电脑上测试过,工作正常(在chrome上)。当我在我的Raspberry Pi浏览器(铬)上运行它时,它起伏不定,速度很慢。我试过使用不同的Raspberry Pis和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); }
}
EN

回答 1

Stack Overflow用户

发布于 2018-07-21 09:43:40

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

我建议改为在Chromium's issues list上打开一个问题

您可以从here获得参考资料

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51451451

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档