Skip to content

Instantly share code, notes, and snippets.

@blha303

blha303/mediaserverindex.html

Created June 17, 2014 01:38
Show Gist options
  • Save blha303/8a4a8179512581ec80f4 to your computer and use it in GitHub Desktop.
Save blha303/8a4a8179512581ec80f4 to your computer and use it in GitHub Desktop.
Download ZIP
A drop-in media server index for apache that uses directory indexing and adds a HTML5 video player. loads directory changes with ajax
Raw
mediaserverindex.html
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<span id="VideoList"></span>
<script>
var videosPath = "/Videos/";
var curdir = "";
function updateList(data) {
var directoryListing = $(data);
$("#VideoList").html(directoryListing);
$("#VideoList a").on("click", function(ev) {
ev.preventDefault();
if ($(this).attr("href") == "/") return false;
curdir = $("#VideoList").find('h1').text().slice(9) + "/";
document.location.hash = (curdir + $(this).attr("href")).replace(/.+\/\//g, "/");
if ($(this).attr("href").slice(-1) == "/") {
$.get((curdir + $(this).attr("href")).replace(/.+\/\//g, "/"), updateList);
document.location.hash = (curdir + $(this).attr("href")).replace(/.+\/\//g, "/");
} else {
video.setAttribute('src', curdir + $(this).attr("href"));
video.load();
video.play();
}
return false;
});
}
$(function() {
var video = document.createElement('video');
video.setAttribute('src', '');
video.setAttribute('controls', 'controls');
video.setAttribute('id', 'video');
$('body').prepend(video);
$.get(videosPath, updateList);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment