Select which video to play by a drop down menu.. Help wanted

Question

My problem is that I need to have 1 video player on the website for my project on school (new to this stuff!) but it needs to be able to play 2 videos (depends on the one you select from the drop down menu above the video player) but I have no idea how to make that possible.

The first video is called: video_1 (mp4 format and also have a ogv format for opera) The second video is called: video_2 (mp4 format and also have a ogv format for opera)

they both are in a map called: video (just giving that for the code)

So.. Could anyone please help me out with this?!

thanks in advance

Answer 1

You need something as simple as this:

<div id="videoDiv">
    <video id="video"
            width="480" height="360" 
            controls>
        <source src="video/video_1.mp4">
    </video>
</div>

From this point - you only need to place your videos in a folder named "video" and a little JavaScript to change the source when the user changes the selection in the drop-down control.

Answer 2

There are different solutions here, but I think you should continue searching Google for answers. Learning things by experimentation is by far the best way to learn anything. But, you could redirect the page after the visitor changes the select option, like what is done here: Redirect automatically when selecting an item from a select drop-down list. (Don't forget to include the jQuery in your HTML-page). Or look for a function that changes a value in the body of your html with JavaScript/jQuery like the other answer suggests.

Hope this helps. We are here to help you learn, not help you with your homework ;)