Accessing Videos in Different Folder Through PHP - php

Question

I am pretty new to PHP, but I understand the basics. My problem is I have I have an index page that needs to have a list of the names of videos stored in a different folder. Since there will be over 100 videos in the folder by the time the site is live, I want the video names to be clickable, and when clicked the video plays.
<?php
$videopath = 'videos';
$videoExts = array('webm'=> 'video/webm','mp4'=>'video/mp4','mpeg'=>'video/mp4','ogv'=>'video/ogv');
$directory = "/videos";
$phpfiles = glob($directory . "*.html");
if ($handle = opendir($videopath)) {
while (false !== ($file = readdir($handle))) {
$info =pathinfo($file);
$ext = strtolower($info['extension']);
echo $file . " \n " . "\n <br> \n";
if (array_key_exists($ext, $videoExts)) {
?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $videoExts[$ext]; ?>" src="<?php echo "$videopath/$file"; ?>">
</video>
</div>
<?php
}
}
closedir($handle);
} else {
echo "no dir";
}
?>
This code will list the video name (in text), and play each video. What can I do to modify this so that the video names become clickable and once clicked open the appropriate video?

Answer 1

Replace:
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $videoExts[$ext]; ?>" src="<?php echo "$videopath/$file"; ?>">
</video>
</div>
By:
<?php echo $file; ?>
And in page2.php
<?php
$type = $_GET['type'];
$src = $_GET['src'];
if (file_exists($src)) { ?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $type; ?>" src="<?php echo $src; ?>">
</video>
</div>
<?php } ?>

Answer 2

I would do the following (it involves a bit of jQuery). The idea is to have a list of videos and one single video player. Once you click one of them, the video player will be updated.
Steps:
List a link of videos, using the HTML5 data attribute to store the source and extension information of each video. So when clicked, the only video player will be updated with the new settings.
$videopath = 'videos';
$videoExts = array('webm'=> 'video/webm','mp4'=>'video/mp4','mpeg'=>'video/mp4','ogv'=>'video/ogv');
$directory = "/videos";
$phpfiles = glob($directory . "*.html");
// Stores first video of the list
$first_video = array();
if ($handle = opendir($videopath)) {
$counter = 0;
while (false !== ($file = readdir($handle))) {
$info =pathinfo($file);
$ext = strtolower($info['extension']);
echo $file . " \n " . "\n <br> \n";
if (array_key_exists($ext, $videoExts)) {
if ($counter == 1) {
// Save settings of first video
$first_vid['extension'] = $videoExts[$ext];
$first_vid['path'] = $videopath .'/'. $file;
// Save it in array
$first_video[] = $first_vid;
}
?>
<a class="video-item" href="#" data-type="<?php echo $videoExts[$ext]; ?>" data-src="<?php echo "$videopath/$file"; ?>"><?php echo "$videopath/$file"; ?></a><br/>
<?php
}
}
closedir($handle);
} else {
echo "no dir";
}
?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $first_video[0]['extension']; ?>" src="<?php echo $first_video[0]['path']; ?>">
</video>
</div>
<script>
// Don't forget to add jQuery in your project for this to work :)
$(function () {
$('.video-item').click(function (e) {
// do nothing
e.preventDefault();
// get info of video being clicked
var extension = $(this).attr("data-type");
var src = $(this).attr("data-src");
// update video player with clicked video
$('.flowplayer video').attr('type', extension);
$('.flowplayer video').attr('src', src);
});
});
</script>
This is a untested code. Hope it helps though.