I have couple of html buttons in a .php page that are supposed to show files from directory containing .mp4/video files. I came across SCANDIR function which is working and shows the files in directory.
However, I need the listing to be interactive like click to play video (something like a href or hyperlink). Currently, the displayed list is just plain text.
I just need the listing to have a hyperlink to actual video files which I plan to play inside another html-div.
The git repo of code:https://github.com/psedha10/Craigs-Music-Player
//from index.php
<button class="button-left" onclick="showLatestHits()"> Latest Hits</button>
<p id="song_genre"></p>
function php_func_LatestHits()
{
$dir = 'music/Latest Hits';
$files = scandir($dir);
foreach ($files as $value) {
if ('.' !== $value && '..' !== $value && '.DS_Store' !== $value) {
echo "<br><br>" . $value;
}
}
}
<script>
var result_LatestHits = "<?php php_func_LatestHits(); ?>"
</script>
//from index.js
function showLatestHits() {
document.getElementById("song_genre").innerHTML = result_LatestHits;
}
I have found myself somewhat of an answer for the moment. The given code generates a video file after clicking play button and a tile/filename. However, it doesnt use scandir. It uses opendir and readdir functions of PHP.
//HTML Button
<a class="button-left" href="index.php?5060=true"> 50's + 60's </a>
//PHP function
<?php
function php_func_5060()
{
$dir = 'music/Fifty Sixty';
$videodir = opendir($dir);
while (false !== ($filename = readdir($videodir))) {
if ('.' !== $filename && '..' !== $filename && '.DS_Store' !== $filename) {
echo '<img src="' . $dir . "/" . $filename . '" width="100" height="100"> ';
echo '<a href="' . $dir . "/" . $filename . '" target="yt"> Play </a>';
echo "<li style='list-style-type: decimal'><a> $filename </a></li><br>";
echo '<br><br>';
}
}
}
if (isset($_GET['5060'])) {
php_func_5060();
}
?>
//HTML seperate div that loads video using iframe from above link
<div class="bottom-middle-block">
<iframe name='yt' style="width: 100%; min-height: 100%" frameborder="0"></iframe>
</div>
A few caveats are iframe needs to be clicked after clicking play separately i.e. autoplay needs to be added. And, the img src used to show thumbnail plays the whole video in itself without sound like a tiny GIF.i.e. static image needs some modification.