Menu
my html
[code=html]<body>
<div id=”wrapper”>
<video width=”320″ height=”240″ controls>
<source [B]#id=”theVideo”[/B] src=”mp4/Captain_Video03.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video><br>
<button id=”btn1″ class=”btn”></button>
<button id=”btn2″ class=”btn”></button>
<button id=”btn3″ class=”btn”></button>
<button id=”btn4″ class=”btn”></button>
<button id=”btn5″ class=”btn”></button>
</div>
<script src=”js.js”></script>
</body>
my javascript:
(function(){
[B]var theVid = document.getElementById(“theVideo”);
[].forEach.call(document.getElementsByClassName(‘btn’), function(btn) {
btn.addEventListener(‘click’, function(e) {
switch (e.target.id){
[B] case “btn1”:
theVid.src = “mp4/Captain_Video01.mp4”;
break;
case “btn2”:
theVid.src = “mp4/Captain_Video02.mp4”;
break;[/B]
case “btn3”:
console.log(“button three selected!”);
break;
case “btn4”:
console.log(“button four selected!”);
break;
default:
console.log(e.target.id);
}
})
})
}())
[COLOR=”#B22222″][SIZE=4]When I click on btn1 or btn2 it should change the video in the player. The values of the src attribute is all I’m trying to change.