HTML5 video - show/hide controls programmatically HTML5 video - show/hide controls programmatically google-chrome google-chrome

HTML5 video - show/hide controls programmatically


<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>

See it working on jsFiddle: http://jsfiddle.net/dgLds/


Here's how to do it:

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

Working example:https://jsfiddle.net/otnfccgu/2/

See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp


CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.

In HTML,

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

with JS

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

In CSS,

#hideme {display: none;}