Ocultar botón de reproducción de video HTML5 de iPhone

Quiero ocultar el botón de reproducción grande que aparece de forma predeterminada en el elemento

¿Es posible?

Parece que Apple ha cambiado el dom-sombra de nuevo.

Para ocultar el control del botón de reproducción debe usar el siguiente 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; } 

No tengo ningún dispositivo iOS a mano para probar, pero tal vez intente esto:

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

Una mirada al DOM sombreado en Safari iOS me dice que lo que quieres (ocultando solo el gran botón de reproducción central) es:

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

La respuesta de Ian oculta todo, incluidas las pistas de texto (subtítulos …)

En el archivo fuente de video, simplemente puede cambiar

 controls= "false" 

Para Safari CSS, que es el navegador nativo de iOS, también puedes probar este truco de hacky

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

Aquí hay un enlace a una discusión detallada sobre la administración / ocultación de controles en el video HTML 5

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

No puedes quitar el botón de reproducción. Este marcador de posición de video siempre aparece como dice el documento: iPhone Video PlaceHolder . Pero tal vez puedas detectar que estás en un iphone y mostrar una imagen con un enlace a tu video en lugar de la etiqueta de video.

  

El video se lanzará en un reproductor solo como una etiqueta de video.

Para webapps. También funciona iOS 10.3 iPhone7 y Safari 10.1 en Mac. Thx a colaboradores anteriores. También tuve el problema de que el elemento no contiene ningún atributo de “control”.

 '' 

Basado en la respuesta de Ian

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

Esto ocultará todos los controles. Bueno para videos de fondo que no se reproducirán automáticamente.

Hoy @ 2017 en iOS 10 esto funciona:

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

No funcionó para mí en iOS, pero

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

Funcionó perfecto!

Prueba esto:

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

¡Sí, usted puede hacer esto! El truco es “ocultar” los controles de video, al no agregar el atributo “controles” a su etiqueta de video. Luego permite que se agregue dinámicamente unos segundos después de que el video comience a reproducirse, agregando la propiedad “controls” a la etiqueta usando Javascript. Simplemente establezca el valor en “controles” y aparecerá dinámicamente en el DOM … como si hubiera agregado los controles al código HTML de su etiqueta de video. Ajuste el temporizador según sea necesario.

  Start the Video