1

Como eu poderia fazer para que, a cada acesso ao site, um vídeo diferente aparecesse? Entendo que existe códigos que alteram o background com imagens conforme abaixo:

<script type="text/javascript">
window.onload = function(){

   var imgr = Math.round(Math.random()*4);

   var imgsrc = [
   'imagem1.jpg',
   'imagem2.jpg',
   'imagem3.jpg'
   ];
    document.getElementById('eximg').src = imgsrc[imgr];  
}
</script>
<img id="eximg"/>

Mas como eu faria para aplicar em vídeos?

<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="mp4/fundo.mp4" type="video/mp4">
</video>

PS: Solicito que apenas pessoas que entendam do assunto votem em fechar ou indiquem como duplicata, pois um caso é imagem e o outro é vídeo e se fizerem isso, por favor, me passem um exemplo, pois muitas pessoas que, assim como eu, não tem muita experiência em Jquery ou Javascript e vêem isso como casos diferenciados.

3
  • 2
    Possível duplicata de Img no header mudando em cada carregamento da página
    – hugocsl
    Commented 17/07/2018 às 10:28
  • Só um comentário rápido. Você precisa selecionar os vídeos do seu diretório de forma dinâmica, e me lembro que há o método Random em JavaScript. Pense em concatenar o nome do vídeo em duas variáveis para atribuição do source, algo como vídeo + 1 + mp4. Commented 17/07/2018 às 10:29
  • Pessoal. Desculpe, meu forte não é Jquery. Como eu faria para aplicar o exemplo do link em vídeos? Pois um caso é imagem (background) e no meu é vídeo. Poderiam me dar um exemplo?
    – user24136
    Commented 17/07/2018 às 10:37

2 Respostas 2

1

Meu amigo, basta seguir o mesmo raciocínio aplicado nas imagens, o que muda é que você irá alterar no src do vídeo. Usando Jquery ficaria assim:

$('document').ready( function(){

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

   var videoaleatorio = [
   'fundo.mp4',
   'fundo2.mp4',
   'fundo3.mp4'
   ];
     $('source').attr('src', 'mp4/'+videoaleatorio[video]); 

console.log('endereço do video selecionado: '+ $('source').attr('src'));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="" type="video/mp4">
</video>

2
  • 1
    Perfeito Jorge. Funcionou! Muito obrigado!!!
    – user24136
    Commented 17/07/2018 às 11:41
  • 1
    Por nada! Boa sorte! :D Commented 17/07/2018 às 11:42
0

Você poderia salvar as urls dos videos em um banco de dados, e usar o Math.random() pra fazer a troca de URLs

Um exemplo usando array (como banco de dados):

let urls = 
[
    'http://meuvideo.com/1',
    'http://meuvideo.com/2',
    'http://meuvideo.com/3',
    'http://meuvideo.com/4',
    'http://meuvideo.com/5',
];


function maxAndMin(max){
  return Math.floor(Math.random() * max);
}


console.log(urls[maxAndMin(urls.length)]);

2
  • Olá Lucas. Como eu faria para aplicar no código que passei? Pois não tenho muita experiência em Jquery ou Javascript.
    – user24136
    Commented 17/07/2018 às 10:44
  • Quais as urls dos videos? Commented 17/07/2018 às 12:25

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