24

HTML5 のビデオ タグからのビデオなど、ブラウザ ネイティブ ビデオのコントロールをクロスブラウザ スタイルにすることは可能ですか?

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

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

デフォルトのプレーヤー コントロール

上の画像の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>
4

5 に答える 5

22

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

HTML5 マルチメディア コンポーネントの操作 – パート 3: カスタム コントロールを見て、これを行う方法を示します。

于 2013-01-06T17:47:46.720 に答える
6

ネイティブ プレーヤー コントロールのスタイリングの良い例を次に示します (Chrome でテスト済み): https://codepen.io/BainjaminLafalize/pen/GiJwn

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

video::-webkit-media-controls-panel {
  width: 40px;
}
于 2017-08-02T07:35:42.210 に答える
3

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

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

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

于 2016-09-23T23:29:17.340 に答える
1

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

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

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

于 2019-05-27T12:40:27.543 に答える