Creating a meta-tag searchable Video Gallery for mp4 videos with getID3, Ajax and PHP

Creating a meta-tag searchable Video Gallery for mp4 videos with getID3, Ajax and PHP

A customer of mine asked if I could extend a video gallery I created for his website with a search function. There is no database with information on the videos and it was no option to create one. So I had to use the extra information storable in the video files.

The original gallery:

It had to run on mobile phones and tablets, so I used mp4 with h264 codec as video format in a HTML-5 video tag for mobiles and tablets. For browser compatibility the mp4-video is played in a flash player. In addition to that the videos are stored in folders on different servers, thats why I use an Ajax call to a php script on the different folders to get all video data (url, size, duration, filename). The script simply reads directory contents, filters for mp4 videos and returns all data as JSON-Objects.
On client side the data is presented to the user as gallery of videos with some information about the video. And of course the videos can be watched on nearly every device and browser. :)

Gallery extension:

First of cause to read some meta data, it has to be added to the video. The mp4 container is capable of storing information like title, description, keywords, genre, artist and creation date. Just like an ID3 Tag does. I am using MetaX to edit the Tags.

Reading the meta tags in php server script:

This is done with getID3() a php library for reading ID3 meta tags.

When the library is included to the script an object has to be initialized:

$PageEncoding = 'UTF-8';
$getID3 = new getID3;
$getID3->setOption(array('encoding' => $PageEncoding));

The encoding isn’t necessary in all cases but it doesn’t hurt.

Given a file the meta data is extracted by the following function:

$fileinfo = $getID3->analyze($filename);

$fileinfo is a multidimensional array that stores all data getID3 could find. Btw. data like file size and duration are stored in the meta information by default and don’t have to be added manually. Just make a var_dump and search for the information you are interested in.

For my purposes I extract file size, duration (both default), title, description, keywords, artist and genre. The latter four have to be added manually to the meta information and are stored under tags->quicktime in the multidimensional array (eg. $fileinfo[‘tags’][‘quicktime’][‘title’]).

The extra information from the meta tags are stored in an array for each video, is JSON encoded along with the filename and the uri and sent to the client.

Here is a snippet how to send the data to the client:

$json['v'] = $all_videos;
$encoded = json_encode($json);
// send response back to index.html
header('Access-Control-Allow-Methods : POST, GET, OPTIONS');
header('Access-Control-Allow-Origin: *');

Line 4 and 5 help overcoming some security issues when making an ajax request to a foreign server.

Search in clients javascript:

How to search a string in an other string now that we have all data shouldn’t be a challenge. But anyway, here is the function i use:

function searchAllVideos(needle){
	foundIn = new Array();
	var str="Visit W3Schools!";
	for(j=0; j < videoObject.v.length; j++){
		found = 0;
		if(videoObject.v[j].title.toLowerCase().indexOf(needle.toLowerCase()) != -1){
		if(videoObject.v[j].description.toLowerCase().indexOf(needle.toLowerCase()) != -1){
		keywords = videoObject.v[j].keywords;
		haystack = "";
		for(i=0; i 0){
	return foundIn;

videoObject is the JSON Object returned from the server script and converted to JavaScript. The array v stores all information for every video found on the server.
foundIn stores all indexes where the needle is found. I also count the occurrences in the different tags. Maybe I will use that for an order of found videos in future… Of course I am doing the search case insensitive, don’t thing anything else makes sense here.
Now all videos with the found indexes have to be displayed and everything is fine. :)

This page is also available in: German

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>