Mount playlist with items from the folder/directory and play the playlist in loop

Question

Basically I would like to have a video player on my index.html that passed all the videos I have in a folder, that is, if I delete or move another video to that folder, the video player passes all that are there, whatever the title of the video.

I also wanted at the end of the last video that went through the folder, to play it all over again.

Answer 1

Basically to create a playlist with the video tag you will need to use javascript, using an array and the event onended on the tag <video>:

<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 tag <audio>:

<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>

Being PHP you can use opendir and in the audio tag just use the attribute loop

I did this example assuming they are 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 function I posted here /a/73497/3635 to better detect mimetypes, it would look 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);
}
?>