在 html5 <video> 标签中添加或删除控件属性答案

【问题标题】：add or remove controls attribute from html5 <video> tag在 html5 <video> 标签中添加或删除控件属性
【发布时间】：2013-04-24 13:58:31
【问题描述】：

我正在寻找一种基于用户代理字符串将控件属性添加到视频标签的方法。

我不希望在除 Ipad 和 Android 之外的任何浏览器或设备上显示控件属性。所以我认为用户代理是最好的识别方式，因为 ipad 和 android 这两个词出现在它们各自的 UA 标头中。

实现我的目标的最佳方式是什么？我试过这个没有运气：

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

这是我的 html5 视频资料

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery attributes html5-video

【解决方案1】：

如果没有 jQuery，甚至更短：

//Add
myVideo.controls = "controls";


//Remove
myVideo.controls = "";

基于您已经创建了一个变量 myVideo：

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

希望有所帮助:)

【讨论】：

【解决方案2】：

你可以用 jQuery 做到这一点：

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



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

【讨论】：