Blog

Videos fürs Web konvertieren mit Gulp & FFmpeg

Tools Gulp

Videos auf der eigenen Seite zu hosten, ist immer noch alles andere als spaßig, denn noch sind wir weit davon entfernt, bezüglich des Formats einen festen Standard zu haben. Damit das Video nicht nur in den modernsten Browsern funktioniert, sondern auch in den etwas älteren, muss das Video in mehreren Dateiformaten bereitgestellt werden.

Die Formate, die benötigt werden, sind MP4, Ogg und WebM. Von jedem Video händisch drei unterschiedliche Versionen abzuspeichern, kann hierbei allerdings nicht die Lösung sein, dafür ist der Aufwand zu hoch, falls sich mal etwas an der Ursprungs-Datei ändert.

Wir nutzen deshalb einen Gulp-Task, der uns die Kodierung, Skalierung und Komprimierung der Videos abnimmt.

Damit der Gulp-Task funktioniert, müssen natürlich die benötigten Packages & Tools installiert sein:

Dann kann es auch schon losgehen! Innerhalb unseres Gulp-Files haben wir folgende Funktionen definiert:

const gulp    = require('gulp');
const ffmpeg  = require('gulp-fluent-ffmpeg');
const set     = {
  video: {
    in: './media/in/**/*.mp4',
    out: './media/out',
    outputOptions: '-movflags frag_keyframe+empty_moov',
    size: '1600x?'
  }
}

function mp4() {
  return (
    gulp.src(set.video.in)
      .pipe(ffmpeg('mp4', function (cmd) {
        return cmd
        .outputOptions(set.video.outputOptions)
        .size(set.video.size)
      }))
      .pipe(gulp.dest(set.video.out))
  );
}
function ogg() {
  return (
    gulp.src(set.video.in)
      .pipe(ffmpeg('ogv', function (cmd) {
        return cmd
        .outputOptions(set.video.outputOptions)
        .size(set.video.size)
      }))
      .pipe(gulp.dest(set.video.out))
  );
}
function webm() {
  return (
    gulp.src(set.video.in)
      .pipe(ffmpeg('webm', function (cmd) {
        return cmd
        .outputOptions(set.video.outputOptions)
        .size(set.video.size)
      }))
      .pipe(gulp.dest(set.video.out))
  );
}

exports.mp4  = mp4;
exports.ogg  = ogg;
exports.webm = webm;

gulp.task('video', gulp.parallel(mp4, ogg, webm));

Abhängig von der Anzahl und Dateigröße der Videos und natürlich der Leistung eures Computers, dauert die Konvertierung ein wenig…

Kaffeekasse

Der Artikel hat Dir weitergeholfen? Sehr schön! Dann spendier uns doch ein 🍺 oder einen ☕ auf Steady.com.

Supporte uns auf Steady.com
Lukas Becker, geschäftsführender Gesellschafter der Digitalagentur candyblue UG (haftungsbeschränkt) aus Kassel 1