mediaelement.js changeSkin

Question

Anche se non ha molta documentazione posso trovare sull'argomento so che in mediaelement.js puoi cambiare la skin del lettore audio o modificare il CSS per creare la tua skin. Sto incontrando un problema in cui non riesco nemmeno a ottenere lo skin predefinito di mediaelement.js per sostituire il browser player, quindi non posso modificare il CSS predefinito per le mie esigenze di stile. E quando provo ad usare il metodo player.changeSkin() che mediaelement.js usa sul loro sito interrompe il programma. Sto includendo la skin CSS e gli altri file mediaelement.js richiesti, almeno per quanto ne so, e il loro lettore funziona bene finché non provo a cambiare la skin. Sto usando questo codice per lo streaming audio e puoi trovare una versione funzionante (ultimo caricamento funzionante prima di provare a rivestire il lettore) a http://escapetodenton.com/radio/compact-player.html. Per qualche ragione, il giocatore stesso non sta eseguendo il rendering proprio ora nella mia versione di firefox, quindi se hai Chrome o, cioè, avrai un'idea migliore di quello che sto cercando di fare.

file importati nell'intestazione:

<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" /> 

di istanza Player e di lancio:

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(); 
} 
}); 

Dal momento che non riesco a trovare alcuna documentazione sul metodo changeSkin() io sono solo di utilizzarla con la stesso modo che mediaelement.js ha nel loro codice per la loro home page. Qualsiasi aiuto o pensiero sarebbe apprezzato.

Answer 1

Quello che devi fare è aggiungere class="mejs-ted" sul tuo elemento video. La funzione changeSkin() è utilizzata per lo swapping dinamico delle skin. Ad esempio: si desidera fornire più skin tra cui un utente può passare.

Così il vostro tag video dovrebbe avere la classe aggiunto ad esso, e sarà simile a questo:

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

MediaElement controlla automaticamente l'attributo class sull'elemento video, e aggiunge che la classe al contenitore principale quindi tutti gli elementi DOM possono essere sovrascritti tramite il prefisso con .mejs-yourclass

Se si desidera solo modificare l'impostazione della skin predefinita, la classe funziona correttamente. Il mejs-skins.css ha un codice CSS di esempio per tutti gli stili che è necessario sovrascrivere per scurirlo in modo diverso. L'unica cosa che manca è la stili per il pulsante bigplay:

/* 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; 
} 

troverete esempi di lavoro da git: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Answer 2

Forse questo articolo http://www.inserthtml.com/2013/03/custom-html5-video-player/ su InsertHTML dovrebbe aiutarti con il tuo caso.

Si sta utilizzando mediaelement.js per progettare lettori video CSS3 personalizzati con HTML5 e JavaScript.