title: How to run videos on HTML, CSS, and JS smoothly on Raspberry PI
body: <p>I have this code that runs videos and images in a slideshow. Tested it on my PC, works just fine (on chrome). When I run it on my Raspberry Pi browser (chromium), it is choppy and slow. I tried using different Raspberry Pis and SD cards, but that's not an issue. I went on youtube and played a random video and runs smoothly, so it is probably how my code is written. Any idea how to fix?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link href="http://pitastreetfood.com/wp-content/uploads/custom-css-js/heh.css " rel="stylesheet" /&gt;    
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;&lt;video id="video1" class="video1" autoplay="autoplay" width="300" height="150"&gt;
  &lt;source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  &lt;video id="video2" class="video2" width="300" height="150"&gt;
  &lt;source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  &lt;video id="video3" class="video3" width="300" height="150"&gt;
  &lt;source src="http://pitastreetfood.com/wp-content/uploads/2018/07/video.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  &lt;img id="imagen1" class="imagenes" src="http://pitastreetfood.com/wp-content/uploads/2018/07/image1.jpg" /&gt;&lt;/div&gt;
  &lt;div class="marquee"&gt;
      &lt;p&gt;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 &lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
  
  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);
  }
  
  &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*{
      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); }
  }
  </code></pre>