Html5 video play any video from folder

Question

Hi I have a local webpage that plays a video on a TV in the school hall using html5 video source.

Every time I am given a new video to play I have to go into the code and change the name of the video so it played in the html5 video.

What I need is some JavaScript, JQuery & PHP that will look into the local folder and load what ever video that is in the local drive and inject the new video name into the html5 video source so it plays

I have used this code http://www.ampedwebstandards.com/2009/03/16/tutorial-dynamic-image-slideshow-with-php-jquery/

That plays a slideshow of pictures from a local drive it loads the picture names into the slideshow automatically this is what I want but just with videos and not pictures

I'm using XAMPP on a windows 7 pc

I hope I am making sense at what I want to do and thank you for any help given.

Answer 1

Well, I am not going to write the entire slideshow for you. But, here's an example of how you can list your movies in the folder as links and add them to your video source attribute when clicking at them. In this example let's assume we add all the script to the same file.

Requirements for this script to work:

• jquery
• php

HTML

Put the following between your body tags in your index.php

<!-- this is your video element -->
<video width="400" controls>
    <!-- your video source, verify so that type is accurate -->
    <source id="vidsrc" src="myvideo.mp4" type="video/mp4">
</video>

PHP

Put the following script somewhere between your body tags in the index.php file

<?php
//fetch and list all the files found in the video folder. Make sure to change the path to your video folder.
foreach(glob('path-to-your-video-folder/*') as $video){
    echo '- <a href="#" class="isVideo" data-video="'.$video.'">'.$video.'</a><br/>';
    }
 ?>

jQuery

Put the following script at the bottom, right before your body close tag.

<script type="text/javascript">
//jQuery code that will trigger when you click on one of the links displayed by the PHP script
$('.isVideo').on('click',function(){
   //this will change the video source to the chosen video
   $('#vidsrc').attr('src',$(this).data('video'));
   return false;
   });
</script>

Answer 2

You can select all your mp4 files on your folder ramdonly to play if you don't want to change the name of your files, or it will pick up only one if you only have one mp4 file on your folder.

<?php
$myVideoDir = '.';
$extension = 'mp4';
$videoFile = false;
$pseudoDir = scandir($myVideoDir);
$myitems = array();
$mycounter = 0;
foreach($pseudoDir as $item) {
    if ( $item != '..' && $item != '.' && !is_dir($item) ) {
        $ext = preg_replace('#^.*\.([a-zA-Z0-9]+)$#', '$1', $item);
        if ( $ext == $extension )
            $videoFile = $item;
            if ( $videoFile <> "" ) {
                $myitems[] = $videoFile;
                $mycounter = $mycounter + 1;
            }               
    }
}

$myrandom = rand(0,$mycounter-1);
if ( !!$videoFile ) {

    echo '<video id="dep" class="center" width="400" autoplay controls>        
            <source src="'.$myVideoDir.'/'.$myitems[$myrandom].'" type="video/mp4"> 
        </video>
    ';
}
?>

An improvement from Play video from Folder