Hello
I have a select with the values and titles of the videos. I want to select the video by value and load inside a div.
SELECT THE VIDEO ... Video-1 Video-2 Video-3
What would a jquery look like?
Hello
I have a select with the values and titles of the videos. I want to select the video by value and load inside a div.
SELECT THE VIDEO ... Video-1 Video-2 Video-3
What would a jquery look like?
Basically you can do this by inserting a video
(HTML5) tag into a div
according to the option you selected. % W / w% of% w / w% s you can put the URL (source) of your video.
Important to check in this documentation compatibilities , options, and other attributes of the
value
tag.
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><selectid="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>