Geek Answers Handbook

Add or remove control attribute from html5 <video> tag

I am looking for a way to add a control attribute to a video tag based on a user agent string.

I do not want the control attribute to be present in any browser or device other than iPad and Android. Therefore, I thought the user agent was best identified because the words ipad and android are present in the corresponding UA header.

What is the best way to achieve my goal? I 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 footage

 <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!

+4
source share
2 answers

You can do this with jQuery:

 //Add $('#myVideo').prop("controls", true); //Remove $('#myVideo').prop("controls", false);
+4
source

And without jQuery, surprisingly even shorter:

 //Add myVideo.controls = "controls"; //Remove myVideo.controls = "";

  • Based on this, you have already created the myVideo variable, just like you:

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

Hope this helps :)

+2
source

More articles:


All Articles