html5 - que - reproducir video automaticamente html

Cómo ocultar el botón de pantalla completa de la etiqueta de video en HTML5

Question

Necesito ocultar el botón de pantalla completa de la etiqueta de video en HTML5. ¿Hay alguna manera de lograrlo?

Gracias.

Answer 1

Creo que no puedes hacer eso sin ocultar todos los controles. Puede utilizar sus métodos de dom para implementar sus propios controles y diseñarlos para que se vean exactamente igual que los controles integrados

O también puede usar complementos de video html5 externos para implementar esto

Answer 2

Creo que puedes lograr esto cambiando el css para los #document fragments , estas son las especificaciones de DOM1 y son compatibles con todos los navegadores, pero sobre el estilo, no estoy seguro.

Solución específica para el navegador webkit simple (Chrome en Windows)

La siguiente solución es webkit específica

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 {}

Aquí está el violín para ello.

Advertencia:

1. Esto no funcionará en los navegadores que tengan un motor de renderización distinto del webkit por ejemplo, Firefox o Internet Explorer, o versiones obsoletas de Opera que tenían Blink / Presto.
2. Es posible que esto no funcione con implementaciones de navegadores webkit en sistemas operativos que no sean Windows, por ejemplo, Safari en macOS.

Actualizar:

Después de que varios lectores se quejaran de que la solución mencionada anteriormente no funcionaba con ciertos navegadores, actualizo la respuesta.

Cuidando las implementaciones específicas del proveedor:

• La solución anterior es específica para el navegador web y se probó en Chrome en Windows.
• La implementación del DOM sombra no ha sido estandarizada, y por lo tanto, puede variar de un proveedor de navegador a otro.
• Hoy en día, casi todos los navegadores tienen excelentes herramientas de desarrollo, pero algunas funciones están bloqueadas intencionalmente, pero se pueden abrir con un poco de esfuerzo, por ejemplo, en Firefox se puede acceder a la mayoría de estas configuraciones en la página about:config .
• Se recomienda a los desarrolladores que desbloqueen las funciones de DOM de la sombra en su navegador.
• Luego, pueden inspeccionar el componente <video>

Cómo habilitar la selección de DOM de sombra en Chrome

• Vaya a Chrome> Herramientas de desarrollo> Configuración (icono de engranaje)
• En Elements busque la opción DOM de sombra del agente de usuario.
• Marque (seleccione) la casilla
• Podrás inspeccionar la sombra subyacente DOM
• Observe su respectivo estilo.
• Notarás que son similares a los selectores de pseudo clase

Algunos consejos gratuitos no solicitados para Hiding the full screen button of the video tag in HTML5

• Encontrar la solución puede ser tan fácil como escribir CSS con selectores de pseudo clase
• Pero como todos los demás CSS, puede requerir una gran cantidad de prueba-n-error
• Y podrías sufrir mucha frustración para hacer que funcione.
• Pero siempre recuerda, vale la pena.

Además, como sugiere @paulitto, los métodos DOM se pueden implementar después de eliminar los atributos de controls del elemento <video> . Consulte este tutorial para más.

Answer 3

Puedes escribir tu código personalizado para controles

p.ej. Para cambiar el tiempo de video use el código debajo

document.getElementsByTagName(''video'')[0].currentTime=10;

El siguiente enlace proporciona todos los ejemplos necesarios para realizar controles manuales en video con javascript

HTML5 Video Events y API

Answer 4

Solo necesitas escribir este código en tu css:

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

Y el botón de pantalla se ocultará.