26

HTML5オーディオタグを実装する音楽プレーヤーWebアプリケーションを構築していますが、ブラウザー間で一貫性があるように見せたいのですが、独自のカスタムCSSを定義することは可能ですか？そしてどうやって？

4

5 に答える 5

33

現在、<audio>CSSを使用してHTML5プレーヤーのスタイルを設定する方法はありません。代わりに、control属性を省略して、Javascriptを使用して独自のコントロールを実装できます。それらすべてを自分で実装したくない場合は、jPlayerなどの既存のテーマ可能なHTML5オーディオプレーヤーを使用することをお勧めします。

于 2010-09-25T17:14:03.743 に答える
21

ボックスシャドウ、ボーダー半径、トランジションがボグ標準のオーディオタグプレーヤーで非常にうまく機能することを偶然に発見しました（当時は画像を使用していました）。私はこれをChrome、FF、Operaで動作させています。

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

と：-

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

私はあなたにそれを「少しだけタルトにする」ことを認めますが、それは彼らにすでにそこにあるものよりもエキサイティングな光景を作ります、そしてJSで大騒ぎすることはありません。

残念ながら、IEでは使用できません（まだトランジションビットをサポートしていません）が、うまく機能が低下しているようです。

于 2013-02-25T12:07:36.547 に答える
2

いくつかのあいまいなcssセレクターを使用してオーディオ要素のスタイルを設定できます。ここにそれらのいくつかがあります。

audio::-webkit-media-controls-enclosure {
    background-color: #c6c6ec;
}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
audio::-webkit-media-controls-volume-slider-container {}
audio::-webkit-media-controls-volume-slider {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {}

これらの完全なリストは見つかりませんでしたが、これが最も近いものです。

于 2021-08-19T07:46:34.850 に答える
1

他の回答で言及されているボックスシャドウ、変換、および境界線のオプションに加えて、WebKitブラウザーは現在、-webkit-text-fill-colorに従って「経過時間」の数値の色を設定しますが、背景を設定する方法がないためです。 （プラットフォームによって異なる場合があります。たとえば、一部のオペレーティングシステムの反転ハイコントラストモード）、他の場所やオーディオ要素で使用した場合は、-webkit-text-fill-colorを値「initial」に設定することをお勧めします。はこれを継承しています。そうしないと、一部のユーザーがこれらの番号を読み取れない場合があります。

于 2017-12-20T13:28:11.890 に答える
0

オーディオタグにはCSSオプションがあります。

いいね：html5オーディオタグ幅

しかし、それをいじってみると、予想外の結果になる可能性があります-2012年8月現在。

于 2012-08-01T03:58:39.993 に答える