Videos umwandeln und per HTML5 wiedergeben

Ausgangslage:

Ich hatte einige Videos mit meinem neuen Quadrocopter erstellt und wollte dieses "mal eben" für andere bereit stellen.
HTML5 unterstützt das Streamen von mp4 Videos, nicht aber von avi´s.
Das die Videos im avi-Format und einer Auflösung von 1280*720 vorliegen, sollen diese zunächst umgewandelt werden.

Das ist sehr einfach unter Linux (hier Ubuntu 12) möglich, wenn avconv installiert ist.

apt-get install libav-tools

Da der benötigte Codec vermutlich auch noch nicht vorhanden ist, sollte auch ein

apt-get install libavcodec-extra-53

hinterher geschoben werden.

Danach lässt sich ein Video sehr einfach konvertieren mit

avconv -i MOVI0000.avi -s 640x360 -vcodec libx264 MOVIE0000.mp4

 Ein solches Video lässt sich sehr einfach einbetten in HTML-Code mit

 <video width="640" height="360" controls autoplay >..
    <source src="MOVIE0000.mp4" type="video/mp4">..
    Sorry, dein Browser unterstützt kein HTML5 Video...
    </video>

Um die spätere Anzeige grafisch etwas aufzupeppen, bietet es sich an, Thumbnails der Videos zu erstellen. Möchte man von jedem mp4 Video ein Screenshot erstellen und als jpg speichern, lässt sich folgender Einzeiler verwenden:

for i in *.mp4; do avconv -i "$i" -ss 00:00:05 -s 320x180 -vsync 1 -qscale 1 -vframes 1 "${i%.mp4}.jpg"; done

Damit wird das aktuelle Verzeichnis gescannt, alle mp4 Dateien mit avconv bearbeitet und nach 5 Sekunden Laufzeit ein jpg-Bild im Format 320*180 Pixel gespeichert. Die Auflösung müsste je nach Ausgangsmaterial angepasst werden, um unschöne Ergebnisse zu vermeiden.


Wenn das soweit läuft, lässt sich auch schnell etwas scripten. Mit diesem kleinen Beispiel werden alle mp4 Dateien im Ordner "videos" gescannt und per Link aufgeführt. Wenn unter dem gleichen Dateinamen - mit der Endung jpg - eine Datei existiert, wird diese als Vorschaubild angezeigt und bei Klick auf den Link wird das entsprechende Video angezeigt.

// Verzeichnis, in dem die Videos und Vorschaubilder abgelegt sind
//
$dir="videos";
$directory=scandir($dir);
// Wenn Aktion gewählt, erstelle HTML-Gerüst für die selektiert Videodatei
//
if($_GET['action']=="show")
{
    $datei=$dir . "/" . strip_tags($_GET['file']);
    echo "<video width=\"1280\" height=\"720\" controls autoplay >";
    echo "<source src=\"$datei\" type=\"video/mp4\">";
    echo "Sorry, your browser doesn't support HTML5 video...";
    echo "</video><hr>";
}
// Gehe alle Dateien des Verzeichnisses durch
//
foreach($directory as $file)
{
    // Endung mp4?
    if(preg_match("/mp4$/", $file))
    {
        $datei = $dir . "/" . $file;
        $size=filesize($datei); // Dateigröße holen
        $creationdate=date("Y-m-d" ,filectime($datei)); // Erstellungsdatum der Datei
        // Gibt es eine Vorschaudatei?
        $thumbnail=$dir . "/" . str_replace("mp4","jpg",$file);
        $description="";
        if(file_exists($thumbnail))
        {
                 $description ="<img src=\"$thumbnail\" width=\"300\"> <br>";
         }
       $description.=$file . " " . human_filesize($size) . "  [$creationdate]";
       echo "<a href=\"" . $_SERVER['PHP_SELF'] . "?action=show&    file=$file\">$description</a><br>";
    }
}
function human_filesize($bytes, $decimals = 2) {
  $sz = 'BKMGTP';
  $factor = floor((strlen($bytes) - 1) / 3);
  return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
}