Responsive Video Player with Playlist + Caption
This demo will automatically populate a playlist from mp4s in a folder. The title of the current video is displayed in the caption box. Uses the default HTML5 video control skin so the look depends on the browser.
Works in modern browsers that support the MPEG-4/H.264 video format and IE9+ (no loading animation in IE9).
Please view the source of this page for HTML markup, CSS and JS. The relevant PHP is provided below.
Video: ' How And When To Backup A Web Page '
- How & When To Backup A Web Page [1 / 6]
- How To Add A New Web Page [2 / 6]
- How To Change The Order Of Menu Buttons [3 / 6]
- How To Change The Text On Menu Buttons [4 / 6]
- How To Edit A Web Page [5 / 6]
- How To Restore A Backup Of A Broken Web Page [6 / 6]
PHP Code
This snippet gets all the mp4s in a folder;
<?php
$files = glob('relative/path/to/video/*.mp4'); // get all .mp4 files from folder
$fname = $files[0]; // get 1st filename
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp4'))); // format text for display
?>
Here's how the first mp4 populates the video player;
<video id="video" class="box" poster="poster.jpg" preload="metadata" controls>
<source src="<?php echo $fname; ?>"/>
</video>
And this is how the nicely formatted filename gets in to the infobox;
<div id="infobox" class="box">Video: '<b><?php echo $ftext; ?></b>'</div>
The playlist is lastly generated like this;
<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>
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.