that - html5 video youtube

Video HTML5// Ocultar completamente los controles

Question

¿Cómo podría 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?

Aclamaciones.

Answer 1

En primer lugar, elimine el atributo de "control" del video.
Para iOS, podríamos ocultar el botón de reproducción del video al agregar el siguiente selector de CSS:

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

Answer 2

Este método funcionó en mi caso.

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

Answer 3

Me gusta esto:

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

controls es 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.

Answer 4

Podrías ocultar controles usando CSS Seudo 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>

Answer 5

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

video {
pointer-events: none;
}

Answer 6

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);
}