Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Video- und Audiodateien ohne Plugins in WordPress einbinden

Vor kurzem habe ich bereits erklärt, wie man YouTube Videos in WordPress einbinden kann. Wer aber lieber seine Videodateien auf dem eigenen Server haben will und diese nicht über einen Drittanbieter wie z.B. YouTube, Vimeo, etc. hosten möchte, der kann seit WordPress 3.6 im Handumdrehen Videos ohne Plugins in WordPress einbinden.

Denn mit WordPress 3.6. kommt ein sehr umfangreicher integrierter Audio-/ Videoplayer. Hierzu setzt WordPress auf die sehr beliebte MediaElement.js. Auf der Herstellerseite sieht man auch direkt alle unterstützen Formate und wie welcher Browser oder welches Gerät die einzelnen Formate interpretiert. Hierzu ein Screenshot der Tabelle:

Browser and Device support - Quelle: mediaelementjs.com

Browser and Device support – Quelle: mediaelementjs.com

Video in WordPress einbinden

Um nun ein Video in WordPress einzubinden, geht man ähnlich vor wie bei einem Bild. Innerhalb eines Artikels oder einer Seite klickt man oben links auf „Dateien hinzufügen„, wählt anschließend „Dateien hochladen“ und klickt auf den „Dateien auswählen„-Button um die Video / Audio Datei auf seinem PC zu suchen oder wirft sie direkt per Drag ’n Drop in den „Uploadbereich“.

Nach erfolgreichem Hochladen befindet sich unten rechts ein kleines Dropdown-Menü, welches auf „Eingebundener Medien-Player“ gestellt sein muss. Nun auf den blauen Button „In den Beitrag einfügen“ klicken und das Video befindet sich in eurem Artikel:

 
Der Shortcode dazu sieht wie folgt aus:

[[video width="480" height="270" mp4="/wp-content/uploads/2013/Knock-Knock-Knock-Penny-Knock-Knock-Knock-Sheldon-.mp4"][/video]]

Neben der Größe und der Breite werden automatisch das Format, sowie die passende URL angegeben. Für einen HTML5/Flash-Fallback können ebenfalls weitere URLS angegeben werden, so würde der Shortcode in etwas so aussehen.

Audio Dateien in WordPress einbinden

Mit Audio Dateien ist es genau wie bei den Videos. Zunächst wird die Audio Datei über den Button „Dateien hinzufügen“ hochgeladen und man halt folgendes Ergebnis:


 
Der Shortcode für die Audio Datei sieht so aus:

[[audio mp3="/wp-content/uploads/2013/Knock-Knock-Knock-Penny-Knock-Knock-Knock-Sheldon-.mp3"][/audio]]

 
Die neue WordPress Audio/Video API ist noch um ein vielfaches umfangreicher, als wirklich nur ein Video oder eine Audio Datei einbinden. Wer ein wenig mehr zu 3.6 erfahren möchte kann sich den Artikel auf wpde.org dazu anschauen. Wir werden uns die neuen Funktionen auf jeden Fall mal etwas genauer anschauen und diesen Artikel ergänzen oder einen 2. Teil dazu veröffentlichen. :)

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

45 Kommentare

Avatar von Torsten Fleischer

Torsten Fleischer 4. August 2013 um 7:53

Hallo André,

danke für den Input. Ich werde versuchen einiges davon direkt umzusetzen.

Beste Grüße.

Torsten Fleischer

Antworten
Avatar von Guido Augustin

Guido Augustin 3. September 2013 um 9:26

Hallo André,

schön, dass das jetzt geht mit WP 3.6 – aber wie ist es mit dem Upload-Limit von 8 MB? Bei Videos komme ich damit nicht weit … Any idea?

Gruß Guido

Antworten
Avatar von André Köbel

André Köbel 3. September 2013 um 10:15

Hey Guido,

das Problem hat in erster Linie nichts mit WordPress zu tun, sondern ist von dem Server so vorkonfiguriert. D.h. es gibt nun 3 Optionen.

1. Du rufst beim Hoster an und fragst, ob er die php.ini entsprechend anpassen kann (er wird da bescheid wissen). Wenn du einen Root-/Dedicated-Server oder zumindest SSH Zugriff hast, dann ist das natürlich auch selbst möglich.
2. Du lädst das Video direkt per FTP in den Upload-Ordner von WordPress hoch
3. Das Ganze selbst konfigurieren (nicht immer möglich / erfolgreich)

3.1. Entweder folgende Zeilen in die functions.php setzen

[php]@ini_set( ‚upload_max_size‘ , ’64M‘ );
@ini_set( ‚post_max_size‘, ’64M‘);
@ini_set( ‚max_execution_time‘, ‚300‘ );[/php]

3.2 Oder eine php.ini in dem Root Verzeichnis anlegen mit dem Inhalt:

[php]upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300[/php]

3.3. Das Ganze via .htaccess, dazu folgendes in die bestehende Datei einfügen:

[php]php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300[/php]

Aber Auchtung, gerade bei 1und1 Server gibt’s hier erfahrungsgemäß Probleme damit. Wenn du also danach beim Aufrufen deiner Seite eine Fehlermeldung bekommst, heißt es, dass es so nicht möglich ist und man müsste auf die 2. Option zurückgreifen.

Hoffentlich konnte ich dir helfen, kannst ja mal berichten. :)

Antworten
Avatar von Iris Heumann

Iris Heumann 7. September 2013 um 18:12

Hallo Guido,

sehr hilfreicher Tipp, der mir vviel Zeit gespart hat. Danke schön!!

Eine Frage bleibt aber noch. Ich hoffe, ich stelle mich damit nicht als absoluten Laien bloß: Kann ich die Optik „aufpeppen“? Der leer schwarze Bildschirm wirkt wenig einladend und ich würde gerne eine anspechendere Grafik einbinden. Ist das möglich und wenn ja, wie geht das.

Vielen Dank und viele Grüße
Iris

Antworten
Avatar von Jost

Jost 10. September 2013 um 23:20

Das geht mit der Auszeichung „poster“, die ein passendens Bild angibt

Antworten
Avatar von Kristina Schubert

Kristina Schubert 8. November 2013 um 21:42

Hallo André,

danke für den Artikel. Nachdem ich es erfolglos über den FTP-Zugang versucht habe ein Video zum Laufen zu bringen, habe ich es jetzt über die Einfügefunktion von WP versucht. Das Video wird auch hochgeladen, erscheint dann als schwarzer Bildschirm mit dem bekannten Kreis und Pfeil in der Mitte, läßt sich aber nicht abspielen. Das heißt, weder Ton noch Bild ist sichtbar. Was kann ich da tun?
Vielen Dank Kristina

Antworten
Avatar von André Köbel

André Köbel 8. November 2013 um 22:25

Hey Kristina,

das sieht in erster Linie danach danach aus, als wäre der Pfad zum Video falsch.

Schreib mir dochmal deine URL über das Kontaktformular, dann schau ich ma schnell drüber. :)

Gruß
André

Antworten
Avatar von Kristina Schubert

Kristina Schubert 9. November 2013 um 14:46

Hallo Andre´,
das ist sehr nett. Ich habe hier den Link zu einem Testblog eingefügt. Habe gerade das Theme gewechselt, weil ich wissen wollte, ob es daran liegt. Führt aber zum gleichen Ergebnis. Ich habe das Video über die Funktion „Medien“ hochgeladen. Das kann doch kaum ein falscher Pfad entstehen.
lehrportal-fuer-erzieher.de/versuch

Vielen Dank Kristina

Avatar von André Köbel

André Köbel 10. November 2013 um 12:16

Hey Kristina,

die URL ist richtig eingebunden. Wenn du die Datei direkt aufrufst, wird der Fehler schnell klar. Die Datei scheint fehlerhaft zu sein:

Das kann nun natürlich viele Ursachen haben…

Kannst du die Datei denn auf dem PC abspielen oder kannst du sie auf z.B. YouTube hochladen und wird sie dort abgespielt?
=> Wenn nein ist die Datei definitiv fehlerhaft und müsste neu erstellt werden. Es kann aber auch sein, dass dein Player diesen Fehler automatisch behebt. Daher ist der Punkt nicht 100% sicher.

Ist die Dateigröße auf dem PC so groß wie in der Mediathek?
=> Wenn nein, gab es Probleme beim Upload (am besten nochmal Probieren)

Das schonmal überprüfen. :)

Gruß André

Avatar von Rudolf Fiedler

Rudolf Fiedler 9. November 2013 um 21:43

Hallo, gibt es irgendwo eine Übersicht über die möglichen Parameter?
z.b. autoplay, Vorschaubild wurde schon genannt?
Vielen Dank,
bin immer wieder gerne hier…

Rudi

Antworten
Avatar von Christian Lang

Christian Lang 10. November 2013 um 12:05

Hallo Rudi,

das gibt es!

Video Shortcode: http://codex.wordpress.org/Video_Shortcode
Audio Shortcode: https://codex.wordpress.org/Audio_Shortcode

Dort solltest du alles finden :-)

Freut uns das du gerne hier bist!

Viele Grüße
Christian

Antworten
Avatar von Kristina Schubert

Kristina Schubert 10. November 2013 um 13:49

Hallo Andre´,

ich bin dir wirklich sehr dankbar, dass du so intensiv versuchst mir zu helfen.
Als Hintergrundinfo: ich habe einen youtube-kanal. Da funktionieren alle Videos einwandfrei. Ich habe das Hochladen in WP mit verschiedenen Themes versucht und unterschiedlichen Größen, im Visuellen und Text-Modus. Mit Hilfe des Plugins „add from Server“ habe ich auch größere Videos über ftp eingespielt – immer mit dem gleichen Egebnis. Bei mir wird keine fehlerhafte Datei angezeigt, sondern dass das Format nicht verstanden wird. Ich erstelle alle Videos in mp4, meist in DH 1280×720 über Pinnacle. Hier ist noch ein Beispiel: die oberen Videos sind über youtube eingespielt und nach der „Baustelle“ das Video über WP http://www.isi-schubert.de/buchhaltung-lernen.

Unklar ist die Sache mit dem Player. Was brauche ich denn dafür oder was brauche ich noch?

Viele Grüße und vielen Dank. Wie kann ich mich revanchieren?

Kristina

Antworten
Avatar von André Köbel

André Köbel 10. November 2013 um 17:17

Hmmm… Mir gehen die Ideen aus. Das ist sehr merkwürdig. Dann scheint es wohl ein Codec zu sein, mit dem der normale WP Shortcode nicht umgehen kann. Da bin ich allerdings leider auch überfragt, da ich mit Video Codecs nichts am Hut habe. Vllt. nochmal ein anderes Format (webm, ogg, flv) probieren.

Brauchst dich nicht zu revanchieren. Wenn du mal was bei Themeforest kaufen wirst, gern über unseren Reflink. :)

Gruß
André

Antworten
Avatar von Stefan Aigner

Stefan Aigner 11. November 2013 um 11:19

Hallo André

danke für den Beitrag.
Ich war bis vor kurzem von dem Player begeistert.
Doch seit kurzem laufen die Videos auf dem Firefox-Browser nicht mehr (gilt auch füpr das Video auf dieser Seite). Kennst Du das Prblem?

Gruß. Stefan

Antworten
Avatar von André Köbel

André Köbel 11. November 2013 um 11:33

Hey Stefan, also bei mir Funktioniert das Video (und auch die Audiofile) wunderbar (hier im Blog). Ich nutze Firefox 26. Hast du vllt. irgend ein Addon installiert, weswegen es seit kurzem nicht mehr geht?

Antworten
Avatar von Stefan Aigner

Stefan Aigner 11. November 2013 um 11:41

Hi. Danke. Hab Firefox 25. Wüsste aber nichts von nem neuen Plugin. Dann werd ich das mal überprüfen. Zumindest sehen dann andere das Video und ich muss mir darüber keinen Kopf machen. Kannst Du das Video hier sehen: http://www.regensburg-digital.de/rabiate-festnahme-polizei-will-vorwuerfe-umfassend-pruefen/12092013/

Antworten
Avatar von André Köbel

André Köbel 11. November 2013 um 11:50

Jap, bei mir geht das Video. Ist echt komisch, schau mal bzgl. deiner Addons vllt. ist da irgendwas, was das Video blockiert. Oder mal ein FF Update machen, wobei das eig. nicht sein kann, wenn es vorher ja auch ging.

Antworten
Avatar von Christian Lang

Christian Lang 11. November 2013 um 13:32

Hallo Stefan,

(bei mir geht das Video auch!)

Aber mal ein kleiner Hinweis, da ich gesehen habe das du nur ein .mp4 Video anbietest:

http://software-finden.de/kostenlose-software-um-deine-videos-fur-html5-player-zu-konvertieren/

Beuscher mit dem Browser Opera haben so also keine Chance… Eventuell noch .webm oder .ogv anbieten – das verkürzt auch die Ladezeiten erheblich :-)

Viele Grüße
Christian

Antworten
Avatar von Kristina Schubert

Kristina Schubert 11. November 2013 um 19:06

Hallo liebe Männer,

ihr habt mich mit der Diskussion hier auf den richtigen Weg gebracht. Ich habe seit Wochen versucht meine Videos einzustellen, ohne Erfolg. Jetzt weiß ich woran es lag. Die Videos müssen für HTML 5 konvertiert werden. Bei youtube wird das offensichtlich automatisch mit erledigt.

Ich danke vielmals.

Kristina

Antworten
Avatar von André Köbel

André Köbel 11. Februar 2014 um 9:58

Gerne. :) Ja, YouTube erstellt X verschiedene Versionen eines jeden Videos für alle möglichen Browser, Geräte, etc, sodass immer das optimalste ausgegeben wird.

Antworten
Avatar von Chris Kristuf

Chris Kristuf 8. Februar 2014 um 5:18

Hallo! Ich habe auch ein Problem mit meinen Videos, die im FF nicht abgespielt werden und, wie ich heute feststellen musste, auch mit MP3-Files. Wenn ich die entsprechende Seite aufrufe, erscheint ganz kurz der eingebundene Medienplayer und dann aber gleich nur noch der Text „Datei herunterladen“.

Bei den Videos habe ich mir über den Umweg Vimeo geholfen, was mich zwar nicht überzeugt, aber schon Mal besser als gar nichts ist. Beim Soundfile stehe ich auf dem Schlauch.

Vielleicht finde ich hier ein paar Tipps?

Thx Chris

Antworten
Avatar von Christian Lang

Christian Lang 11. Februar 2014 um 8:44

Hi Chris,

Besteht das Problem nur im Firefox? Wenn ja, deaktiviere mal alle Plugins etc.

Gruß
Christian

Antworten
Avatar von Chris Kristuf

Chris Kristuf 13. Februar 2014 um 5:33

Hallo Christian!

Ja, nur im FF. IE funktioniert. Im Firefox habe ich eine Stelle gefunden, in der ich die Addons ausschalten konnte. Wie kann ich die Plugins abschalten. Sollte eigentlich nur Flash als Plugin laufen.

THX

Chris

Avatar von Christian Lang

Christian Lang 14. Februar 2014 um 9:20

Hi!

Du klickst bitte auf:

Firefox – Addons – Erweiterungen

Dort suchst du die Plugins und klickst auf „Deaktivieren“ oder „Entfernen“. Danach FF neustarten. :)

Avatar von Chris Kristuf

Chris Kristuf 14. Februar 2014 um 15:40

So weit war ich schon. Hat aber nicht geholfen :-(

Antworten
Avatar von Christian Lang

Christian Lang 14. Februar 2014 um 16:59

Merkwürdig. Dann kann ich nur noch Neuinstallation und/oder Update vom Browser empfehlen. Sorry.

Antworten
Avatar von Chris Kristuf

Chris Kristuf 17. Februar 2014 um 17:37

Danke für die Tipps!

Antworten
Avatar von Kristina

Kristina 24. Februar 2014 um 15:56

Hallo, kennt sich jemand mit dem Videoprogramm Pinnacle Studie 15 aus? Ich habe dort meine Videos in mp4 gespeichert. WordPress kann sie aber nicht lesen. Ich habe mir dann die Testversion von Camtasia geholt und die Videos nochmals dort als mp4 gespeichert, danach konnte WordPress sie lesen. Hat jemand eine Idee, was ich an der Einstellung in Pinnacle falsch gemacht haben könnte?
Viele Grüße Kristina

Antworten
Avatar von Christian Lang

Christian Lang 24. Februar 2014 um 17:25

Hallo Kristina,

das kann eigentlich nur mit dem Codec zu tun haben. Ich kenne das Tool leider nicht. Was du aber machen kannst: Öffne beide Datein mit Rechtsklick > Eigenschaften und prüfe die jeweiligen Codecs / Werte. Dann musst du nur noch herausfinden wo du das in Pinnalce Studio 15 ändern kannst, da kann ich dir leider nicht helfen.

Gruß
Christian

Antworten
Avatar von Kristina

Kristina 24. Februar 2014 um 18:27

Hallo Christian,

hab vielen Dank. Ich habe das geprüft. Es gibt große Unterschiede in der Datenrate und in der Gesamtbitrate. Kann das daran liegen?

Grüße Kristina

Avatar von Christian Lang

Christian Lang 25. Februar 2014 um 14:58

Durchaus, gleiche das einfach mal an. Eventuell auch einfach mal einen anderen Codec testen. :-)

Gruß
Christian

Avatar von Julia Sandor

Julia Sandor 19. März 2014 um 12:30

Ein herzliches Hallo an alle,

damit Videos direkt abgespielt werden können, sollten die Videos in MP4 mit dem H.264 Codec konvertiert sein. Da gibt es gute und kostelose Programme zum konvertieren. Z. b. hier chip.de/downloads/Freemake-Video-Converter_44015164.html

Was super wichtig ist, dass das Video mit Faststart optimiert ist. Mit Faststart startet das Video sofort egal wie gross es ist. Ohne Faststart wird das Video erst komplett gedownloadet und dann erst abgespielt. Ein gutes Programm für Faststart gibt es hier: datagoround.com/lab/

Hoffe ich konnte Helfen.

Antworten
Avatar von simon

simon 7. April 2014 um 23:16

Hallo bin auf diesen guten Artikel gestoßen…..ich bin leider ein Laie in Sachen html und versuche grad mp4 als auch ogv Format anzubieten. Unter Impressionen meiner Website soll das Video abgespielt werden, leider funktioniert, dass nur bei google chrome.

Hier was ich bis jetzt

hinzugefügt habe. Kp ob ich da einen denkfehler habe

Antworten
Avatar von Christian Lang

Christian Lang 8. April 2014 um 7:46

Hallo Simon,

soweit eigentlich alles richtig. Ich vermute mal es liegt an der .mp4 Datei. Hast du diese mal entfernt und nur versucht den Player in Firefox mit dem .ogv Format zu laden? Zur Not schau mal hier:

http://software-finden.de/kostenlose-software-um-deine-videos-fur-html5-player-zu-konvertieren/

Ich finde .webm als das bessere Format gegenüber ogv.

Viele Grüße
Christian

Antworten
Avatar von simon

simon 8. April 2014 um 10:30

Danke für deine schnelle Antwort.

Habe nun einfach mal die mp4 entfernt und firefox kanns immer noch nicht das Format abspielen -.-…

google chrome kannst sogar ogv abspielen…. Keine Ahnung wo ich jetzt ansetzen soll um den fehler zu finden.

Antworten
Avatar von simon

simon 10. April 2014 um 9:55

Hallo, vll hat jemand das gleiche problem!

Ich hab die Lösung gefunden:

Ich habe die .htcaccess Datei wie folgt ergänzt:

AddType audio/ogg .oga
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

und dann hat es super funktioniert

Antworten
Avatar von Christian Lang

Christian Lang 11. April 2014 um 7:05

Super, danke für die Antwort!!

Avatar von Toni

Toni 28. Mai 2014 um 14:03

Hallo,

vielen Dank für den Hinweis mit dem integriertem Videoplayer.
Soweit funktioniert es auch, nur leider sind die Player Buttons nicht zu sehen, also Play, Sound, Vollbild werden bei mir nicht angezeigt (egal ob FF oder IE). Hier auf der Seite bei dem Player werden mir die Steuerbuttons angezeigt. Wenn man in dem Bereich klickt, ist die Funktion trotzdem da.

Gibt es dazu Settings, dass man sie anzeigt? Woran könnte es womöglich noch liegen?

Viele Grüße
Toni

Antworten
Avatar von Voxs

Voxs 10. Oktober 2014 um 8:47

du hast einen orthogr. Fehler in deinem Template / der Sprachdatei, s. o. l.: „38 Kommetare„?

Antworten
Avatar von Christian

Christian 10. Oktober 2014 um 13:20

Danke, hab ich direkt gefixt!

Antworten
Avatar von Marek

Marek 18. November 2014 um 0:27

Hallo, der Container der Videodatei (mp4) soll für WEB optimiert sein. Kleine Tools wie Hanbrake als Beispiel erledigen die Kodierung und Optimierung sehr gut. Dafür nutzt man die Stellung „web optimized“ noch bevor das Video mit Encodierung beginnt. Wird das nicht angehalten, kann unser Flashplayer den Header der Videodatei schlecht interpretieren. In der Folge, kaum stream möglich, Video ladet ewig, startet spät oder gar nicht. Ich habe hier Pinnacle gelesen und kann leider keine Antwort ob das geht oder auch nicht geben. Magix Video deLuxe hat in jedem Fall solche Option als Schnittprogramm, und besagte Handbrake ebenso.
Wird reine Flash-Endung (flv) verwendet, dann entfällt eine extra-Funktion der Optimierung.
Grüsse
m.

Antworten
Avatar von Gilly

Gilly 28. Mai 2015 um 0:10

Auch von mir an dieser Stelle ein Dankeschön für diesen Post :)

Antworten
Avatar von Andy

Andy 27. August 2015 um 16:36

Na wundeerbar, habe es gerade mal ausprobiert und hat auf Anhieb fuktioniert :)!

Antworten
Avatar von Anne

Anne 29. August 2015 um 13:53

Hallo André,
auf meiner Website funktioniert der Audioplayer nicht. Er wird auch erst beim 2. Mal Laden der Seite angezeigt.
Kann das auch mit der Menge oder Größe der Songs zusammenhängen?
Habe jetzt schon eine Liste erstellt, aber es funktioniert genau so wenig wie einzelne Player.
Vielen Dank im Voraus, Anne

Antworten
Avatar von Lukas Mühle

Lukas Mühle 30. März 2016 um 14:26

Hallo,

gibt es die möglichkeit auch das Video Automatisch in Vollbild anzuzeigen wenn man auf den Play Button klickt?

lg Lukas

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*