video HTML5 - mostrar/ocultar controles programáticamente

Question

Estoy buscando una forma de mostrar u ocultar controles de video HTML5 a voluntad a través de javascript. Los controles actualmente solo están visibles cuando el video comienza a reproducirse

¿Hay alguna manera de hacer esto con los controles de video nativos?

Estoy usando el navegador google chrome.

Answer 1

<video id="myvideo"> 
    <source src="path/to/movie.mp4" /> 
</video> 

<p onclick="toggleControls();">Toggle</p> 

<script> 
var video = document.getElementById("myvideo"); 

function toggleControls() { 
    if (video.hasAttribute("controls")) { 
    video.removeAttribute("controls") 
    } else { 
    video.setAttribute("controls","controls") 
    } 
} 
</script> 

ver su funcionamiento en jsFiddle: http://jsfiddle.net/dgLds/

Answer 2

CARL LANGE también mostró cómo conseguir oculto, reproducción automática de audio en HTML5 en un dispositivo iOS. Funciona para mi.

En HTML,

<div id="hideme"> 
    <audio id="audioTag" controls> 
     <source src="/path/to/audio.mp3"> 
    </audio> 
</div> 

con JS

<script type="text/javascript"> 
window.onload = function() { 
    var audioEl = document.getElementById("audioTag"); 
    audioEl.load(); 
    audioEl.play(); 
}; 
</script> 

En CSS,

#hideme {display: none;} 

Answer 3

Así es como se hace:

var myVideo = document.getElementById("my-video")  
myVideo.controls = false; 

Ejemplo de trabajo: https://jsfiddle.net/otnfccgu/2/

Ver todas las propiedades disponibles, métodos y eventos aquí: https://www.w3schools.com/TAGs/ref_av_dom.asp