本文介绍了图片位于< img>尽管设置其大小,标记默认为0 x 0像素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

出于某种原因,我无法在 html5 <$ c $内使用< img> 标签设置图片大小c> video 元素。它总是默认返回到 0 x 0像素

For some reason I'm unable to set the image size when using an <img> tag inside an html5 video element. It is always defaulting back to 0 x 0 pixels.

我使用这个 img 是古代浏览器的后备,视频标签无法正常工作。

The reason I'm using this img is as a fallback for ancient browsers where the video tag just will not work.

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

Here's my code NOTE I have deliberately removed "myVideo.mp4" to mimic the fallback :

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

This produces the following result (when debugging in chrome). Note the "0x0 pixels (Natural: 1920 x 1080)"

有没有人对修复有任何建议?非常感谢

Does anyone have any suggests as to a fix? Thanks v much

推荐答案

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

I believe this is the browser's way of hiding the <img> since the <video> element is supported in Chrome. If you open this in IE8 for example, the fallback <img> content is displayed correctly.

您用于测试回退的条件不正确。移除视频源只会导致浏览器找不到内容(即404)。在这种情况下,正确的回退是使用元素,这不在您的标记中。

The conditions you have used to test the fallback are incorrect. Removing the video source will simply result in the browser not finding the content (i.e. a 404). In this case, the correct fallback is to use the poster="" attribute on the <video> element, which is not in your markup.

UA的图像文件地址视频数据可用

The address of an image file for the UA to show while no video data is available

例如:

For example:

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

Full Demo (working for me in 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>

这篇关于图片位于&lt; img&gt;尽管设置其大小,标记默认为0 x 0像素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 12:30