HTML5 video - show hide controls programmatically

Question

I am looking for a way to show or hide HTML5 video controls at will via javascript  The controls are currently only visible when the video starts to play  Is there a way to do this with the native video controls   I m using google chrome browser

User · Answer

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

User · Answer

lt video id  myvideo  gt     lt source src  path to movie mp4    gt   lt  video gt    lt p onclick  toggleControls     gt Toggle lt  p gt    lt script gt  var video   document getElementById  myvideo     function toggleControls       if  video hasAttribute  controls           video removeAttribute  controls          else        video setAttribute  controls   controls             lt  script gt    See it working on jsFiddle  http   jsfiddle net dgLds

User · Answer

CARL LANGE also showed how to get hidden  autoplaying audio in html5 on a iOS device  Works for me   In HTML     lt div id  hideme  gt       lt audio id  audioTag  controls gt           lt source src   path to audio mp3  gt       lt  audio gt   lt  div gt    with JS   lt script type  text javascript  gt  window onload   function         var audioEl   document getElementById  audioTag        audioEl load        audioEl play        lt  script gt    In CSS    hideme  display  none

[javascript] HTML5 video - show/hide controls programmatically

Examples related to javascript

Examples related to google-chrome

Examples related to html5-video