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 ?
Basicamente você pode fazer desta forma, inserindo uma tag video
(HTML5) em uma div
de acordo com a opção selecionada. O value
das option
s 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>