1. 首頁
  2. 問答
  3. mediaelement.js changeSkin

mediaelement.js changeSkin

2013-02-13 48 views
9

即使它沒有太多的文檔可以找到關於這個主題我知道，在mediaelement.js你可以改變音頻播放器的皮膚或修改CSS來創建自己的皮膚。我遇到了一個問題，我甚至無法獲取默認的mediaelement.js皮膚來替換瀏覽器播放器，因此我無法修改默認的CSS來滿足我的樣式需求。當我嘗試使用mediaelement.js在其網站上使用的player.changeSkin（）方法時，它將暫停程序。我包括皮膚CSS以及其他必需的mediaelement.js文件，至少據我所知，他們的播放器工作正常，直到我嘗試更換皮膚。我使用此代碼來流式傳輸音頻，並且您可以在http://escapetodenton.com/radio/compact-player.html處找到工作版本（在嘗試蒙皮播放器之前進行上次工作上傳）。出於某種原因，玩家本身在我的firefox版本中現在還沒有完全呈現，所以如果你有Chrome或者你會更好地瞭解我正在嘗試做什麼。mediaelement.js changeSkin

在頭導入的文件：

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

播放器實例化和啓動：

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

因爲我無法找到在changeSkin（）方法中的任何文件，我只是用它在與mediaelement.js在其主頁的代碼中一樣。任何幫助或想法，將不勝感激。

來源

2013-02-13 jdbosley

+1

我剛纔花了一些時間與mediaelement.js。據我所知，我找到了所有的CSS，只是固定了它的內容和樣式。我碰到的問題是，它閃回的事實。 （這在理論上是很棒的）所以你也必須重新設定主題。它不能真正的響應。我試圖構建一些Ajax播放列表功能，但閃回退回是一個問題，我放棄了整個事情。我記得有三四個「皮膚」可用。這些可能會說明您需要編寫哪些CSS。 – sheriffderek 2013-02-28 00:59:57

+0

我終於能夠改變足夠的默認皮膚來取悅客戶端，並讓它在所有主流瀏覽器上都能夠無縫地渲染（回落到純黑色，在較舊版本的ie上沒有漸變）我使用Ajax來更改站點流這是在hmtl5版本和閃回後備工作。如果你想看到這個實現，我很樂意分享我的代碼。它肯定花了我一些時間才能使其工作始終如一。感謝您的迴應。 – jdbosley 2013-02-28 14:12:07

+0

創建jsfiddle版本的代碼，也許我們可以使用它一點點。 – 2013-03-01 11:16:31

回答

5

您需要做的是在您的視頻元素上添加class="mejs-ted"。 changeSkin（）函數是用於動態交換外觀的afaik。即：你想提供多個用戶可以切換的皮膚。

所以，你的視頻標籤應該有你的類添加到它，並會是這個樣子：

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

MediaElement的自動檢查視頻元素的類屬性，並添加類的父容器所以所有DOM元素都可以通過使用.mejs-yourclass前綴來覆蓋。如果您只是想更改默認外觀設置，則類可以正常工作。 mejs-skins.css爲所有需要重寫的樣式提供了示例CSS，以便對其進行不同的變換。唯一缺少的是對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; 
}

你會從混帳找到工作的例子：https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

來源

2013-09-30 17:56:59

相關問題

 相關問題