add or remove controls attribute from html5 <video> tag

Question

I am looking for a method to add the controls attribute to a video tag based upon the user agent string.

I do not wish to have the controls attribute present on any browser or device other than Ipad and Android. So i thought that user agent was the best way to identify because the words ipad and android are present in their respective UA header.

What is the best way to accomplish my goal? I've tried this with no luck:

<script type="text/javascript">
  var myVideo = document.getElementById("myVideo");
  var agent = navigator.userAgent.toLowerCase();
  var addAttr = (agent.indexOf('ipad')!=-1) || agent.indexOf('android')!=-1);
  if (addAttr) {
    myVideo.setAttribute("controls","controls");
  }
  else {
    document.write("");
  }
</script>

and here is my html5 video stuff

<video id="myVideo" width="1170" height="324" preload="metadata" autoplay="true">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
    width="1170" height="324" >
    <param name="movie" value="movie.swf">
    <param name="quality" value="high">
    <param name="play" value="true">
    <param name="LOOP" value="false">
    <embed src="movie.swf" width="1170" height="324" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" 
    type="application/x-shockwave-flash">
    </embed>
  </object>
</video>

Any help would be appreciated!

Answer 1

You can do it with jQuery:

//Add
$('#myVideo').prop("controls", true);



//Remove
$('#myVideo').prop("controls", false);

Answer 2

And without jQuery, surprisingly even shorter:

//Add
myVideo.controls = "controls";


//Remove
myVideo.controls = "";

• Based on that you already created a variable myVideo as you did:

  var myVideo = document.getElementById("myVideo");

Hope that helped :)