Video auf bestimmte Größe bringen (mediaelements.js)

    Hoi Jungs,

    nachdem ich mit Forge-Movies.com die anderen Hürden überwunden habe, stehe ich nun vor einem neuen Problem.
    Ihr wisst ja, Wordpress hat die Mediaelements.js integriert um per Shortcode Videos einzubetten.

    Diesen Code verwende ich, um die Custom-Fields auszulesen und zu übergeben.

    PHP
    <?php
global $post;
$video_attachments = get_posts( array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'video'
) );
$video_attachment_url = wp_get_attachment_url( $video_attachments[0]->ID );
echo '<div class="media-video">' . do_shortcode('[video src="' . $video_attachment_url . '" height="530" width="940" ]') . '</div>';
?>


    Das funktioniert alles wunderbar. Nur wird die Größenangabe leider nicht übernommen. Das Video bleibt in einer festvorgegebenen Breite und Höhe.
    Den Output seht ihr hier: http://forge-movies.com/use-a-meaningful-title-3/
    Hattet ihr auch das Problem und wie habt ihr das gelöst?

    LG

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Von PHP habe ich keine Ahnung, aber ich vermute mal dass dein Problem in die selbe Richtung geht wie ich es ursprünglich hatte.
    Bei deinem Video sehe ich rechts und links jeweils einen breiten schwarzen Streifen. - Das deutet darauf hin, dass das Fenster von Mediaelements (in dem das Video abgespielt wird) nicht dem selben Seitenverhältnis wie das Video selbst entspricht.

    Lass mich das erläutern:
    Ich filme meine Videos in Full HD, was einer Auflösung von 1920 x 1080 oder dem Seitenverhältnis 16:9 entspricht.
    Teilst du 1920 durch 16, und multiplizierst das Ergebnis (120) mit 9 kommst du auf die 1080.

    Die Länge und Breite des originalen Videos waren aber für meine Homepage viel zu groß (ganz abgesehen von der Datenmenge), also konvertierte ich das Video in ein kleineres Format, das aber auch einem Seitenverhältnis von 16:9 entsprechen musste (um eine Verzerrung zu vermeiden).
    Als Ideale Größe empfand ich eine Bildbreite von ca. 640 Pixeln.
    Nach obiger Berechnung 640 geteilt durch 16 multipliziert mit 9 ergab sich eine Auflösung von 640 x 360.
    Nach der Konvertierung des originalen Videos von 1920 x 1080 auf 640 x 360 muß diese Auflösung (640x360) natürlich auch an die Mediaelements-Funktion übergeben werden.
    Verwendest du hier ein anders Längen- und Breitenverhältnis als (wie in diesem Beispiel) das Seitenverhältnis 16:9, dann skaliert die Mediaelement-Funktion das Video so, dass es in das Fenster passt, das du Mediaelements vorgegeben hast.
    Das heißt - eine Seite (oben und unten oder rechts und links) wird so vergrößert, bis es an den Rand des Mediaelements-Fensters stößt. Die anderen beiden Seiten erhalten einen schwarzen Rand, damit das Video nicht verzerrt wird.
    Im Klartext (einfacher erklärt) gibst du Mediaelements nur ein Fenster vor, in dem das Video eingepasst wird.
    Wenn das Video z.B. größer dargestellt werden soll, als es tatsächlich ist, dann muß das Seitenverhältnis auch dem Seitenverhältnis des darzustellenden Videos entsprechen.
    Anbei ein Beispiel.
    Das Original Video liegt schon wie beschrieben in einer Größe von 640x360 vor.
    Es soll aber in einem Fenster mit 800 Pixeln Breite angezeigt werden, dann rechne nach obiger Formel.
    800 geteilt durch 16 multipliziert mit 9 ergibt 450.
    Du müstest also an Mediaelements eine Fenstergröße von 800 x 450 vorgeben, damit es vergrößert in richtigen Seitenverhältnis dargestellt wird.
    Anders herum, dass es kleiner dargestellt werden soll, als das originale Video geht natürlich genau so.

    Ich schlage folgendes vor.
    Schau dir mal das originale Video auf deiner Festplatte (z.B. im Windwos Explorer / rechte Maustaste) an, welche Breite und Höhe das Video wirklich hat. Weißt du nicht das passende Seitenverhältnis, kann ich dir da evtl. auch weiterhelfen, um dieses herauszufinden. (Stichwort Wikipedia).
    Entweder du übernimmst die originale Länge und Breite des Videos für Mediaelements, oder du benötigst das korrekte Seitenverhältnis um das Fenster von Mediaelements dem Seitenverhältnis des Videos anzupassen.

    Und um die Verwirrung perfekt zu machen -> die Pixelgröße von Monitoren weicht gering von originalen Pixelangaben ab. - Aber das muß man ausprobieren.

    Und hier ein Link von einem Video von mir im Format 640 x 360

    LINK

    Den Code habe ich wie folgt in die Seite eingebunden

    [video src="http://www.deinehomepage.de/wp-content/dein Pfad zum Video/Videoname.mp4" width="640" height="360" poster="http://www.deinehomepage.de/wp-content/dein Pfad zum Vorschaubild/Vorschaubild.png" preload="true"]

    Den DIV-Container, der das Video noch auf der Seite zentriert habe ich weggelassen.
    Der Pfad des Posters (Bild vom Video) ist der selbe wo das MP4-Video liegt.
    Das Poster (Vorschaubild) muß die selben Abmessungen haben wie das Video (in diesem Beispiel auch 640x360).
    Beide (MP-4 Video und PNG-Bild) liegen bei mir im selben Verzeichnis.

    Wie du das aber in PHP umsetzen musst, kann ich dir nicht sagen.

    Gruß Frank

    Einmal editiert, zuletzt von Frank9652 (4. Oktober 2013 um 20:34)

    So, ich habe noch mal genauer bei dir hingeschaut.
    Das Testvideo hat 1280 x 720 Pixel (HD Ready) was auch dem Seitenverhältnis 16:9 entspricht.
    Wenn ich mir deine Seite mit Firebug anschaue, sehe ich aber verschiedene Seitenverhältnisse eingetragen.
    Einmal 640 x 361 (korrekt wäre 640 x 360), aber auch 640 x 331.
    Alles in DIV Containern.

    Gruß Frank

    Nachtrag:
    Dein Testvideo hat zwar die äußere Größe 1280 x 720, die schwarzen Streifen sind aber im Video selber drin, und werden nicht durch Skalierung erzeugt.
    Nicht destro trotz stimmen wie oben beschrieben die Einträge im DIV-Container nicht.

    Gruß Frank

    Hoi, danke für deine ausführliche Beschreibung zu den Videogrößen. Selbst wenn du in PHP nicht so fit bist, helfen mir Tipps und Anstöße ganz gut. Aus dem Text konnte ich einige wichtige Informationen über die Größenumwandlung von Videos herausfischen, die ich mir für die Zukunft merken muss.


    Zitat

    Verwendest du hier ein anders Längen- und Breitenverhältnis als (wie in diesem Beispiel) das Seitenverhältnis 16:9, dann skaliert die Mediaelement-Funktion das Video so, dass es in das Fenster passt, das du Mediaelements vorgegeben hast.Das heißt - eine Seite (oben und unten oder rechts und links) wird so vergrößert, bis es an den Rand des Mediaelements-Fensters stößt. Die anderen beiden Seiten erhalten einen schwarzen Rand, damit das Video nicht verzerrt wird.Im Klartext (einfacher erklärt) gibst du Mediaelements nur ein Fenster vor, in dem das Video eingepasst wird....Entweder du übernimmst die originale Länge und Breite des Videos für Mediaelements, oder du benötigst das korrekte Seitenverhältnis um das Fenster von Mediaelements dem Seitenverhältnis des Videos anzupassen.


    Wie die Skalierung funktioniert, konnte ich durch spielen mit den Größenangaben feststellen. Alle Angaben unter 640px in der Breite und 360px in der Höhe, wurde perfekt skaliert. Wenn ich jedoch Angaben über 640px in der Breite machen will, übernimmt mir Mediaelements die Angabe nicht sondern bleibt bei der Breite von 640px fest.


    Wenn ich die Größe von 1280 x 720 oder andere 16:9-Formate (wie auch die "Standard"-Größe für diese Webseite von 940 x 529) ausprobiere, dann die Größenangaben im Ausgabe-Quelltext überprüfe, steht hier wieder 640px x 320px.


    HTML
    <div style="width: 640px; max-width: 100%;"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="video-805-1" width="640" height="360" preload="metadata" controls="controls"><source type="video/mp4" src="/PATH/test.mp4" /><a href="/PATH/test.mp4">/PATH/test.mp4</a></video>
</div>


    Anscheinend ist es so, dasss Mediaelements nicht über die Breite von 640px hinausgeht. Vielleicht dachten sich die Entwickler, dass es keinen Sinn macht, Bild-Größen darüber anzuzeigen. Wenn ich doch nur die Größenangabe im DIV und im source-tag ändern könnte, der von Mediaelements standardmäßig übergeben wird.


    Langsam bin ich ratlos. Mittlerweile durchwühle ich so viele Foren, in der Hoffnung dass ein anderer auch das Problem hat.


    Aber wow Frank9652, ich danke dir für deine Mühe und den erbrachten Zeitaufwand für den vielen Text! Wenn ich wüsste ob du in meiner Nähe wohnst kann ich dich sofort auf nen Haferl Kaffee einladen. ;-)

    Fange doch erst einmal bei HTML an, denn wenn mir ein Validator erzählt, dass diese Tags nicht unterstützt werden, würde ich eventuell auf deren Benutzung verzichten.

    line 123 column 1 - Fehler: <video> is not recognized!
    line 123 column 116 - Fehler: <source> is not recognized!

    Hat zwar nichts mit der Darstellung der Videos zu tun, doch bei der Gelegenheit könntest Du auch gleich mal <div id="fb-root"></div> aus dem Header entfernen, weil das eigentlich nichts zwischen <head> und </head> verloren hat.

    Nun gibst Du ja 640 vor, eventuell solltest Du da auf Prozente umstellen und Videos könntest Du auch allein verwalten oder über ein anderes Plugin.

    Zitat

    [COLOR=#333333]Fange doch erst einmal bei HTML an, denn wenn mir ein Validator erzählt, dass diese Tags nicht unterstützt werden, würde ich eventuell auf deren Benutzung verzichten.[/COLOR]

    [COLOR=#333333]line 123 column 1 - Fehler: <video> is not recognized![/COLOR]
    [COLOR=#333333]line 123 column 116 - Fehler: <source> is not recognized![/COLOR]

    Anscheinend wird das trotzdem interpretiert? Sonst würde der Videoplayer nicht angezeigt werden?! Ich stell mir nur grad die Frage. Komischerweise meckert der Validator bei "kwirandt.de" nicht bei dem video-Tag. Ich hab beobachtet: Wenn ein Shortcode mit [video] ausgeführt wird, integriert WP gleich die nötigen Dateien wie: mediaelement-and-player.min.js?ver=2.13.0 und die wp-mediaelement.js?ver=3.6.1.

    Zitat

    [COLOR=#333333]Nun gibst Du ja 640 vor, eventuell solltest Du da auf Prozente umstellen und Videos könntest Du auch allein verwalten oder über ein anderes Plugin.[/COLOR]

    Nein, ich geb ihm die 640 nicht vor. Ich gebe ihm die 940px Breite vor, die er mir aber nicht übernimmt.
    Und wenn ich den Wert als Prozent angebe, dann ignoriert er das Prozent-Zeichen und meint es wären 100px.
    Anscheinend geht der Player nicht über die 640px Breite drüber, wie schon gesagt.

    Zitat

    [COLOR=#333333]Hat zwar nichts mit der Darstellung der Videos zu tun, doch bei der Gelegenheit könntest Du auch gleich mal <div id="fb-root"></div> aus dem Header entfernen, weil das eigentlich nichts zwischen <head> und </head> verloren hat.[/COLOR]


    Danke für die Information. Das war Copy&Paste als ich bei FB-Developers den Code mitgehen lassen hab. Und da stand lustigerweise das div fb-root obendrüber, hat mich komischerweise irgendwann nicht mehr gekümmert. Danke ;-)

    Einmal editiert, zuletzt von kongreddgrass (5. Oktober 2013 um 21:12)

    Im einfachsten Fall brauchst Du dafür nicht viel. Werfe mal alle Attribute mit Angaben für die Weite und Breite hinaus, auch was übergeordnet ist und stören könnte und dann nicht mehr als (mit den richtigen Tags zum Einbinden):

    HTML
    <div id="ID_vom_DIV_ueber_Video">
    Und hier das Video mit der id="ID_vom_Video"
</div>

    Darunter:

    Code
    <script type="text/javascript">
window.onload = function() {


    var nehme_weite = document.getElementById("ID_vom_DIV_ueber_Video").offsetWidth;
    document.getElementById("ID_vom_Video_Tag").style.width  = nehme_weite;
    document.getElementById("ID_vom_Video_Tag").style.height = (nehme_weite / 16) * 9;
}
</script>


    Misst die Weite des zur Verfügung stehenden Platzes aus und teilt diese dem Video als Style-Angaben zu.

    Dass die Tags bemängelt werden, das könnte auch daran liegen, dass die Seite noch keine HTML5 Seite ist und die Einbindung vorher noch etwas anders aussah. Den Browsern ist das zwar weitestgehend gleich, doch die Validatoren meckern dann halt.

    Die ID muss denke ich der Video-Tag erhalten, nicht Source, nachdem was ich bisher sah, doch das lässt sich ja testen.

    Einmal editiert, zuletzt von Melewo (5. Oktober 2013 um 23:48)

    Danke für den JS-Code. Damit habe ich es auch versucht, das klappte allerdings nicht. Das liegt einfach am Mediaelements und dem automatisch hinzugefügten DIV ohne einer Klasse oder ID. Nachdem ich mir dachte, wenn ich das Problem mit der Breite nicht hinbekomme, dann versuche ich es wenigestens anders. Dann fiel mir noch dein "Tipp" ein:

    Zitat

    [COLOR=#333333]Nun gibst Du ja 640 vor, eventuell solltest Du da auf Prozente umstellen und Videos könntest Du auch allein verwalten oder über ein anderes Plugin.[/COLOR]

    Da ich aber nicht so der Freund von Plugins bin (auch wenn relativ "viele" Plugins aktiv sind), versuche ich die Anzahl der Plugins niedrig zu halten oder gleich hardzucoden.

    Jedensfalls ging ich auf http://dev.w3.org/html5/spec-pre…e-video-element

    Und dort fand ich die Lösung, eine sehr simple Lösung:

    ich muss sagen, dieser Player ist wirklich pflegeleicht und mit diesem Player gibt es auf dem Smartphone auch keine Probleme mit der Control-Leiste. Vergleich: Mediaelements hat nach dem Lautstärken und dem Fullscreen-Symbol einen Zeilenumbruch gemacht.

    Da lerne und SEHE ich immer wieder, dass es einfachere Alternativen gibt, Videos und auch andere Sachen einzubinden, statt mich an einer Sache aufzuarbeiten ;-)

    Trotzdem vielen Dank euch ;)

    Einmal editiert, zuletzt von kongreddgrass (6. Oktober 2013 um 14:35)

    Hallo nochmal!

    Dass Videos größer als 640 Pixel nicht größer angezeigt werden, liegt nicht an mediaelements.
    Sondern das liegt am Theme.
    Bei mir (Theme Twenty Ten) wird die äußere Breite durch das Theme festgelegt.
    Während die verschiedenen Seitenvorlagen IMHO eine fixe Breite von ca. 800 Pixeln haben.
    Darüberhinaus geht bei mir auch nichts.
    Die verschiedenen Seitenvorlagen hatte ich mir mal von dem Typ anlegen lassen, der mir die Grundkonfiguration gemacht hatte.
    Ich denke, es würde möglich sein, eine Seitenvorlage anzulegen, die breiter ist, und dass dann auch deine Videos breiter angezeigt werden.
    - Aber wie man das praktisch macht, weiß ich nicht (ich kenn nur die Theorie) und ist ganz sicher auch vom verwendeten Theme abhängig.
    Ich denke, du solltest dich schlau machen, was für eine fixe Breite deine Seiten verwenden, und evtl. dir eine neue Templateseite erstellen (lassen).

    Gruß Frank

    Einmal editiert, zuletzt von Frank9652 (7. Oktober 2013 um 16:03)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden