Erstellen einer Videogalerie von MP4-Videos, die über meta-tags mittels getID3, Ajax und PHP durchsucht werden kann

Erstellen einer Videogalerie von MP4-Videos, die über meta-tags mittels  getID3, Ajax und PHP durchsucht werden kann

Einer unserer Kunden fragte nach einer Suchfunktion für eine Videogalerie, die wir für seine Webseite implementiert hatten. Da es im Hintergrund keine Datenbank mit Informationen zu den Videos gab musste ich mit den Meta-Informationen arbeiten, die direkt in den MP4-Dateien gespeichert sind.

Die ursprüngliche Galerie:

Die Galerie sollte auf mobilen Geräten funktionieren, weshalb ich mp4 Videos mit H264 codec in einem HTML-5 Video tag verwendete. Um die Kompatibilität zu den meisten Browsern zu gewährleisten wird ein Video zusätzlich in einem Flash Player abgespielt. Außerdem sollten die Videos in verschiedenen Verzeichnissen (auf verschiedenen Servern) abliegen, weshalb die Videoinformationen (URL, Größe, Länge, usw.) durch einen AJAX-Aufruf an ein PHP-Skript in den unterschiedlichen Verzeichnissen geladen werden. Das Skript liest die Verzeichnisinhalte, filtert nach MP4 Dateien und gibt die Informationen als JSON-Objekt zurück.
Auf Client Seite werden diese Daten als Videogalerie mit einigen Informationen zum Video dargestellt und natürlich können die Videos auf fast allen Geräten und Browsern angeschaut werden. :)

Die Erweiterung der Galerie:

Zunächst müssen die Metadaten natürlich dem Video hinzugefügt werden. Der MP4 Container kann Informationen, wie einen Titel, eine Beschreibung, Schlüsselworte, Künstler, Genre und Erstellungsdatum speichern, ähnlich wie ein ID3-Tag. Ich nutze MetaX, um diese Meta-Tags zu bearbeiten.

Das Auslesen der Meta-Daten im PHP-Skript:

Das Auslesen wird durch getID3() erledigt. Dies ist eine PHPO Bibliothek, die für das lesen von ID3-Tags geschrieben wurde.

Nach dem includen der Bibliothek zum Skript muss zunächst ein Objekt initialisiert werden:

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

Die „encoding“ Einstellung ist nicht in allen Fällen nötig, aber schadet auch nicht.

Durch folgende Funktion werden die Meta-Daten aus einer Datei extrahiert:

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

$fileinfo ist ein multidimensionales Array, das alle Daten beinhalten, die getID3 fingen konnte. Übrigens werden Daten, wie die Dateigrösse und Länge des Videos standardmässig in den Metadaten gespeichert und müssen nicht manuell hinzugefügt werden. Einfach mal einen var_dump ausführen und die Informationen suchen, die von Interesse sind.

Für meine Zwecke werden Dateigröße, Länge des Videos (beide Standard), Titel, Beschreibung, Schlüsselworte, Künstler und Genre benötigt. Die letzten vier müssen manuell zu den Meta-Tags hinzugefügt werden und sind unter tags->quicktime im multidimensionalen Array zu finden (z.B. $fileinfo[‚tags‘][‚quicktime‘][‚title‘]).

Die zusätzlichen Informationen aus den Meta-Tags werden anschließend für jedes Video in ein Array gespeichert, mit dem Dateinamen und der URI für JSON kodiert und an den Client gesendet.

Hier ein kleiner Code-Schnipsel, wie das Senden an den Client funktioniert:

$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: *');

Zeilen 4 und 5 helfen einige Sicherheitsprobleme zu bewältigen, die ausgelöst werden, wenn man einen AJAX-Aufruf an einen entfernten Server startet.

Die Suche auf dem Client in JavaScript:

Wie man nun einen String in einem anderen String sucht, sollte keine Herausforderung mehr sein. Trotzdem habe ich hier die entsprechende Funktion:

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){
			found++;
		}
		if(videoObject.v[j].description.toLowerCase().indexOf(needle.toLowerCase()) != -1){
			found++;
		}
		keywords = videoObject.v[j].keywords;
		haystack = "";
		for(i=0; i 0){
			foundIn.push(j);
		}
	}
	return foundIn;
}

videoObject ist das JSON-Objekt, das vom Server zurückgegeben und in JavaScript konvertiert wird. Das array v speichert alle Informationen für jedes Video auf dem Server.
foundIn speichert alle Indexe der Objekte, in denen needle gefunden wurde. Zusätzlich zähle ich jedes Auftauchen des Suchbegriffes in verschiedenen Tags. Die werde ich in Zukunft vielleicht nutzen, um die gefundenen Videos zu Ordnen. Natürlich wird bei den Suche nicht nach Groß- und Kleinschreibung unterschieden, ich denke nichts anderes macht Sinn hier.
Jetzt müssen nur noch alle gefundenen Videos in einer Liste dargestellt werden und alles ist gut. :)

Diese Seite ist auch verfügbar in: Englisch

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>