---
title: "Medien"
description: "Bilder, Video, Audio, Untertitel, Schriften und Dateien - die Mediathek, welche Formate gehen, Zuschneiden und der Untertitel-Editor."
canonical_url: "https://docs.ols.yonn.online/de/build/media"
---
# Medien

> Bilder, Video, Audio, Untertitel, Schriften und Dateien - die Mediathek, welche Formate gehen, Zuschneiden und der Untertitel-Editor.

Medien sind die Dateien, die du in deinen Kurs holst: Bilder, Videos, Ton, Untertitel, Schriften und PDFs. Sie landen alle in der **Mediathek** des Kurses. Sie bleiben in deinem Browser und werden beim Veröffentlichen in die Kursdatei gepackt. Diese Seite erklärt:

- **Medien einfügen** auf einer Folie.
- **Die Mediathek**: alle Dateien des Kurses an einem Ort.
- **Bilder, Video und Audio**: ihre Einstellungen.
- **Untertitel**: für Video, Audio und Sprechertext.

![Die leere Mediathek mit den unterstützten Formaten für Bilder, Audio, Video und Untertitel](https://docs.ols.yonn.online/screenshots/de/media-library.png)

## Ein Bild in 3 Schritten einfügen

<procedure>

### Bild wählen

Öffne den Tab **Einfügen** und klick auf **Bild**. Das Dateifenster deines Rechners öffnet sich.

### Datei aussuchen

Wähl ein Bild aus. Es kommt in die Mediathek und wird auf die Folie gesetzt.

### Anpassen

Zieh es an seinen Platz und änder die Größe. Im Tab **Format** legst du fest, wie es seinen Rahmen füllt, oder schneidest es zu.

</procedure>

<hint-box kind="tip" title="Noch schneller">

Zieh Bilder, Videos oder Audiodateien direkt von deinem Rechner auf die Folie. Sie werden sofort eingefügt.

</hint-box>

## Welche Dateien gehen

<table>
<thead>
  <tr>
    <th>
      Art
    </th>
    
    <th>
      Formate
    </th>
    
    <th>
      Hinweis
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Bilder
    </td>
    
    <td>
      PNG, JPG, SVG, WebP, GIF, AVIF
    </td>
    
    <td>
      Am besten unter 1 MB und etwa so breit wie die Folie (1280 px bei 16:9).
    </td>
  </tr>
  
  <tr>
    <td>
      Video
    </td>
    
    <td>
      MP4 mit H.264 (empfohlen), WebM, Ogg
    </td>
    
    <td>
      Halt Videos kurz und klein. Alles landet in der Kursdatei.
    </td>
  </tr>
  
  <tr>
    <td>
      Audio
    </td>
    
    <td>
      MP3 (empfohlen), M4A, OGG, WAV
    </td>
    
    <td>
      MP3 läuft überall und ist klein.
    </td>
  </tr>
  
  <tr>
    <td>
      Untertitel
    </td>
    
    <td>
      WebVTT (<code>
        .vtt
      </code>
      
      ), höchstens 2 MB
    </td>
    
    <td>
      Für Video, Audio und Sprechertext.
    </td>
  </tr>
  
  <tr>
    <td>
      Schriften
    </td>
    
    <td>
      WOFF, WOFF2, TTF, OTF
    </td>
    
    <td>
      Eigene Schriften für Texte.
    </td>
  </tr>
  
  <tr>
    <td>
      Dateien
    </td>
    
    <td>
      PDF
    </td>
    
    <td>
      Zum Herunterladen, zum Beispiel als Handout in den Ressourcen des Players.
    </td>
  </tr>
</tbody>
</table>

Eine einzelne Datei darf bis zu 500 MB groß sein. Große Dateien lassen den Kurs in Moodle aber langsam laden. Verkleinere sie also vorher, wenn es geht.

<hint-box kind="warning" title="Moodle hat eine Upload-Grenze">

Moodle lehnt Kursdateien über seiner maximalen Upload-Größe ab. Bei vielen Videos frag deine Moodle-Administration nach der Grenze, oder verlinke ein Video auf einem Webserver.

</hint-box>

## Die Mediathek

Du öffnest sie über <ui-path path="Einfügen > Mediathek">



</ui-path>

 oder <ui-path path="Ansicht > Mediathek">



</ui-path>

.

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Alle
      </strong>
      
       und die Filter
    </td>
    
    <td>
      Zeigen alle Dateien oder nur <strong>
        Bilder
      </strong>
      
      , <strong>
        Videos
      </strong>
      
      , <strong>
        Audio
      </strong>
      
      , <strong>
        Untertitel
      </strong>
      
      , <strong>
        Schriften
      </strong>
      
       oder <strong>
        Dateien
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Suchen
      </strong>
    </td>
    
    <td>
      Findet Dateien nach Namen.
    </td>
  </tr>
  
  <tr>
    <td>
      Größe
    </td>
    
    <td>
      Wie viel Platz alle Medien dieses Kurses belegen.
    </td>
  </tr>
  
  <tr>
    <td>
      Fragezeichen
    </td>
    
    <td>
      <strong>
        Welche Dateien gehen?
      </strong>
      
       Zeigt die unterstützten Formate und Größen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hochladen
      </strong>
    </td>
    
    <td>
      Holt Dateien von deinem Rechner. Du kannst sie auch ins Fenster ziehen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Auf Folie einfügen
      </strong>
    </td>
    
    <td>
      Setzt die Datei mit einem Klick auf die aktuelle Folie.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        ...-mal verwendet
      </strong>
    </td>
    
    <td>
      Wie oft die Datei im Kurs genutzt wird.
    </td>
  </tr>
  
  <tr>
    <td>
      Dateimenü
    </td>
    
    <td>
      <strong>
        Umbenennen
      </strong>
      
      , <strong>
        Herunterladen
      </strong>
      
       oder <strong>
        Löschen
      </strong>
      
      . Löschst du eine Datei, die noch verwendet wird, sagt dir das Studio, wie oft sie genutzt wurde.
    </td>
  </tr>
</tbody>
</table>

## Bilder

Wähl ein Bild aus und öffne den Tab **Format**.

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Anpassung
      </strong>
    </td>
    
    <td>
      Wie das Bild seinen Rahmen füllt: <strong>
        Einpassen
      </strong>
      
       (ganzes Bild sichtbar), <strong>
        Füllen
      </strong>
      
       (Rahmen voll, Ränder werden eventuell abgeschnitten) oder <strong>
        Strecken
      </strong>
      
       (verzerrt passend gemacht).
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Zuschneiden
      </strong>
    </td>
    
    <td>
      Öffnet das Zuschneide-Fenster. Zieh den Rahmen oder seine Griffe; nur der helle Bereich bleibt sichtbar. Wähl ein <strong>
        Seitenverhältnis
      </strong>
      
       (<strong>
        Frei
      </strong>
      
      , <strong>
        Wie Rahmen
      </strong>
      
      , <strong>
        Original
      </strong>
      
      ). <strong>
        Rahmen anpassen
      </strong>
      
       gleicht die Höhe des Bildes an, damit nichts verzerrt wird. Klick auf <strong>
        Übernehmen
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Zuschnitt entfernen
      </strong>
    </td>
    
    <td>
      Zeigt wieder das ganze Bild.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Seitenverhältnis übernehmen
      </strong>
    </td>
    
    <td>
      Gibt dem Rahmen die Proportionen des Bildes.
    </td>
  </tr>
  
  <tr>
    <td>
      Bild ändern
    </td>
    
    <td>
      Wähl eine andere Datei aus der Mediathek. Die Position bleibt.
    </td>
  </tr>
</tbody>
</table>

## Video

Der Knopf **Video** im Tab **Einfügen** bietet **Videodatei hochladen**, **Video per Link** und **Aus Mediathek**.

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Quelle
      </strong>
    </td>
    
    <td>
      <strong>
        Datei
      </strong>
      
       aus der Mediathek oder <strong>
        URL
      </strong>
      
      : ein direkter https-Link auf eine Videodatei (mp4 oder webm).
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Vorschaubild
      </strong>
    </td>
    
    <td>
      Ein Bild, das vor dem Start des Videos zu sehen ist.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Untertitel
      </strong>
    </td>
    
    <td>
      Eine WebVTT-Datei mit Untertiteln.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Autostart
      </strong>
    </td>
    
    <td>
      Startet das Video von selbst. Manche Browser sperren Autostart mit Ton; dann startet das Video nach einem Klick.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Steuerung
      </strong>
    </td>
    
    <td>
      Zeigt Abspielen, Pause und Lautstärke am Video.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Wiederholen
      </strong>
    </td>
    
    <td>
      Spielt das Video immer wieder ab.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Stumm
      </strong>
    </td>
    
    <td>
      Spielt ohne Ton.
    </td>
  </tr>
</tbody>
</table>

## Audio

<table>
<thead>
  <tr>
    <th>
      Einstellung
    </th>
    
    <th>
      Was sie macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Symbol im Player zeigen
      </strong>
    </td>
    
    <td>
      Zeigt ein kleines Lautsprecher-Symbol, das Lernende anklicken können. Aus: Das Audio spielt unsichtbar.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Lautstärke
      </strong>
      
      , <strong>
        Autostart
      </strong>
      
      , <strong>
        Wiederholen
      </strong>
    </td>
    
    <td>
      Wie der Name sagt.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Untertitel
      </strong>
    </td>
    
    <td>
      Eine WebVTT-Datei mit dem gesprochenen Text.
    </td>
  </tr>
</tbody>
</table>

Jede Folie kann außerdem einen eigenen Sprechertext haben: Öffne den Tab **Format** der Folie und wähl unter **Audio** eine Datei.

## Untertitel

Untertitel laufen beim Video oder Sprechertext mit. Sie helfen Lernenden, die den Ton nicht hören können oder in einer leisen Umgebung sind.

<procedure>

### Untertitel-Editor öffnen

Geh auf die Folie mit dem Video oder Audio und klick auf <ui-path path="Einfügen > Untertitel">



</ui-path>

. Unter **Medium** wählst du das Video, das Audio oder den **Foliensprecher**.

### Cues setzen

Starte die Wiedergabe. Sobald ein Satz beginnt, klick auf **Cue an aktueller Position setzen** und tipp den Text. **Start** und **Ende** passt du mit den Knöpfen neben jedem Eintrag an.

### Feinschliff

**Alle verschieben um** setzt alle Untertitel um ein paar Sekunden **Früher** oder **Später**. **.vtt importieren** und **.vtt exportieren** tauschen Untertiteldateien mit anderen Programmen aus.

### Speichern

Klick auf **Speichern**. Die Untertitel landen als `.vtt`-Datei in der Mediathek.

</procedure>

## Wenn etwas nicht klappt

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      Was du tun kannst
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Eine Datei wird nicht importiert
    </td>
    
    <td>
      Das Format wird nicht unterstützt, oder die Datei ist größer als 500 MB. Schau in die Tabelle oben.
    </td>
  </tr>
  
  <tr>
    <td>
      Das Video startet nicht von selbst
    </td>
    
    <td>
      Der Browser sperrt Autostart mit Ton. Schalte <strong>
        Stumm
      </strong>
      
       ein oder lass Lernende per Klick starten.
    </td>
  </tr>
  
  <tr>
    <td>
      Ein Video per Link spielt nicht
    </td>
    
    <td>
      Der Link muss direkt auf eine Videodatei zeigen (Endung .mp4 oder .webm) und mit https beginnen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Untertitel
      </strong>
      
       meldet „Kein Video oder Audio auf dieser Folie“
    </td>
    
    <td>
      Füg zuerst ein Video- oder Audio-Objekt ein oder wähl im Tab Format der Folie ein Folienaudio.
    </td>
  </tr>
  
  <tr>
    <td>
      Der Kurs lädt in Moodle langsam
    </td>
    
    <td>
      Die Medien sind zu groß. Verkleinere Bilder und kürze Videos.
    </td>
  </tr>
</tbody>
</table>

<hint-box kind="ai" title="Mit KI">

KI-Apps fügen Medien mit dem Tool `add_media` ein. Die Datei wird geprüft (Typ, Inhalt, Größe, nur statisches SVG) und in deinem Browser gespeichert. Die KI kann den Server nichts aus dem Internet herunterladen lassen.

</hint-box>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.