Select several video from drop down menu and further options

Participant ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

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!

 

TOPICS
Browser , Code , How to

Views

170

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Dec 06, 2020 Dec 06, 2020

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>
<o

...

Likes

Translate

Translate
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Where are your videos hosted?

I ask because you DO NOT need an <iframe> unless you're pulling videos from a 3rd party sharing site like YouTube or Vimeo.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Thank you Nancy,

 

this is by default in the insert bootstrap component.
May I could arrange the script without it if it could be better.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

You didn't answer my question.  Where are your videos hosted?

 

If they're on YouTube, use the YouTube Player API

https://developers.google.com/youtube/player_parameters

 

If they're on Vimeo, consult Vimeo's documentation.

https://developer.vimeo.com/api/guides/start

https://developer.vimeo.com/player/sdk

 

If you're self-hosting videos on your own server, get a player that supports a playlist:

https://www.wimpyplayer.com/

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 05, 2020 Dec 05, 2020

Copy link to clipboard

Copied

Sorry Nancy It is hosted in my web space, not YouTube or Vimeo.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

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:

 

<script>
const videoList = document.querySelector('.videoList');
const embedded = document.querySelector('.embed-responsive-item');

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.

 

<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="videos/boat.mp4" controls autoplay type="video/mp4"></video>
<!-- <iframe class="embed-responsive-item" src="videos/boat.mp4"></iframe> -->
</div>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

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!!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

LATEST

Thank you again Nancy, I imagined it it but i preferred to ask.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines