Image in

后端未结

关注

 1  790

For some reason I\'m unable to set the image size when using an tag inside an html5 video element. It is always defau

相关标签:

1条回答

不知归路

2021-01-19 17:37

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.

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.

poster

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>

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>

0 讨论(0)