mediaelement.js changeSkin

Auch wenn es nicht viel Dokumentation zu diesem Thema gibt, weiß ich, dass Sie in mediaelement.js die Skin des Audioplayers ändern oder das CSS ändern können, um Ihre eigene Skin zu erstellen. Ich stoße auf ein Problem, bei dem ich nicht die standardmäßige mediaelement.js-Skin bekomme, um den Browser-Player zu ersetzen, daher kann ich das Standard-CSS nicht nach meinen Styling-Bedürfnissen ändern. Und wenn ich versuche, die player.changeSkin() -Methode zu verwenden, die mediaelement.js auf ihrer Site verwendet, hält sie das Programm an. Ich schließe das Skin-CSS sowie die anderen erforderlichen mediaelement.js-Dateien zumindest nach meinem besten Wissen ein, und sie funktionieren gut, bis ich versuche, die Skin zu ändern. Ich verwende diesen Code, um Audio zu streamen, und Sie können eine funktionierende Version (letzte funktionierende Übertragung, bevor Sie versuchen, den Player zu skinen) unter http://escapetodenton.com/radio/compact-player.html finden. Aus irgendeinem Grund wird der Player selbst in meiner Version von Firefox gar nicht gerendert, also wenn du Chrome hast oder ie wirst du eine bessere Vorstellung davon bekommen, was ich versuche zu tun.mediaelement.js changeSkin

Importierte Dateien im Header:

<script src="build/jquery.js"></script> 
<script src="build/mediaelement-and-player.min.js"></script> 
<link rel="stylesheet" href="build/mediaelementplayer.css" /> 
<link rel="stylesheet" href="build/mejs-skins.css" /> 
<script language="javascript" type="text/javascript"src="http://premiumca5.listen2myradio.com/system/streaminfo.js"></script> 
<link rel="stylesheet" href="compact-player.css" />

Spieler Instanziierung und Start:

var player = new MediaElement('player', { 
pluginPath: '/build/', 
features: ['playpause','progress','current','duration','volume'], 
audioWidth: 400, 
enableAutosize: false, 
iPadUseNativeControls: true, 
iPhoneUseNativeControls: true, 
AndroidUseNativeControls: true, 
success: function(player, node) { 
player.changeSkin('mejs-ted'); 
player.play(); 
} 
});

Da ich alle Unterlagen nicht finden kann ich auf dem changeSkin() -Methode verwenden es nur in der So wie mediaelement.js es in ihrem Code für ihre Homepage hat. Jede Hilfe oder Gedanken würden geschätzt werden.

Quelle

2013-02-13 jdbosley

ich vor einiger Zeit mit mediaelement.js eine Weile verbracht. Soweit ich mich erinnere, habe ich das ganze CSS gefunden und einfach festgehalten, was es war und es gestylt. Die Probleme, denen ich begegnete, waren die Tatsache, dass es einen Flash-Fall gibt. (Was in der Theorie großartig ist) Also musst du das auch wirklich thematisieren. Es kann nicht wirklich reagieren. Ich habe versucht, einige Ajax-Playlist-Funktionen zu erstellen, aber der Flash-Fall war so ein Problem, dass ich die ganze Sache aufgegeben habe. Ich erinnere mich, dass es 3 oder 4 "Skins" gab. Diese könnten Aufschluss darüber geben, welche CSS Sie schreiben müssen. – sheriffderek

Ich war endlich in der Lage, genug von der Standard-Skin zu ändern, um den Client zufrieden zu stellen und es ziemlich nahtlos auf allen gängigen Browsern rendern zu lassen (zurück auf durchgehend schwarz, kein Farbverlauf bei älteren Versionen von ie) Das funktioniert sowohl in hmtl5-Versionen als auch im Flash-Fallback.Wenn Sie diese Implementierung sehen möchten, teile ich Ihnen gerne meinen Code mit. Es hat definitiv einige Zeit gedauert, bis es wieder funktioniert hat. Danke für die Antwort. – jdbosley

Erstellen Sie eine JSfiddle-Version Ihres Codes und vielleicht können wir damit ein wenig spielen. –

Was Sie tun müssen, ist class="mejs-ted" auf Ihrem Video-Element hinzufügen. Die Funktion changeSkin() wird für den dynamischen Austausch von Skins verwendet. Dh: Sie möchten mehrere Skins bereitstellen, zwischen denen ein Benutzer wechseln kann.

So sollten Sie Ihre Video-Tag Ihrer Klasse haben sie hinzugefügt, und wird wie folgt aussehen:

<!-- replace mejs-ted with mejs-yourclass --> 
<video class="mejs-ted" ...> 
    <source type="video/mp4" src="...."> 
    <source type="video/ogg" src="...."> 
    <!-- etc.. --> 
</video>

Mediaprüft automatisch für das Klassenattribut auf dem Videoelement und fügt diese Klasse in den Behälter Mutter So können alle DOM-Elemente durch Voranstellen mit .mejs-yourclass überschrieben werden

Wenn Sie nur die Standard-Skin-Einstellung ändern möchten, funktioniert die Klasse gut. Die mejs-skins.css enthält Beispiel-CSS für alle Stile, die Sie überschreiben müssen, um sie anders zu gestalten. Das einzige, was fehlt, ist die Stile für die bigplay Taste:

/* overlay bigplay */ 
.mejs-yourclass .mejs-overlay-button { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    margin: -50px 0 0 -50px; 
    background: url(bigplay.png) no-repeat; 
} 

.mejs-yourclass .mejs-overlay:hover .mejs-overlay-button { 
    background-position: 0 -100px; 
}

Sie werden Arbeitsbeispiele von git finden: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Quelle

2013-09-30 17:56:59