9

このテーマに関するドキュメントはあまりありませんが、mediaelement.js では、オーディオ プレーヤーのスキンを変更したり、CSS を変更して独自のスキンを作成したりできることを知っています。デフォルトの mediaelement.js スキンを取得してブラウザー プレーヤーを置き換えることさえできないという問題が発生しているため、スタイリングのニーズに合わせてデフォルトの CSS を変更できません。そして、mediaelement.js がサイトで使用する player.changeSkin() メソッドを使用しようとすると、プログラムが停止します。少なくとも私の知る限りでは、スキン CSS とその他の必要な mediaelement.js ファイルを含めており、スキンを変更しようとするまでプレーヤーは正常に動作します。私はこのコードを使用してオーディオをストリーミングしています。動作するバージョン (プレーヤーのスキンを試みる前の最後の動作中のアップロード) を次の場所で見つけることができます。http://escapetodenton.com/radio/compact-player.html . なんらかの理由で、私のバージョンの Firefox ではプレーヤー自体がまったくレンダリングされないため、クロムを使用している場合、または私が何をしようとしているのかをよりよく理解できます。

ヘッダーにインポートされたファイル:

<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 のホームページのコードにあるのと同じ方法で使用しています。どんな助けや考えもいただければ幸いです。

4

2 に答える 2

5

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

したがって、ビデオ タグにクラスが追加されている必要があり、次のようになります。

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

Mediaelement は video 要素の 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 の実際の例を見つけることができます: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

于 2013-09-30T17:56:59.630 に答える
4

この記事http://www.inserthtml.com/2013/03/custom-html5-video-player/ on InsertHTML があなたのケースに役立つかもしれません。

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

于 2013-03-27T08:33:54.547 に答える