使用javascript检索嵌入视频的宽度

Retrieve width of embedded video using javascript

本文关键字：视频 javascript 检索 使用      更新时间：2023-09-26

我有一个简单的页面，里面有一个嵌入式视频。下面是一个示例。我想检索嵌入视频的iframe的宽度，该宽度可能会有所不同（例如，如果视频来自youtube或vimeo）。然后我可以在它旁边放一个div，并带有一些文本，并相应地调整后者的宽度

<html>
  <head>
  </head>
      <body onLoad = "resizeElements()">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>  
  </body>
    <script language="JavaScript" type="text/javascript">
    function resizeElements() 
    {
      var iframeVideos = document.getElementsByTagName("iframe");
      for ( var i = 0; i < iframeVideos.length; i++) 
      {
        video = iframeVideos[i];
        alert ( ">" + video.style.width+ "<" );
        video.style.width = "112px";
        video.style.height = "63px";
        alert ( ">" + video.style.width+ "<" );
      }
    }
  </script>
</html>

页面已加载，第一个警报（应具有iframe的宽度）仅显示"><"，中间没有视频的宽度。

我确定这不是因为视频对象为空。以下行会按预期调整其大小。调整大小后，同一警报会显示正确的宽度。

我能做些什么来立即提供宽度？

我不是 jQuery 等库的忠实粉丝，但很乐意考虑，以防其中一个提供直接的解决方案，不会让它比仅仅解析标签内的字符串更复杂。以防万一页面将来需要一些维护...

谢谢！

我认为您只需要设置 style 属性以匹配您的宽度和高度属性：

<iframe style="width:420;height:315" width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>

因为在您的函数中，您正在使用 style 属性。

DOM： element.offset*

offsetWidth 和 offsetHeight 应该会有所帮助，即使在 IE6 和所有现代浏览器中也支持。

alert ( ">" + video.offsetWidth +  "<" );

请看一下jsFiddle Demo。

jQuery width（）/height（）

如果您准备好使用 jQuery，请查看 .width() 和 height() 。我也不是jQuery的"粉丝"，但是如果您厌倦了解决浏览器的不一致问题，需要高级事件处理支持（而不是当前的内联事件处理程序）和出色的DOM助手，那么它是一个了不起的工具。

属性

另一种方法是简单地检索 HTML 属性的内容（正在width="420"）。您可以使用.getAttribute(width)或.width（访问 DOM 属性）来执行此操作。

 alert ( ">" + video.width +  "<" );
 alert ( ">" + video.getAttribute(width) +  "<" );
相关文章：