¿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.
The values "true" and "false" are not allowed on boolean attributes
. hablar de confuso.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>
fuente
video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }
Una solución simple es simplemente ignorar las interacciones del usuario :-)
video { pointer-events: none; }
fuente
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; }
fuente
Este método funcionó en mi caso.
video=getElementsByTagName('video'); function removeControls(video){ video.removeAttribute('controls'); } window.onload=removeControls(video);
fuente
<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>
fuente
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); }
fuente