Necesito para ocultar el botón de pantalla completa de la etiqueta video de HTML5.
Hay alguna forma de conseguirlo ?

Cómo ocultar el botón de pantalla completa de la etiqueta de vídeo en HTML5

Gracias.

  • Actualmente la <video> etiqueta sólo admite la alternancia de los controles con ningún tipo de control sobre los atributos con el controls atributo. Lo más cercano que podía llegar a la desactivación de pantalla completa es deshabilitar controls y hacer su propio panel de control.
  • Es curioso que yo vea todos los otros controles si puedo agregar el atributo «controles», pero el botón de pantalla completa falta.. w3schools.com/html/tryit.asp?filename=tryhtml5_video
InformationsquelleAutor Arun | 2013-07-16

4 Comentarios

  1. 39

    Creo que esto se puede lograr cambiando el css para el #document fragments, estos son DOM1 especificaciones y soportado por todos los navegadores, pero sobre el estilo, no estoy seguro.

    Simple webkit navegador (chrome en windows) solución específica

    La siguiente solución es webkit específicos

    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 tienen un motor de renderizado de otros que webkit por ejemplo, Firefox o Internet Explorer, o versiones obsoletas de Ópera que había Parpadeo/Presto.
    2. Esto puede que no funcione con las implementaciones de webkit de los navegadores en otros sistemas Operativos, por ejemplo, Safari en mac os.

    Actualización:

    Después de varios lectores se quejaron de que la mencionada solución no funciona para ciertos navegadores, estoy actualizando la respuesta.

    Teniendo cuidado de Proveedor de implementaciones específicas:

    • La solución anterior es -webkit- específica del navegador y fue probado en Chrome en Windows.
    • La aplicación de la sombra DOM no ha sido estandarizado, y por lo tanto, puede variar de un navegador proveedor a otro.
    • Casi todos los navegadores de hoy en día tienen un gran desarrollador de herramientas, pero algunas características son intencionalmente bloqueado, pero se puede abrir con un poco de esfuerzo, por ejemplo, en Firefox la mayoría de estas configuraciones puede ser consultado en la about:config página.
    • Los desarrolladores se recomienda para desbloquear la sombra DOM características en su navegador.
    • Entonces, se puede inspeccionar el <video> componente

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

    • Ir a Chrome > Herramientas del Desarrollador > Configuración (icono de engranaje)
    • Bajo Elements buscar Mostrar agente de usuario sombra DOM opción
    • De verificación (seleccionar) en el cuadro de
    • Usted será capaz de inspeccionar el subyacente sombra DOM
    • Observar sus respectivos estilo
    • Te darás cuenta de que son similares a las pseudo selectores de clase

    Algunos no solicitados libre asesorar 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 pseudo selectores de clase
    • Pero como todos los otros CSS, es posible que requiera una gran cantidad de ensayo-n-error
    • Y usted podría someterse a un montón de frustración para hacer que funcione
    • Pero recuerde siempre, vale la pena.

    Además, como @paulitto sugiere, DOM métodos pueden aplicarse después de la eliminación de controls atributo de <video> elemento. Consulte este tutorial para más.

    • Estoy usando Android WebView, donde el botón de pantalla completa al parecer no funciona (probado en Android 4.2.2 y 4.4.2). No es crítico si los usuarios de esta aplicación en particular no puede hacer los videos a pantalla completa, así que pensé que debía encontrar una manera de desactivar el botón de pantalla completa. Este hizo el truco.
    • Estoy tratando de hacer la misma cosa, Nick. Atención a compartir su código?
    • ver [violín](jsfiddle.net/deveedutta/TFU4V/5/) & dime si no funciona
    • Gracias, yo la vi, pero no estaba seguro de donde la CSS debe ser insertado en la aplicación.
    • Estoy usando FF, y veo todavía ver el botón de pantalla completa de su Violín.
    • La solución fue una sugerencia para los navegadores webkit & Firefox no es uno. Uno necesita reemplazar todos los -webkit- prefijos con -moz para obtener resultados similares. También, la sombra DOM implementación varía de un navegador a navegador. Por lo tanto, inspeccionar antes de aplicar cualquier CSS.
    • este código funciona en chrome, pero necesito que funcione en firefox y safari, por favor alguien que me ayude
    • este no es un trabajo para mac-chrome,firefox y safari también.

  2. 4

    Usted necesita sólo para escribir este código en tu css:

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

    Y la fulscreen botón ocultar

    • esto no funciona con Firefox y el IE
    • Esto no funciona en firefox y safari
  3. 2

    Creo que no eres capaz de hacer eso sin ocultar todos los controles.
    Usted puede utilizar su métodos de dom para implementar sus propios controles y el diseño que se vean exactamente el mismo que construyó en los controles

    O también puede utilizar externo de vídeo html5 plugins para implementar esta

    • Buen enfoque. Vi un tutorial en este. Espero que ayude
  4. 0

    Usted puede escribir su código personalizado para los controles

    por ejemplo. Para cambiar de vídeo tiempo de uso a continuación el código

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

    Link de abajo provee todos los ejemplos que hacer controles manuales en vídeo con javascript

    Video de HTML5 y Eventos de la API

Dejar respuesta

Please enter your comment!
Please enter your name here