Basically I would like to have a video player on my index.html page that passes all the videos that I have in a folder, ie if I delete or move another video to that folder, the video player passes all that there they are, whatever the title of the video.
I also wanted to see the end of the last video that passed the folder again.
Basically to create a playlist with the video tag you will need to use javascript, using an array and the event onended in the <video> tag:
<video id="player-video" controls></video>
<script type="text/javascript">
(function () {
var playerVideo = document.getElementById("player-video");
var current = 0;
var videos = [];
videos.push("videos/1.mp4");
videos.push("videos/2.mp4");
videos.push("videos/3.webm");
function nextVideo() {
playerVideo.src = videos[current];
current++;
playerVideo.play();
if (current >= videos.length) {
current = 0;
}
}
playerVideo.addEventListener("ended", nextVideo);
nextVideo();
})();
</script>
Note that this also works with the <audio> tag:
<audio id="player-audio" controls></audio>
<script type="text/javascript">
(function () {
var playerAudio = document.getElementById("player-audio");
var current = 0;
var audios = [];
audios.push("videos/1.mp3");
audios.push("videos/2.mp3");
audios.push("videos/3.ogg");
function nextVideo() {
playerAudio.src = audios[current];
current++;
playerAudio.play();
if (current >= audios.length) {
current = 0;
}
}
playerAudio.addEventListener("ended", nextAudio);
nextAudio();
})();
</script>
As PHP you can use opendir and in the audio tag you just use the loop
I made this example assuming all mp4 videos (probably h264 codec)
<?php
$dir = './'; //Troque pela sua pasta relativa
if (is_dir($dir) && $dh = opendir($dir)) {
?>
<video id="player-video" controls></video>
<script type="text/javascript">
(function () {
var playerVideo = document.getElementById("player-video");
var current = 0;
var videos = [];
<?php while (($file = readdir($dh)) !== false): ?>
<?php if (is_file($dir . '/' . $file)): ?>
videos.push("<?php echo rtrim($dir, '/'), '/', $file; ?>");
<?php endif; ?>
<?php endwhile; ?>
function nextVideo() {
playerVideo.src = videos[current];
current++;
playerVideo.play();
if (current >= videos.length) {
current = 0;
}
}
playerVideo.addEventListener("ended", nextVideo);
nextVideo();
})();
</script>
<?php
closedir($dh);
}
?>
However, you can use the link function to detect mimetypes better, it looks like this:
<?php
function mimeType($file)
{
$mimetype = false;
if (class_exists('finfo')) {//PHP5.4+
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimetype = finfo_file($finfo, $file);
finfo_close($finfo);
} else if (function_exists('mime_content_type')) {//php5.3 ou inferiror
$mimetype = mime_content_type($file);
}
return $mimetype;
}
$dir = './'; //Troque pela sua pasta relativa
if (is_dir($dir) && $dh = opendir($dir)) {
?>
<video id="player-video" controls></video>
<script type="text/javascript">
(function () {
var playerVideo = document.getElementById("player-video");
var current = 0;
var videos = [];
<?php while (($file = readdir($dh)) !== false): ?>
<?php if (is_file($dir . '/' . $file)): ?>
<?php $mimetype = mimeType($dir . '/' . $file); ?>
<?php if (strpos($mimetype, 'video/') === 0): ?>
videos.push({
"path": "<?php echo rtrim($dir, '/'), '/', $file; ?>",
"type": "<?php echo $mimetype; ?>"
});
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
function nextVideo() {
playerVideo.type = videos[current].type;
playerVideo.src = videos[current].path;
console.log(current);
current++;
playerVideo.play();
if (current >= videos.length) {
current = 0;
}
}
playerVideo.addEventListener("ended", nextVideo);
nextVideo();
})();
</script>
<?php
closedir($dh);
}
?>