Video HTML5 // Ocultar controles por completo

84

¿Cómo puedo ocultar completamente los controles de video HTML5?

<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

falso no funcionó, ¿cómo se hace esto?

Salud.

html video

— Terry Hall
fuente

185

Me gusta esto:

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controlses un atributo booleano :

Nota: Los valores "verdadero" y "falso" no están permitidos en los atributos booleanos. Para representar un valor falso, el atributo debe omitirse por completo.

— Robertc
fuente

Así que técnicamente esto funciona; y supongo que es la respuesta. Aunque; la eliminación de 'Controles' dentro del marcado de video HTML5, mata el video en iPad; entonces necesito otra solución.

— Terry Hall

1

@ 1977 Esta pregunta es probablemente relevante

— robertc

3

Puede intentar cargar la etiqueta, incluido el atributo de control, y eliminarla después de cargar la página con algo de javascript: var video = document.getElementById ('myvideo'); video.control = falso;

— user3072843

44

The values "true" and "false" are not allowed on boolean attributes. hablar de confuso.

— totalmenteNotLizards

@jammypeach Los atributos son booleanos porque tienen dos estados: existen o no existen

— robertc

44

Puede ocultar los controles usando CSS Pseudo Selectores como Demo: https://jsfiddle.net/g1rsasa3

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

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

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Expandir fragmento

— AbidCharlotte49er
fuente

Esto funciona muy bien para Chrome pero no para Firefox. ¿Tiene una solución para varios navegadores?

— TinyTiger

Necesito eliminarlos con CSS o JavaScript porque estoy pirateando algo juntos y no puedo editar directamente el código de la etiqueta del video

— TinyTiger

Hola Benny de Mozilla. Necesita agregar css con prefijo de proveedor para todos ellos como "-moz-media-controls-play-button". Gracias

— AbidCharlotte49er

1

Intenté agregar los prefijos pero no funcionó. Aquí hay un JSfiddle actualizado y aquí está el CSS que utilicé

video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls {   display: none !important; }

— TinyTiger

Benny, he comprobado en el documento de Mozilla que el pseudo CSS con prefijo del proveedor no está disponible. Puede manejar esto a través de JavaScript. Consulte mi fragmento de código. encima . He editado mi solución original. "Para Firefox tenemos que manejarlo en JavaScript" Gracias Buena suerte

— AbidCharlotte49er

35

Una solución simple es simplemente ignorar las interacciones del usuario :-)

video {
  pointer-events: none;
}

— Jakob E
fuente

4

Esto funciona excepto que los controles se muestran en la carga inicial.

— m4n0

7

En primer lugar, elimine el atributo "controles" del video.
Para iOS, podríamos ocultar el botón de reproducción de compilación del video agregando el siguiente pseudo selector de CSS:

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

— Alan
fuente

3

Este método funcionó en mi caso.

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);

— Richy Zuo
fuente

1

<video width="320" height="240" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

— fahimeh ahmadi
fuente

Estoy de acuerdo. La solución más sencilla es no poner nunca el atributo desde el principio.

— PRMan

0

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);


function initialiseMediaPlayer() {

    mediaPlayer = document.getElementById('media-video');

    mediaPlayer.controls = false;

    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
        else changeButtonType(muteBtn, 'mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

— usuario6884687
fuente

<! - hacer del texto completo <script src = 'media-player.js'> </script> y ponerlo en el mismo directorio ->

— user6884687