あなたはcss
でhtml5
オーディオ/ビデオコントロールのスタイルを設定することができ、ここでの例です:
HTMLマークアップ
<div id="video-controls" class="controls" data-state="hidden">
<button id="playpause" type="button" data-state="play">Play/Pause</button>
<button id="stop" type="button" data-state="stop">Stop</button>
<div class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</div>
<button id="mute" type="button" data-state="mute">Mute/Unmute</button>
<button id="volinc" type="button" data-state="volup">Vol+</button>
<button id="voldec" type="button" data-state="voldown">Vol-</button>
<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>
基本的なスタイリング
HTMLビデオとそのコントロールがされていますすべてが要素内に含まれており、幅と高さが最大になっています(ビデオの寸法に基づいてページ内で使用される)と中心:
.controls {
width:100%;
height:8.0971659919028340080971659919028%; /* of figure's height */
position:relative;
}
audio {
background-color: #95B9C7;
/*etc...*/
}
SRC:
figure {
max-width:64rem;
width:100%;
max-height:30.875rem;
height:100%;
margin:1.25rem auto;
padding:1.051%;
background-color:#666;
}
ビデオが、それは正しい方法を設定されているように、容器自体はまた、いくつかのスタイリングを必要とする制御します
- https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics
- https://stackoverflow.com/a/33948255/797495
これは単なるデフォルトバージョンですが、プラグインを使用することもできますし、自分でデザインを変更することもできます。 –
IEの開発者はメトロアプリケーションの標準設定に従わなければならなかったようです。それは実際の質問ですか、それともあなたは本当にそれを変更するかを尋ねていますか? – Affe
@Affe、現実的に私はそれを変える方法を尋ねています。しかし、洞察力をありがとう、感謝します。 – JarrodOliver