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