HTML5で動画タグの全画面ボタンを非表示にする必要があります。それを達成する方法はありますか?
ありがとう。
#document fragments
のcssを変更することでこれを達成できると思います。これらは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 {}
警告:
webkit
以外のレンダリングエンジンを搭載したブラウザでは機能しません。 FirefoxまたはInternet Explorer、または古いバージョンのOperaはBlink/Prestoでした。webkit
ブラウザーの実装では機能しない場合があります。 macOS上のSafari。更新:
複数の読者が、前述のソリューションが特定のブラウザーでは機能しないと苦情を言った後、私は答えを更新しています。
-webkit-
であり、WindowsでChromeでテストされました。about:config
ページで開くことができます。<video>
コンポーネントを検査できますElements
の下でユーザーエージェントシャドウDOMオプションを表示Hiding the full screen button of the video tag in HTML5
に関する未承諾の無料アドバイスさらに、@ paulittoが示唆するように、<video>
要素からcontrols
属性を削除した後にDOMメソッドを実装できます。詳細については このチュートリアル を参照してください。
あなたはあなたのCSSでこのコードを書くだけです:
video::-webkit-media-controls-fullscreen-button {
display: none;
}
フルスクリーンボタンは非表示になります
すべてのコントロールを非表示にしなければ、それを行うことはできないと思います。 domメソッド を使用して独自のコントロールを実装し、ビルトインコントロールとまったく同じように設計できます。
または、外部html5ビデオプラグインを使用してこれを実装することもできます
コントロール用のカスタムコードを書くことができます
例えば。ビデオ時間を変更するには、以下のコードを使用します
document.getElementsByTagName('video')[0].currentTime=10;
以下のリンクは、javascriptを使用してビデオの手動制御を行うために必要なすべての例を示しています