javascript - Hiding HTML5 Video Controls -

javascript - Hiding HTML5 Video Controls -

im trying implement show , hide video element button

here 2 buttons alongside play/pause/restart

<div class="rightcontent"> <p class="center">video command options</p> <p class="videocontrols"> <input type="button" value=" play " onclick="video.play()"/> </p> <p class="videocontrols"> <input type="button" value=" pause " onclick="video.pause();" /> </p> <p class="videocontrols"> <input type="button" value=" restart " onclick="video.currenttime =0;"/> </p> <p class="videocontrols"> <input type="button" value=" show controls " onclick="show()"/> </p> <p class="videocontrols"> <input type="button" value=" hide controls " /> </p> </div>

my javascript function effort hide controls currently:

function hide(){ videocontrols.setattribute = ('style', 'display:none;') }

however, not work.

your code sample incomplete, think happening: trying phone call setattribute on nodelist, not method of nodelist.

// node list, not single node! var videocontrols = document.queryselectorall(".videocontrols"); // convert nodelist array var vcarray = array.prototype.slice.call(videocontrols); // iterate on controls , hide each one. vcarray.foreach(function(control){ control.style.display = "none"; });

javascript css html5 video