mediaelement.js changeSkin

Question

Mediaelement.js dosyasında, ses oynatıcısının cildini değiştirebileceğini veya CSS'yi kendi cildinizi oluşturmak için değiştirebileceğini biliyorum. Tarayıcı medyayı değiştirmek için varsayılan mediaelement.js cildini bile bulamadığım bir sorunla karşılaşıyorum, bu yüzden varsayılan CSS'yi şekillendirme ihtiyaçlarına göre değiştiremiyorum. Ve mediaelement.js sitesinin kullandığı player.changeSkin() yöntemini kullanmaya çalıştığımda, programı durdurur. CSS yanı sıra diğer gerekli mediaelement.js dosyalarını en azından bilgimin en iyisine ekliyorum ve onlar cildi değiştirmeye çalışana kadar iyi çalışıyorlar. Ses akışı için bu kodu kullanıyorum ve http://escapetodenton.com/radio/compact-player.html adresinde çalışan bir sürümü (oynatıcıyı çalmaya çalışmadan önce en son çalışan yükleme) bulabilirsiniz. Herhangi bir sebepten dolayı, oyuncunun kendisi şu anda firefox'umun versiyonunda işlem görmüyor. Bu yüzden eğer kromunuz varsa ya da yapmaya çalıştığım şey hakkında daha iyi bir fikre sahip olacaksınız. başlığında

İthal dosyalar:

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

Oyuncu örnekleme ve başlatma:

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

Ben changeSkin() yöntemine herhangi bir belge beri ben sadece bunu kullanıyorum mediaelement.js, kendi ana sayfalarında kendi kodlarında olduğu gibi. Herhangi bir yardım veya düşünce takdir edilecektir.

Answer 1

Yapmanız gereken şey, video öğenize class="mejs-ted" eklemektir. ChangeSkin() işlevi, dinamik olarak derileri değiştirmek için kullanılan afaiktir. Yani: Bir kullanıcının arasında geçiş yapabileceği birden fazla kaplama sağlamak istersiniz.

Yani video etiketi sınıf buna ekledik gerektiğini ve bu gibi bir şey olacaktır:

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

MediaElement otomatik video öğesindeki sınıf niteliği için denetler ve üst kapsayıcı için o sınıfı ekler Bu nedenle tüm DOM öğeleri önekleme yoluyla .mejs-yourclass

ile geçersiz kılınabilir. Varsayılan cilt ayarını değiştirmek isterseniz, sınıf iyi çalışır. Mejs-skins.css, farklı şekilde ciltlemek için geçersiz kılmanız gereken tüm stiller için örnek CSS'ye sahiptir. Eksik olan tek şey bigplay düğmesi için stilleri geçerli:

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

Sen git den çalışan örneklerini bulacaksınız: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Answer 2

Bu makalede, InsertHTML'deki http://www.inserthtml.com/2013/03/custom-html5-video-player/ numaralı makalede size yardımcı olması gerekir.

HTML5 ve JavaScript ile özel CSS3 video oynatıcılar tasarlamak için mediaelement.js'yi kullanıyor.