5

由于某种原因，在html5元素中使用<img>标签时，我无法设置图像大小。它总是默认回到0 x 0 像素。 video

我使用它的原因img是作为视频标签不起作用的古老浏览器的后备。

这是我的代码注意我故意删除了“myVideo.mp4”来模仿后备：

<video id="welcome" height="1080" width="1920" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

这会产生以下结果（在 chrome 中调试时）。注意“0x0 像素（自然：1920 x 1080）”

0 像素

有人对修复有任何建议吗？非常感谢

4

1 回答 1

4

我相信这是浏览器隐藏的方式，因为<img>Chrome支持该<video>元素。例如，如果您在 IE8 中打开它，则后备内容会正确显示。 <img>

您用于测试回退的条件不正确。删除视频源只会导致浏览器找不到内容（即 404）。在这种情况下，正确的回退是使用元素poster=""上的属性，该属性<video>不在您的标记中。

海报

无视频数据时UA显示的图片文件地址

例如：

<video poster="@Url.Content("~/_video/posterframe.jpg")" id="welcome" height="150" width="150" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

完整演示（在 Chrome 26 中为我工作）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML5 video demo</title>
</head>
<body>
  <video id="welcome" height="150" width="100" preload="auto" loop autoplay poster="http://lorempixel.com/150/100/abstract/1/">
   <source type="video/mp4" src="http://www.808.dk/pics/video/gizmo.mp4" />
   <img src="http://lorempixel.com/150/100/abstract/1/" height="150" width="100" alt="" title="Your browser does not support the <video> tag"/>
</video>
</body>
</html>
于 2013-05-17T07:43:06.840 回答