问题描述
出于某种原因,我无法在 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>
这篇关于图片位于< img>尽管设置其大小,标记默认为0 x 0像素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!