web-dev-qa-db-ja.com

ブラウザ固有のビデオコントロールのスタイル設定

HTML5の動画タグからの動画など、ブラウザ固有の動画のコントロールをクロスブラウザスタイルにすることは可能ですか？

可能かどうかはわかりませんが、 この記事 以外は見つかりませんが、Javascriptを使用しているようです。

コントロールバーをビデオの幅に合わせたい。添付の画像からわかるように、コントロールバーはビデオの幅を超えています。

default player controls

上の画像のHTML

 <div class="video centered-content">
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
        <video width="63%" height="60%" id="video" class="video" controls>
            <source src="<?php echo base_static_url();?>media/video.mp4">
            <source src="<?php echo base_static_url();?>media/video.ogv">
            <source src="<?php echo base_static_url();?>media/video.webm">
        </video>
    </a>
</div>
csscross-browsercustom-controlshtml5-video
18
itsme

ブラウザーのデフォルトのコントロールセットのスタイルを設定することはできませんが、（JavaScript）Media APIを使用して独自のコントロールセットを作成することができます。もちろん、好きな方法でスタイルを設定できます。

HTML5マルチメディアコンポーネントの操作–パート3：カスタムコントロール をご覧ください。これにより、これを行う方法がわかります。

18
Ian Devlin

ネイティブプレーヤーコントロールのスタイリングの良い例です（Chromeでテスト済み）： https://codepen.io/BainjaminLafalize/pen/GiJwn

プレーヤーコントロールバーの幅を変更するには：

video::-webkit-media-controls-panel {
  width: 40px;
}
6
Kristian

シャドウDOMを使用して、一部のブラウザーでネイティブコントロールをスタイルできます。デバッグインスペクター設定でシャドウdomを有効にします。

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

HTML5ビデオコントロール-大きくしますか？

3
Ryan Weiss

シャドウDOMのスタイルを設定することはできますが、すべてのブラウザーを個別に確認する必要があり、ブラウザーの更新によってスタイルが破壊される可能性があります。

MediaElement.js をご覧になることをお勧めします。これにより、CSSを使用してスタイル設定でき、既にアクセシビリティが最適化されているクロスブラウザーコントロールが提供されます。

または、とにかくいくつかのコントロールのみが必要な場合は、独自のコントロールを作成します。 https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

1
Fabian von Ellerts

すべてのブラウザー（つまりFirefox）でコントロールのスタイルを設定することはできないため、カスタムコントロールを使用する方法があります。

独自の記述は可能ですが、時間がかかり、他のコントロールが持つ機能はありません。

Flowplayer をお勧めします。これは非常に使いやすく、スタイルも簡単です。また、ビデオのロード方法を制御できるなど、その他の便利な機能も備えています（AWS S3はファイルのビューごとに課金するため、非常に便利です）。

0
Zach Saucier