This is a simple script (very simple, nothing fancy) that gives you a nice web interface to your movies. Your movies and the following php script must be in the same directory and that directory must be servable by apache or whatever web server your using. For example, put your movies and this script in “/var/www/html/movies” and make sure apache is serving that directory. Create the script “index.php” as follows.
<?php
if ($_REQUEST['myvideo'] != "" )
{
$myvideo = $_REQUEST['myvideo'];
}
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#agix-list li").hide();
$("#agix-search").on("keyup click input", function () {
if (this.value.length > 0) {
$("#agix-list li").hide().filter(function () {
return $(this).text().toLowerCase().indexOf($("#agix-search").val().toLowerCase()) != -1;
}).show();
}
else {
$("#agix-list li").hide();
}
});
});
</script>
</head>
<body>
<?php
if($myvideo != "")
{
?>
<video width="356" height="200" controls poster="<?php echo $myvideo; ?>" >
<source src="<?php echo $myvideo; ?>" type="video/mp4" />
<em>Sorry, your browser doesn't support HTML5 video.</em>
</video>
<?php
}
$directory = './';
$it = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory));
?>
<br>
<input type="text" id="agix-search" placeholder="Search (start typing)">
<ul id="agix-list">
<?php
while($it->valid()) {
if (!$it->isDot()) {
echo "<li><a href='./index.php?myvideo=".$it->key()."'>" . $it->key() . "</a></li>";
}
$it->next();
}
echo "</ul>";
?>
</body>
</html>
With your web browser, visit your web server (assuming the IP address “192.168.0.2”) at this url “http://192.168.0.2/movies”. Complements to “http://dinowebs.net/index.php/easy-search-as-you-type-list-filtering-with-jquery/” for the niceness of the search filter.
