CODEWITHSUNDEEP
javascriptjqueryattributeshtml5-video
Jared James Wolf
Jared James Wolf

Reputation: 41

add or remove controls attribute from html5 <video> tag

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!

Upvotes: 4

Views: 13145

Answers (3)

somesh chakele
somesh chakele

Reputation: 11

You can also add controls attribute like this:

myVideo.controls = true;

Upvotes: 1

Avi
Avi

Reputation: 121

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 :)

Upvotes: 9

nach
nach

Reputation: 369

You can do it with jQuery:

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



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

Upvotes: 4

Related Questions