title: add or remove controls attribute from html5 <video> tag
body: <p>I am looking for a method to add the controls attribute to a video tag based upon the user agent string.   </p>
  
  <p>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.</p>
  
  <p>What is the best way to accomplish my goal?
  I've tried this with no luck:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    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("");
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>and here is my html5 video stuff</p>
  
  <pre><code>&lt;video id="myVideo" width="1170" height="324" preload="metadata" autoplay="true"&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    &lt;source src="movie.ogg" type="video/ogg"&gt;
    &lt;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" &gt;
      &lt;param name="movie" value="movie.swf"&gt;
      &lt;param name="quality" value="high"&gt;
      &lt;param name="play" value="true"&gt;
      &lt;param name="LOOP" value="false"&gt;
      &lt;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"&gt;
      &lt;/embed&gt;
    &lt;/object&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Any help would be appreciated!</p>