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 '

PHP Code

This snippet gets all the mp4s in a folder;

$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; ?>"/>

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">
$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";
// increment track number count



More demos and snippets

Did you find this useful? There are more demos and code snippets this way.