I've attached a screenshot of my personal website that has videos. I'm not sure why it's doing what it is but for some reason, there is no preview or image that shows up in the image player. Usually you will see an image within a video player but mine isn't doing that. Below is the code that loads my videos onto the page.
Code:
<script>
function getVideos(dirLocation) {
var dir = dirLocation;
if (dir == "img/Videos/") {
var fileextension = "mp4";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function(data) {
//This empty() statement clears the canvas so a new directory can be reloaded
$("#myImages").empty();
//List all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function() {
var pathName = this.href;
var strLen = pathName.lastIndexOf('/');
var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;
var div = "<div style='width: 100%; margin: auto auto'><div class='imgContainer'>" +
"<div class='gallery'>" +
"<a href=" + newFileName + " target='_blank'>" +
"<video width='600' height='400' controls>" +
"<source src=" + newFileName + "type='video/mp4'>" +
"<source src=" + fileName + "ogg" + "type='video/ogg'></video>" +
"</a>" +
"</div>" + "</div>";
$("#myImages").append($(div));
});
}
});
}
}
</script>