web-dev-qa-db-ja.com

HTML5でビデオタグの全画面ボタンを非表示にする方法

HTML5で動画タグの全画面ボタンを非表示にする必要があります。それを達成する方法はありますか？

Full screen button

ありがとう。

html5fullscreenhtml5-video
19
Arun

#document fragmentsのc​​ssを変更することでこれを達成できると思います。これらはDOM1仕様であり、すべてのブラウザーでサポートされていますが、スタイリングについてはわかりません。

シンプルなwebkitブラウザー（Windows上のクロム）固有のソリューション

次のソリューションはwebkit固有です

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

これがフィドルです .

警告：

  1. これは、webkit以外のレンダリングエンジンを搭載したブラウザでは機能しません。 FirefoxまたはInternet Explorer、または古いバージョンのOperaはBlink/Prestoでした。
  2. これは、Windows以外のオペレーティングシステムのwebkitブラウザーの実装では機能しない場合があります。 macOS上のSafari。

更新：

複数の読者が、前述のソリューションが特定のブラウザーでは機能しないと苦情を言った後、私は答えを更新しています。

ベンダー固有の実装の面倒を見る：

  • 上記のソリューションはブラウザ固有の-webkit-であり、WindowsでChromeでテストされました。
  • シャドウDOMの実装は標準化されていないため、ブラウザベンダーごとに異なる場合があります。
  • 現在、ほとんどすべてのブラウザには優れた開発者ツールがありますが、一部の機能は意図的にロックされていますが、たとえばFirefoxではほとんどの設定をabout:configページで開くことができます。
  • 開発者は、ブラウザでシャドウDOM機能のロックを解除することをお勧めします。
  • 次に、<video>コンポーネントを検査できます

ChromeでシャドウDOM選択を有効にする方法

  • Chrome>開発者ツール>設定（歯車アイコン）に移動します
  • Elementsの下でユーザーエージェントシャドウDOMオプションを表示
  • ボックスをチェック（選択）します
  • 基になるシャドウDOMを検査できます。
  • それぞれのスタイリングを観察する
  • 疑似クラスセレクターに似ていることがわかります。

Hiding the full screen button of the video tag in HTML5に関する未承諾の無料アドバイス

  • 解決策を見つけることは、疑似クラスセレクターを使用してCSSを書くのと同じくらい簡単です。
  • しかし、他のすべてのCSSと同様に、多くの試行錯誤が必要になる場合があります
  • そして、あなたはそれを機能させるために多くの欲求不満を経験するかもしれません
  • しかし、常に価値があることを忘れないでください。

さらに、@ paulittoが示唆するように、<video>要素からcontrols属性を削除した後にDOMメソッドを実装できます。詳細については このチュートリアル を参照してください。

39
DDM

あなたはあなたのCSSでこのコードを書くだけです：

video::-webkit-media-controls-fullscreen-button {
    display: none;
}

フルスクリーンボタンは非表示になります

4
GrazZ

すべてのコントロールを非表示にしなければ、それを行うことはできないと思います。 domメソッド を使用して独自のコントロールを実装し、ビルトインコントロールとまったく同じように設計できます。

または、外部html5ビデオプラグインを使用してこれを実装することもできます

2
paulitto

コントロール用のカスタムコードを書くことができます

例えば。ビデオ時間を変更するには、以下のコードを使用します

document.getElementsByTagName('video')[0].currentTime=10;

以下のリンクは、javascriptを使用してビデオの手動制御を行うために必要なすべての例を示しています

HTML5ビデオイベントとAPI

0
mujaffars