Video does not appear in the background

Question

Video does not appear in the background

Navigation

#1 by (1 votes)

1

I have a website where each access it shows a different video. The code looks 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 sometimes the background turns white and when I see it in the console, the following message appears:

Butthevideosarerightinsidethedirectory:

Itriedchangingthisline:

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

But still the problem continues. How do I stop the white background from appearing again?

jquery

asked by anonymous 25.07.2018 / 12:50

1 answer

Error when using whereRaw in Laravel Limit an EditText from 1 to 100 and include the symbol "%"

score 1 · Accepted Answer

I think the problem with your code is in the following points:

In the line that receives the array random video you ask him to take a random position up to 7, but since his array has 7 elements, he does not have position 7 (the array positions % start counting from 0, so in this case the possible positions will be from 0 to 6), so it gives an error and the background turns white when it tries to get the video from position 7 of array (position that does not exist) and it works correctly when you try to fetch a video from an existing position.

2nd You ask him to search for a random video in a array that was only declared afterwards. Given this, the ideal is to declare the array with the videos first and then enter the command to search for a random position in array .

I tested here locally with your code modifying the two points above and it worked correctly. Try making the modifications in question in your code, as shown below, it will probably work correctly.

<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 as%% is currently referenced, the mp4 directory containing the videos must be in the same directory as the file that contains the script in question.