Shuffled video playlist from folder

Question

Before I start, English isn't my first languages so sorry for any grammar and spelling errors.

Also, this may have been asked before. but I wasn't able to find it after a few days of searching.

I am trying to make a video playlist on my website

Currently, it grabs a large number of files from a folder and puts the first file as the source of the video. Then below the video, it echos all file names in a list item and gives them its number.

Screen shot of what i currently have

So what needs to be done?

If I load or refresh the page, I want the list to shuffle its order.

When a video ends the next video in the shuffled order starts playing.

I want to be able to select a song from anywhere in the list.

If the last song in the list ends start again from the first one.

How would I go about this since I am completely stuck

"I have no experience with js, so I haven't tried that."

The code that I currently have:

<?php 
$files = glob('./vid/*.mp4'); // get all .mp4 files from folder
$fname = $files[0]; // get 1st filename 
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp4'))); // format text for display
?>

<video id="video" class="box" poster="poster.jpg" preload="metadata" controls>
    <source src="<?php echo $fname; ?>"/>
</video>

<div id="infobox" class="box">Video: '<b><?php echo $ftext; ?></b>'</div>

<ul id="playlist" class="box">
<?php 
$i = 1; // start track numbering from 1
foreach ($files as $file) { 
    $vid = ucwords(str_replace('_', ' ', basename($file, '.mp4'))); // format text for display
    echo "<li><a href='#' data-video-src='$file'><b>$vid</b> <span>[$i / ".count($files)."]</span></a></li>\n"; 
    $i++; // increment track number count 
    } 
?> 
</ul>

a suggestion: use the code that scans the directory to populate an array ( in php ). That array can be saved as a session variable and converted, after shuffling, into a JSON object for javascript to play with. With each page load ( testing the session var exists and not generating each time ) the order will be different. To play the videos a simple loop should suffice. To select any track at random you would need tp know the index within the array ( or key in object ). When last song ends, select first index / key using basic javascript. — Professor Abronsius, Feb 24 '19 at 18:04

score 0 · Answer 1 · answered Feb 24 '19 at 21:16

Welcome to Stack Overflow!

You are asking "what needs to be done?" and my shorter answer will be "use java script". Since php is a server-side language it's dynamically abilities are lake - comparing to java script.

Allow me to demonstrate how it can be done, and how this site can help:

For: "If I load or refresh the page, I want the list to shuffle its order." and "When a video ends the next video in the shuffled order starts playing" and "If the last song in the list ends start again from the first one" - you will use array to hold all your files and you can find some clues how to do it here, and here, and here and also here.
For: "I want to be able to select a song from anywhere in the list." – You can use the addEventListener

You will find more than a clue here.

If you will get stuck on the way - ask a new question after reading this.

And the most important: Don't get stuck and continue practicing.

Enjoy Code!

Shuffled video playlist from folder

1 Answers1