CODEWITHSUNDEEP
javascripthtmlarraysobjectvideo
cascades
cascades

Reputation: 11

Using an array to access video urls and output in video tag

I am really frustrated! So this might be a bit messy. I need to have a dropdown menu with at least 2 video choices. Once one is selected, it needs to output into into the html with the video tag. I haven't created functions for the buttons, but I don't need help with that.

I was able to get an alert to work to show that my onchange was working in the dropdown. I just cant figure out how I am supposed to use the two video clips instead of the alert. 

<!doctype html>
<html>
<head>

<meta charset = "UTF-8">

<title>Videos</title>

<style>

#v {
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
}

</style>

<script>


var vidArray = new Array();

var outputDiv = document.getElementById("v");

function loadVid(vidForm){
    var select = vidForm.options.selectedIndex;
    var selectVid = vidForm.options[select].text;

    alert('selection working');

}


function vidOptions(url, title) {
    this.url = url;
    this.title = title;

    this.getVid = function(){return this.url + this.title;}

}



</script>
</head>

<body>

<form id = "vidForm">

<!--video-->
<video id = "v" width = "400">
<source src = "http://techslides.com/demos/sample-videos/small.mp4"/>
<source src = "http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4"/>
Your browser is too old!
</video>
<br>

<!--dropdown menu-->
<select name = "options" id = "options" onchange="loadVid(this.form)">
  <option value=" ">Select a video</option>
  <option value="vid1">Playground</option>
  <option value="vid2">Lego</option>
</select>

<!--video buttons-->
<button id = "btn1" onclick = "play()">Play</button>
<button id = "btn2" onclick = "pause()">Pause</button>
<button id = "btn3" onclick = "rewind()">Rewind</button>
</form>

</body>
</html>

Upvotes: 0

Views: 586

Answers (1)

EduardoFernandes
EduardoFernandes

Reputation: 3449

Have a look at this jsFiddle. It solves your problem.

You can see the adjustments on your code below:

<!doctype html>
<html>
<head>

<meta charset = "UTF-8">

<title>Videos</title>

<style>

#v {
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
}

</style>

<script>


var vidArray = new Array();

var outputDiv = document.getElementById("v");

function loadVid(vidForm){
    var select = vidForm.options.selectedIndex;
    var selectVid = vidForm.options[select].text;

    document.getElementById('divTags').innerHTML += "<div id='tagId" + select + "'>" + selectVid + "</div>";


}


function vidOptions(url, title) {
    this.url = url;
    this.title = title;

    this.getVid = function(){return this.url + this.title;}

}



</script>
</head>

<body>

<form id = "vidForm">

<!--video-->
<video id = "v" width = "400">
<source src = "http://techslides.com/demos/sample-videos/small.mp4"/>
<source src = "http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4"/>
Your browser is too old!
</video>
<br>

<!--dropdown menu-->
<select name = "options" id = "options" onchange="loadVid(this.form)">
  <option value=" ">Select a video</option>
  <option value="vid1">Playground</option>
  <option value="vid2">Lego</option>
</select>

<!--video buttons-->
<button id = "btn1" onclick = "play()">Play</button>
<button id = "btn2" onclick = "pause()">Pause</button>
<button id = "btn3" onclick = "rewind()">Rewind</button>

<div id="divTags"></div

</form>

</body>
</html>

Basically I created a div tag in the very end of your html file identified by the id divTags. Moreover, in your loadVid(vidForm) event I removed the alert, and added the selected option info as a new div within the div identified as divTags.

Upvotes: 1

Related Questions