1

Tenho um site onde a cada acesso ele mostra um vídeo diferente. O código está dessa forma:

    <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>

O problema é que algumas vezes o vídeo aparece, mas outras vezes o fundo fica branco e quando vejo no console, aparece a mensagem abaixo:

inserir a descrição da imagem aqui

Mas os vídeos estão corretamente dentro do diretório:

inserir a descrição da imagem aqui

Tentei alterar essa linha:

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

Mas mesmo assim o problema continua. Como faço para que não apareça mais o fundo branco?

2
  • qual o caminho completo do diretório? 25/07/2018 às 10:51
  • Olá Thiago. Já coloquei o caminho absoluto, mas o problema continua e o diretório está correto.
    – user24136
    25/07/2018 às 10:54

1 Resposta 1

1

Creio que o problema do seu código esteja nos seguintes pontos:

1º Na linha que recebe o vídeo aleatório do array você pede para ele pegar uma posição aleatória até 7, porém, como o seu array possui 7 elementos, ele não possui a posição 7 (as posições do array começam a contar de 0, portanto nesse caso as possíveis posições serão de 0 a 6), por isso dá erro e o fundo fica branco quando ele tenta pegar o vídeo da posição 7 do array (posição que não existe) e funciona corretamente quando tenta buscar um vídeo de uma posição existente.

2º Você pede para ele buscar um vídeo aleatório em um array que só foi declarado depois. Diante disso, o ideal é declarar o array com os videos primeiro para depois inserir o comando para buscar uma posição aleatória no array.

Fiz um teste aqui localmente com o seu código modificando os dois pontos citados acima e funcionou corretamente. Tente fazer as modificações em questão no seu código, conforme demonstrado abaixo, provavelmente funcionará corretamente.

<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: Lembrando que, do jeito que está sendo referenciado o attr src atualmente, o diretório mp4 contendo os vídeos deve estar no mesmo diretório do arquivo que contém o script em questão.

1
  • 1
    Olá Leandro. Implementamos seu código e parece que funcionou corretamente. Muito obrigado.
    – user24136
    25/07/2018 às 11:50

Você deve fazer log-in para responder a esta pergunta.