Link to home
Create AccountLog in
Avatar of Zac123
Zac123Flag for United Kingdom of Great Britain and Northern Ireland

asked on

<video> tag, multiple options from the video directory

hello, if i use this code for playing videos on my site:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Open in new window


how can i add an option where by i can choose which video to play? so maybe a drop down list or some sort of file tree which displays all video file names so i can choose which one to watch?

thanks
zac
SOLUTION
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Zac123

ASKER

ok thanks guys. problem is if i upload new vids to my directory then i have to edit the code each time?
Correct it is not dynamic but static
If you upload new video files then add them into the videoList array via push method.
Avatar of Zac123

ASKER

thank you, can you show me the push method please.

so would my html page look like this?

<html>

<head>
<title> page 1</title>
</head>

<body>
<h1>hello world</h1>
<p>this is the text</p>

var myVideo=document.getElementById("video1"); 
var videoList=['part_1.mp4','part_2.mp4','part_3.mp4','part_A.mp3','movie_bbb.ogg'];
var index = videoList.indexOf(window.currentVideoName);
//Next button
function nextButton(){
myVideo.pause();
myVideo.currentTime=0;
index = index + 1;
if(index==videoList.length)
index = 0;
alert(videoList[index]);
myVideo.src = 'C:/'+videoList[index];
window.currentVideoName=videoList[index];
myVideo.play();
}
function playPause()


<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="nextButton()">Next</button>
  <br> 
  <video id="video1" width="420">
    <source src="C:/sample.mp4" type="video/mp4">
    <source  type="video/mp3">
    <source type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

</body>

</html>

Open in new window

In this case you must use php code to get the filenames from the  server directory. Specially you can use readdir() php function to get all the filenames. Or alternative when you click to select the file to upload ie:
<input type="file" id="txtfiletoread" />

Open in new window

you can get and set the filename to the array via this js code:
var elm=document.getElementById('txtfiletoread');
elm.addEventListener('change',function(){  
  var a=this.value.split('\\'); 
  a=a[a.length - 1];
  videoList.push(a);
});

Open in new window

Avatar of Zac123

ASKER

ok thanks guys. this quetion is evolving into something else. i will now close this question based on the answers given but then i will ask another question with php tagged.

thanks again
zac
Avatar of Zac123

ASKER

thank you for your help. i will put together a file and then ask another question.