web-dev-qa-db-ja.com

iPhone HTML5ビデオ再生ボタンを非表示

<video>要素にデフォルトで表示される大きな再生ボタンを非表示にします

出来ますか？

iphonehtml5
56
ilyo

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;
}
64
Daemeron

テストに便利なiOSデバイスはありませんが、おそらくこれを試してください。

video::-webkit-media-controls {
    display:none !important;
}
106
Ian Devlin

Safari iOSのシャドウDOMを見ると、欲しいのは（中央の大きな再生ボタンのみを隠す）であることがわかります：

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

Ianからの答えは、テキストトラック（クローズドキャプション...）を含むすべてを隠します

56
Arnaud Leyder

ビデオソースファイルでは、単に変更することができます

controls= "false"

IOSのネイティブブラウザであるSafari CSSについては、このハッキングトリックを試すこともできます。

.custom-video-controls {
  z-index: 2147483647;
}

HTML 5ビデオのコントロールの管理/非表示に関する詳細な議論へのリンクはこちらです

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

9
user3283997

イアンの答えに基づいて

video::-webkit-media-controls {
    opacity: 0;
}

これにより、すべてのコントロールが非表示になります。自動再生されないバックグラウンドビデオに適しています。

2
Chloe

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>'
1
Zebra Pogo

今日@ 2017で iOS 10これは動作します：

.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}
1
BG Bruno

これを試して：

video {
    &::-webkit-media-controls {
        display:none !important;
    }

    &::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }
}
0
Arpit
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;
}

完璧に働いた！

0
William Pei Yuan

この回答 によると、GoogleではChromeのように大きな再生ボタンを非表示にできます。

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

IOSだけでなくAndroidでも非表示にする場合に便利です。

0
joeytwiddle

再生ボタンは削除できません。このビデオプレースホルダーは、ドキュメントに記載されているとおり、常に表示されます： iPhone Video PlaceHolder 。ただし、iPhoneを使用していることを検出し、ビデオタグの代わりにビデオへのリンクを含む画像を表示することもできます。

<a href="yourvideo.mp4"><img src="yourposter.png"/></a>

ビデオは、ビデオタグとしてプレーヤーで起動されます。

0
vincentp