How to load videos inside a div with <select>

Question

Hello !

I have a select with values and video titles. I want to select the video by value and upload within a div.

SELECT THE VIDEO... Video-1 Video-2 Video-3

What a jquery would look like ?

Answer 1

Basically you can do this way by inserting a tag video (HTML5) in a div according to the selected option. The value of options you can put the URL (source) of the respective video.

Important to consult in this documentation compatibility options and other tag attributes video.

Code:

$("#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>