mediaelement.js changeSkin

Question

私はmediaelement.jsでオーディオプレーヤのスキンを変更したり、独自のスキンを作成するようにCSSを変更することができます。私はデフォルトのmediaelement.jsスキンをブラウザプレーヤーに置き換えることができないので、デフォルトのCSSを自分のスタイルに合わせて変更することはできません。また、mediaelement.jsが自分のサイトで使用するplayer.changeSkin（）メソッドを使用しようとすると、プログラムが停止します。私は少なくとも私の知る限りでは、スキンCSSと他の必要なmediaelement.jsファイルを含めています。彼らは、スキンを変更しようとするまでうまく動作します。私はこのコードを使用してオーディオをストリーミングしています。http://escapetodenton.com/radio/compact-player.htmlに作業バージョン（プレイヤーをスキンする前に最後に作業していたアップロード）を見つけることができます。なんらかの理由で、プレーヤー自体が今Firefoxのバージョンでレンダリングされていないので、もしあなたがクロムを持っているなら、私は何をしようとしているのかをより良く知ることができます。私はちょうどそれを使用していますchangeSkin（）メソッド上の任意のドキュメントを見つけることができませんので

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

：

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

プレーヤーのインスタンス化と起動：ヘッダー内のファイルのインポート

mediaelement.jsが自分のホームページのコードに同じようにしています。どんな助けや考えもありがとう。

Answer 1

あなたがする必要があるのは、ビデオ要素にclass="mejs-ted"を追加することです。 changeSkin（）関数は、スキンを動的に交換するために使用されます。つまり、ユーザーが切り替えることができる複数のスキンを提供する必要があります。

だからあなたのvideoタグは、あなたのクラスは、それに追加している必要があり、このようになります。

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

のMediaElementは、自動的にビデオ要素のclass属性をチェックして、親コンテナにそのクラスを追加しますすべての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; 
} 

あなたはgitのからの作業例を見つけることができます：私はしばらく前にmediaelement.jsでいくつかの時間を費やしhttps://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Answer 2

多分、この記事http://www.inserthtml.com/2013/03/custom-html5-video-player/のInsertHTMLであなたのケースをお手伝いします。

mediaelement.jsを使用して、HTML5とJavaScriptを使用してカスタムCSS3ビデオプレーヤーをデザインしています。