Select several video from drop down menu and further options

Forum|Forum|5 years ago
December 5, 2020
2 replies
444 views

Good evening,

1) I have a lot of different responsive video that I need to select and perform im my web page.
It could be the right solution to have a drop down menu from which to choose them and start they in the same player.
This is to try not to have a web page with an exorbitant number of players.
At my level the script is like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="MyVideo.mp4"></iframe>
</div>
Is there a vay to do what i need?
2) the player has a download option. Is there a way to disable this option?
3) the responsive player has a black background. Is there a way to disable this background?

Many thanks!

This topic has been closed for replies.

Correct answer osgood_

You seem to be implying you would be happy with a <select> list on your page where a video could be chosen from a list?

If so you could easily implement that by adding a select list to your page (the select code below assumes the videos are stored in your websites folder in a folder named 'videos'.

<label for="videoList">Choose a video:</label>
<select name="videosList" class="videoList" id="videoList">
<option value="videos/boat.mp4">Boats</option>
<option value="videos/roses.mp4">Roses</option>
<option value="videos/cat.mp4">Cat</option>
<option value="videos/storm.mp4">Storm</option>

</select>

Then add the javascript below at the very bottom of your page, directly before the closing </body> tag:

videoList.onchange = function() {
const selected = videoList.value;
embedded.src=selected;
}

</script>

This will have the effect of swaping the src in the iframe ALTHOUGH you dont need the iframe, you could just use the 'video' tag (see below). Both options, iframe is commented out.

O

osgood_Correct answer

Legend

You seem to be implying you would be happy with a <select> list on your page where a video could be chosen from a list?

If so you could easily implement that by adding a select list to your page (the select code below assumes the videos are stored in your websites folder in a folder named 'videos'.

<label for="videoList">Choose a video:</label>
<select name="videosList" class="videoList" id="videoList">
<option value="videos/boat.mp4">Boats</option>
<option value="videos/roses.mp4">Roses</option>
<option value="videos/cat.mp4">Cat</option>
<option value="videos/storm.mp4">Storm</option>

</select>

Then add the javascript below at the very bottom of your page, directly before the closing </body> tag:

videoList.onchange = function() {
const selected = videoList.value;
embedded.src=selected;
}

</script>

This will have the effect of swaping the src in the iframe ALTHOUGH you dont need the iframe, you could just use the 'video' tag (see below). Both options, iframe is commented out.

G

gian carlog61267382Author

Inspiring

Thank you both but particularly to Osgood, this was what I exactly need!!

A secondary detail: I can add "controls controlsList="nodownload" to avoid the download of my video files, but this not work with the right mouse click.
I there a way to avoid the right mouse click or to avoid the "save video as" after the right mosue click?
Thank you very much again!!!

Nancy OShea

Community Expert

If you're concerned about people taking your content, don't post it online. Owing to how the Internet works, you can't prevent people from accessing your media files. When people click the play button, the file is automatically downloaded to their device's browser cache. It's there for anyone who wants it. In addition, people can find the video in your source code and grab it that way. So disabling right-click is NO SOLUTION. It doesn't protect anything.

Nancy O'Shea— Product User & Community Expert