mediaelement.js - Video Scaling Optionen (z. B. 'fit' oder 'fill')

Question

Kennt jemand eine Möglichkeit, das Video innerhalb der der MEJS-Player zu skalieren, so dass der Spieler selbst jedes Letterboxing oder Columnboxing behandelt? Ähnlich wie JWPlayer die Optionen "Anpassen" und "Füllen" hat.

Im Wesentlichen habe ich einen Player, der in einem Wrapper lebt und ich Größe des Wrappers entsprechend der Bildschirmauflösung des Benutzers. Wie so:

<div id="video_dims_wrapper" style="width: 1280px; height: 720px;"> 
    <video id="video_player" width="1280" height="720" controls="controls" preload="none" autoplay="autoplay" style="width: 100%; height: 100%;">   

     <source type="video/mp4" src="my_video.mp4" /> 
     <source type="video/webm" src="my_video.webm" /> 

     //Flash fallback removed for brevity 

    </video> 
</div> 

Und dann nur die Größe ich das #video_dims_wrapper und das MEJS Element enthalten innerhalb dementsprechend ändert die Größe (aufgrund der Breite: 100%; height: 100%; Stil Erklärungen).

Dies funktioniert gut, wenn alle Videos das gleiche Seitenverhältnis haben (16: 9 in diesem Fall), aber wenn es ein Video mit einem anderen Seitenverhältnis gibt, wird die Größe nicht innerhalb des Players geändert sondern skaliert die Gesamtabmessungen des Spielers.

Was ich möchte, ist, dass das Spiel immer ein Seitenverhältnis von 16: 9 und das Video whitein Skalen in den Player und die Letterboxes oder columnboxes das Video je nach Bedarf passt.

Wer ist da reingerannt? Irgendwelche Lösungen?

Danke für jede Hilfe.

Answer 1

Ich habe versucht, das gleiche in einer Wordpress-Umgebung zu tun. Tut mir leid, dass ich das hier ausprobiert habe, aber ich habe ewig gebraucht. Aber während ich in den Quellcode von mediaelement.js schaute, fand ich diese Eigenschaft:

// Stellen Sie Dimensionen über JS statt CSS setDimensions: true; // (ist die Standardeigenschaft)

Ich habe es nur während init auf falsch geschaltet (so habe ich nicht die Quelldateien bearbeitet). Und machte das Styling mit CSS. Voila! Klappt wunderbar :). Kann einfach sagen, dass dieses funky Skript schlecht dokumentiert ist! Natürlich habe ich auf der Webseite des Verleihers nach solchen Immobilien gesucht und Stunden gegoogelt ... Aber das habe ich nirgendwo gefunden.

Hoffe ich kann jemandem dabei helfen;). Nur für die Suchmaschine, suchte ich nach diesen Tags: Wordpress Video Briefkasten Flash-Fallback einbetten mediaelement.js wp-mediaelement.js