Wie lassen sich in einer exportierten WhatsApp-Chat-HTML-Datei Mediendateien verlinken oder einbetten?
- Grundlagen des Umgangs mit Medien in HTML-Dateien
- Mediendateien verlinken
- Mediendateien direkt in HTML-Datei einbetten
- Alternative: Base64-Einbettung
- Vorgehensweise beim manuellen Einfügen
- Fazit
Wenn man Chats aus WhatsApp als HTML-Datei exportiert, sind darin in der Regel nur die Textnachrichten enthalten. Mediendateien wie Fotos, Videos oder Sprachnachrichten werden dabei nicht automatisch in die exportierte HTML-Datei eingebettet oder verlinkt. Möchte man jedoch Medieninhalte innerhalb der HTML-Datei sichtbar machen oder darauf verlinken, braucht es einige manuelle Anpassungen.
Grundlagen des Umgangs mit Medien in HTML-Dateien
HTML als Sprache unterstützt das Einbinden von Bildern, Videos und Audio mit den Tags <img>, <video> und <audio>. Dabei können je nach Verwendungszweck entweder lokale Datei-Pfade oder Web-URLs verwendet werden. Da WhatsApp beim Chat-Export die Mediendateien nicht automatisch integriert, müssen diese entweder separat vorliegen oder aus der Sicherung heraus kopiert werden.
Mediendateien verlinken
Am einfachsten ist es, wenn sich die Mediendateien in einem Verzeichnis neben der exportierten HTML-Datei befinden, beispielsweise in einem Ordner namens Media. Dann kann man in der HTML-Datei mit einem normalen Link (<a href="Media/beispiel.jpg">) auf die Datei verweisen. So sieht der Link für ein Bild oder Video zum Beispiel folgendermaßen aus:
<a href="Media/foto1.jpg">Foto ansehen</a>Beim Anklicken öffnet sich die Datei in einem neuen Tab oder einem externen Medienplayer, je nach Dateityp und Browser.
Mediendateien direkt in HTML-Datei einbetten
Wollte man Medien direkt sichtbar in der HTML-Datei anzeigen, kann man je nach Medientyp die passenden HTML-Tags benutzen. Für Bilder verwendet man:
<img src="Media/foto1.jpg" alt="WhatsApp-Foto">Das Bild wird dann direkt in den Chatverlauf eingebunden und angezeigt. Für Videos und Audiodateien sind ähnliche Tags verfügbar:
<video controls src="Media/video1.mp4">Ihr Browser unterstützt das Video-Tag nicht.</video><audio controls src="Media/audio1.ogg">Ihr Browser unterstützt das Audio-Tag nicht.</audio>
<audio controls src="Media/audio1.ogg">Ihr Browser unterstützt das Audio-Tag nicht.</audio>
Damit diese eingebetteten Dateien im Browser angezeigt werden, müssen die Medien relativ zum Speicherort der HTML-Datei verfügbar sein. Das bedeutet, dass die Datei Media/foto1.jpg im gleichen Verzeichnis oder einem Unterordner liegen muss, auf den der HTML-Link verweist.
Alternative: Base64-Einbettung
Eine weitere Möglichkeit ist, Mediendateien direkt in der HTML-Datei als Data-URL einzubetten. Dabei wird der Binärinhalt der Mediendatei in Base64 kodiert und im src-Attribut eingebunden. Das hat zur Folge, dass alle Inhalte in einer einzigen Datei vorliegen, was aber die HTML-Datei stark vergrößert.
Ein Beispiel für ein eingebettetes Bild sieht so aus:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="WhatsApp-Foto">Der lange Base64-String ersetzt hieraus die eigentliche Bilddatei. Diese Methode eignet sich vor allem für kleine Bilder, nicht aber für größere Medien wie Videos.
Vorgehensweise beim manuellen Einfügen
Damit Ihre WhatsApp-Chat-HTML-Datei Medien unterstützt, gehen Sie etwa so vor:
Zunächst extrahieren Sie die relevanten Mediendateien aus der Chat-Sicherung oder aus WhatsApp selbst und speichern diese in einem separaten Ordner am gleichen Ort wie die HTML-Datei. Anschließend öffnen Sie die HTML-Datei mit einem Texteditor und fügen an den entsprechenden Stellen im Chatverlauf entweder <a>-Verlinkungen oder <img>/<video> Tags ein, die auf die lokalen Medien verweisen. So erscheinen die Medien entweder als direkte Ansichten im HTML-Chat oder als anklickbare Links.
Fazit
WhatsApp exportiert beim Chat-HTML standardmäßig keine Medien integriert. Um sie anzuzeigen, ist man auf manuelles Verlinken oder Einbetten angewiesen. Die einfachste Variante ist eine Verlinkung auf lokale Mediendateien in einem Unterordner, wodurch der Chat um Medien-Ergänzungen erweitert wird. Mit Einbettung über img, video und audio kann man eine direkt sichtbare Darstellung erzielen. Für kleinere Medien bietet sich die Base64-Integration an, obwohl diese die Datei stark vergrößert. Wichtig ist, dass die Pfade zu den Mediendateien korrekt relativ zur HTML-Datei gesetzt werden.