asked on <video> tag, multiple options from the video directory
hello, if i use this code for playing videos on my site:
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
<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>
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
Web DevelopmentHTML
Last Comment
Zac
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
ASKER
thank you, can you show me the push method please.
so would my html page look like this?
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>
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" />
var elm=document.getElementById('txtfiletoread');
elm.addEventListener('change',function(){
var a=this.value.split('\\');
a=a[a.length - 1];
videoList.push(a);
});
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
thanks again
zac
ASKER
thank you for your help. i will put together a file and then ask another question.