<video>
要素にデフォルトで表示される大きな再生ボタンを非表示にします
出来ますか?
Appleがshadow-domを再び変更したようです。
再生ボタンコントロールを非表示にするには、次のCSSを使用する必要があります。
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
テストに便利なiOSデバイスはありませんが、おそらくこれを試してください。
video::-webkit-media-controls {
display:none !important;
}
Safari iOSのシャドウDOMを見ると、欲しいのは(中央の大きな再生ボタンのみを隠す)であることがわかります:
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
Ianからの答えは、テキストトラック(クローズドキャプション...)を含むすべてを隠します
ビデオソースファイルでは、単に変更することができます
controls= "false"
IOSのネイティブブラウザであるSafari CSSについては、このハッキングトリックを試すこともできます。
.custom-video-controls {
z-index: 2147483647;
}
HTML 5ビデオのコントロールの管理/非表示に関する詳細な議論へのリンクはこちらです
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
イアンの答えに基づいて
video::-webkit-media-controls {
opacity: 0;
}
これにより、すべてのコントロールが非表示になります。自動再生されないバックグラウンドビデオに適しています。
Webアプリの場合。 MacでもiOS 10.3 iPhone7およびSafari 10.1で動作します。前の貢献者へのThx。また、要素に「コントロール」属性がまったく含まれていないという問題もありました。
'<style type="text/css">'+
'*::-webkit-media-controls-panel {'+
' display: none!important;'+
' -webkit-appearance: none;'+
' }'+
/* Old shadow dom for play button */
'*::--webkit-media-controls-play-button {'+
'display: none!important;'+
'-webkit-appearance: none;'+
'}'+
/* New shadow dom for play button */
/* This one works */
'*::-webkit-media-controls-start-playback-button {'+
'display: none!important;'+
' -webkit-appearance: none;'+
'}'+
+'</style>'
今日@ 2017で iOS 10これは動作します:
.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
display: none !important;
}
これを試して:
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
video::-webkit-media-controls { display:none !important; }
IOSでは動作しませんでしたが、
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
完璧に働いた!
この回答 によると、GoogleではChromeのように大きな再生ボタンを非表示にできます。
video::-webkit-media-controls-overlay-play-button {
display: none;
}
IOSだけでなくAndroidでも非表示にする場合に便利です。
再生ボタンは削除できません。このビデオプレースホルダーは、ドキュメントに記載されているとおり、常に表示されます: iPhone Video PlaceHolder 。ただし、iPhoneを使用していることを検出し、ビデオタグの代わりにビデオへのリンクを含む画像を表示することもできます。
<a href="yourvideo.mp4"><img src="yourposter.png"/></a>
ビデオは、ビデオタグとしてプレーヤーで起動されます。