jQuery .attr() 改变视频高度不能正常工作

Posted 2023-03-06

【中文标题】jQuery .attr() 改变视频高度不能正常工作

【英文标题】：jQuery .attr() changing video height not working properly

【发布时间】：2019-02-01 03:27:18

【问题描述】：

这几天我一直面临着一个让我发疯的问题！

当我尝试在 html 文件中设置视频标签的属性“宽度”、“高度”时，它工作得很好。但是当我尝试通过 jQuery 更改 attr 时，它就不起作用了！

例如：

案例 1（没有 jQuery）：

css:

#VID_CON
    position:relative;
    width:80%;
    height:100%; /* height equals to 662px*/
    float:left;
    background-color:green;

html:

<div id="VID_CON">
  <video id="MYVID"    >
    <source src="media/tm.mp4" type="video/mp4">
  </video>
</div>

看起来像这样：

enter image description here

案例 2（使用 jQuery）：

css:

#VID_CON
    position:relative;
    width:80%;
    height:100%; /* height equals to 662px */
    float:left;
    background-color:green;

html:

<div id="VID_CON">
  <video id="MYVID"    >
    <source src="media/tm.mp4" type="video/mp4">
  </video>
</div>

jQuery:

window.setInterval(function()

   var vid_h= $("#VID_CON").height(); //returns "662"
       $("#MYVID").attr("height", vid_h +"px") ;   

,200);

现在它看起来像这样：

enter image description here

那么，我在这里缺少什么？请帮忙..

最好的问候。

【问题讨论】：

您的元素<div id="VID_CON"></div> 的高度取决于其内容（视频）。您必须从 CSS 或通过 jQuery 设置其大小，基于不在 <div id="VID_CON"></div> 内的其他元素。

【参考方案1】：

好的，我刚刚解决了问题..

window.setInterval(function()

   var vid_h= $("#VID_CON").height(); //returns "662"

       //#mep_0 is the id of MediaElement video container
       $("#mep_0").css("height", vid_h +"px");
       $("#MYVID").attr("height", vid_h +"px");  

,200);