Webdesign und Medien
Leave a comment

Mediathek aus DVDs und anderen Filmen aufbauen

Mit WEBM gibt es endlich ein Format, das Filme in hoher Qualität speichert und gleichzeitig als offener Standard für Archive geeignet ist. Firefox, Chrome und viele Medienspieler kommen bereits mit dem Format ausgezeichnet zurecht. Es lohnt sich also, alte Filme zu konvertieren. Recht einfach geht es unter Linux mit avconv:

avconv -i film.avi -acodec libvorbis -aq 7 -b 2M film.webm

Bei DVDs werden die VOB-Dateien benötigt. Der erste Film einer DVD befindet sich in den Dateien VTS_01_1.VOB, VTS_01_2.VOB und so weiter. Der zweite Film beginnt mit VTS_02_1.VOB. Um einen ganzen Film in eine WEBM-Datei zu konvertieren, werden die Teile zusammengefügt:

cat VTS_01_{1,2,3,4,5,6}.VOB | avconv -i - -acodec libvorbis -aq 7 -b 2M film.webm

Wenn es keine VTS_01_6.VOB gibt, kommt zwar eine Fehlermeldung, das WEBM ist aber trotzdem in Ordnung. Die Sprache lässt sich bei Bedarf mit der -map-Option einstellen. Durch den hervorragenden Deinterlacer sehen Filme übrigens nach der Konvertierung meistens besser aus als im DVD-Player.

Bei der Konvertierung von Mitschnitten aus DVB-T hilft der Parameter -async 100000, dass auch bei heftigen Empfangsstörungen der Film weiterspielt. Ansonsten würden Ton und Bild immer weiter auseinanderlaufen. Die WEBM-Datei ist in jedem Falle standardkonform. Die Player zeigen die Gesamtspieldauer korrekt an.

Die fertigen Dateien können einfach auf den Webserver kopiert und mit guten Browsern angeschaut werden. Schöner sieht es aus, wenn im Index der Dateien bereits ein kleiner Player integriert ist. Dazu habe ich die folgende index.html geschrieben. Im darunterliegenden Verzeichnis videos werden die Filme erwartet. Das jQuery-Script liest den vom Webserver automatisch erstellten Index der Videos aus und bereitet die Tabelle für eine schönere Darstellung auf:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<video poster="poster.jpg" autoplay="autoplay"></video>
<div id="filelist"></div>

<script>
$(function() {

$('#filelist').load("videos/", function() {
  $('#filelist title').remove(); // Blabla rundrum
  $('#filelist h1').remove(); // Blabla rundrum
  $('#filelist address').remove(); // Blabla rundrum
  $('#filelist th').parent().remove(); // Kopf
  $('#filelist img').not('[alt="[VID]"]').parent().parent().remove(); // Alle anderen Dateien
  $('#filelist img').parent().remove(); // Video-Symbol
  $('#filelist a').each(function() {
    $(this).attr('href',"/v/videos/"+$(this).attr('href'));
  });

  $('#filelist a').click(function() {
    $('video').attr('src',$(this).attr('href'));
    $('video').attr('controls','controls');
    return false;
  });
});
});
</script>
</html>

Leave a Reply

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