Question

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

我使用此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 pixels

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

Answer 1

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

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

海报

在没有视频数据可用时显示的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>

尽管设置了大小，但<img/>标记中的图像默认为0 x 0像素

1 个答案: