Video does not appear at the bottom of the site

Question

I have a website where every access it shows a different video. The code is like this:

    <script>
    $('document').ready( function(){

       var video = Math.round(Math.random()*7);

       var videoaleatorio = [
       'fundo.mp4',
       'fundo1.mp4',
       'fundo2.mp4',
       'fundo3.mp4',
       'fundo4.mp4',
       'fundo5.mp4',
       'fundo6.mp4'
       ];
         $('source').attr('src', 'mp4/'+videoaleatorio[video]); 
    });
    //console.log('endereço do video selecionado: '+ $('source').attr('src'));
    </script>
....
 <div class="overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="" type="video/mp4">
    </video>

The problem is that sometimes the video appears, but other times the background turns white and when I see on the console, the message appears below:

But the videos are correctly inside the directory:

I tried to change that line:

if(videoaleatorio[video] != "undefined"){
  //   alert(videoaleatorio[video]);
     $('source').attr('src', 'mp4/'+videoaleatorio[video]); 
}

But still the problem remains. How do I make sure that the white background no longer appears?

Answer 1

I believe the problem with your code lies in the following points::

1º In the line that receives the random video of array you ask him to take a random position up to 7, however, like your array has 7 elements, it does not have position 7 (the positions of the array start counting from 0, so in this case the possible positions will be from 0 to 6), so it gives error and the background turns white when it tries to catch the video from position 7 of array (position that does not exist) and works correctly when trying to fetch a video from an existing position.

2º You ask him to fetch a random video in a array which was only declared later. Therefore, the ideal is to declare the array with the videos first to then insert the command to find a random position in the array.

I did a test here locally with your code modifying the two points mentioned above and it worked correctly. Try to make the modifications in question in your code, as shown below, will probably work properly.

<script>
$('document').ready( function(){
    var videoaleatorio = [
        'fundo0.mp4',
        'fundo1.mp4',
        'fundo2.mp4',
        'fundo3.mp4',
        'fundo4.mp4',
        'fundo5.mp4',
        'fundo6.mp4'
    ];  
    //Verifica o tamanho do array e subtrai 1 para buscar somente da posição 0 até a posição equivalente ao tamanho do array - 1, ou seja, 7 - 1 = 6.
    var video = Math.round(Math.random()*(videoaleatorio.length - 1));  
    $('source').attr('src', 'mp4/'+videoaleatorio[video]); 
});
</script>

<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
   <source src="" type="video/mp4">
</video>

PS: Remembering that, the way being referenced the attr src currently, the mp4 directory containing the videos must be in the same file directory which contains the script in question.