Nascondi pulsante di riproduzione video HTML5 di iPhone

Voglio hide il grande pulsante di riproduzione che appare di default sull’elemento

È ansible?

Sembra che Apple abbia cambiato di nuovo la shadow-dom.

Per hide il controllo del pulsante di riproduzione devi utilizzare il seguente 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; } 

Non ho alcun dispositivo iOS a portata di mano per testare, ma forse prova questo:

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

Uno sguardo al DOM ombra in Safari iOS mi dice che quello che vuoi (nascondendo solo il grande pulsante di riproduzione centrale) è:

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

La risposta di Ian nasconde tutto, comprese le tracce di testo (sottotitoli …)

Nel file sorgente del video puoi semplicemente cambiare

 controls= "false" 

Per il CSS Safari, che è il browser nativo su iOS, puoi anche provare questo trucco hacky

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

Ecco un collegamento a una discussione di dettagli sulla gestione / occultamento dei controlli sui video HTML 5

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

Non è ansible rimuovere il pulsante di riproduzione. Questo segnaposto video appare sempre come dice il documento: iPhone Video PlaceHolder . Ma forse puoi scoprire che sei su un iphone e visualizzare un’immagine con un link al tuo video invece del tag video.

  

Il video verrà lanciato in un player proprio come un tag video.

Per le applicazioni web. Funziona anche su iOS 10.3 iPhone7 e Safari 10.1 su Mac. Grazie a collaboratori precedenti. Ho anche avuto il problema che l’elemento non contiene alcun attributo “controllo”.

 '' 

Basato sulla risposta di Ian

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

Questo nasconderà tutti i controlli. Ottimo per i video di sfondo che non verranno riprodotti automaticamente.

Oggi @ 2017 in iOS 10 funziona così:

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

Non ha funzionato per me su iOS, ma

 *::-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; } 

Perfetto!

Prova questo:

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

Si, puoi fare questo! Il trucco è “hide” i controlli video, non aggiungendo l’attributo “controlli” al tag video. Poi lo fai aggiungere dynamicmente alcuni secondi dopo l’inizio della riproduzione del video, aggiungendo la proprietà “controls” al tag usando Javascript. Basta impostare il valore su “controlli” e apparirà dynamicmente nel DOM … come se avessi aggiunto i controlli all’HTML del tuo tag video. Regola il timer secondo necessità.

  Start the Video