2

Olá !

Eu tenho uma select com os values e os títulos dos videos. Quero selecionar o video pelo value e carregar dentro de uma div.

SELECIONE O VÍDEO... Vídeo-1 Vídeo-2 Vídeo-3

Como que ficaria uma jquery ?

1 Resposta 1

2

Basicamente você pode fazer desta forma, inserindo uma tag video (HTML5) em uma div de acordo com a opção selecionada. O value das options você pode colocar a URL (origem) do respectivo vídeo.

Importante consultar nesta documentação as compatibilidades, opções e outros atributos da tag video.

Código:

$("#videos").change(function(){
   var src = $(this).val();
   var source = '<video width="400" controls><source src="'+src+'" type="video/mp4"></video>';
   $("#player").html(source);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="videos">
   <option value="">Selecione um vídeo...</option>
   <option value="https://www.w3schools.com/html/mov_bbb.mp4">Vídeo-1</option>
   <option value="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">Vídeo-2</option>
</select>
<br>
<div id="player"></div>

2
  • Funcionou perfeitamente. No meu caso carreguei os vídeos localmente. Depois é só mandar buscar no servidor. Muitíssimo obrigado.
    – xavier
    Commented 27/05/2018 às 21:39
  • @xavier, considere marcar a resposta como aceita, veja como em i.sstatic.net/evLUR.png e porque em pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    Commented 27/05/2018 às 21:42

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .