Die Frage war, wie man Audio- und Video-Dateien in einer Html-Datei einbettet.

Einbettung in WordPress

Für Benutzer eines WordPress-Webs ist das eine einfache Übung. Man fügt in der Bearbeitungsansicht der Seite/des Beitrags über “Einfügen” -> “Add Media” die gewünschten Dateien ein – und fertig.
Der Editor erzeugt den HTML-Kode nicht direkt sondern fügt zunächst einen Zwischenkode ein, und der schaut so aus.

[audio 
  mp3="http://klubderfreunde.at/wp-content/uploads/2018/04/SampleAudio_0.4mb.mp3"][/audio]
[video 
  width="1280" height="720"
  mp4="http://klubderfreunde.at/wp-content/uploads/2018/04/SampleVideo_1280x720_1mb.mp4"][/video]

Dieser Code wird ausgeführt als:

Einbettung in HTML-Datei

Um den korrekten Code für eine einfache HTML-Datei zu erfahren, könnte man sich in einschlägigen Tutorials über die Tags audio und video von w3schools schlau machen. Man kann aber auch durch einen Blick auf den Sourcecode auf die WordPress-Seite den dortigen Code kopieren, was im folgenden Beispiel gemacht wurde:

[code lang=”html”]
<html>
<head>
<title>Audio-Video einbetten &#8211; Rapid-Tagebuch</title>
</head>
<body>
Hier ist ein Demo-Audio-File
<audio preload="none" style="width: 100%;" controls="controls"><source
type="audio/mpeg"
src="SampleAudio_0.4mb.mp3?_=1" /><a href="SampleAudio_0.4mb.mp3">SampleAudio_0.4mb.mp3</a></audio>
Hier ist ein Demo-Video-File
<video width="1200" height="675" preload="metadata" controls="controls"><source
type="video/mp4"
src="SampleVideo_1280x720_1mb.mp4?_=1" /><a href="SampleVideo_1280x720_1mb.mp4">SampleVideo_1280x720_1mb.mp4</a></video></div>

Diese Demodateien stammen von der Seite <a href="https://www.sample-videos.com/" target="_blank" rel="noopener">&#8222;Sample Videos&#8220;</a>
</body>
</html>
[/code]

Diese Code kann im Internet ausgeführt werden:

http://klubderfreunde.at/wp-content/uploads/2018/04/audvid.htm

Man kann den Code auch am eigenen Desktop ausführen. Bitte die Datei AudVid.zip downloden, den Zip-Ordner am Desktop entpacken und dort die Datei audvid.htm durch einen doppelklick im Browser ausführen.

Die Demodateien (.mp3 und .mp4) stammen von der Seite „Sample Videos“

Franz Fiala

Präsident Clubcomputer / Herausgeber PCNEWS bei ClubComputer.at
Franz ist pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreut unser Clubtelefon und Internet Support. Er ist leidenschaftlicher Rapid Wien Fan.

Letzte Artikel von Franz Fiala (Alle anzeigen)