0

我在视频中添加了一张海报图片，它与视频容器本身的尺寸完全相同：

视频文件信息

视频海报文件信息

我的 HTML 看起来像这样（故意没有指定宽度和高度，因为我希望视频使用浏览器调整大小而不是保持固定）：

<video controls
       src="mov/MVI_1880.mp4" 
       poster="mov/MVI_1880_poster.JPG">
</video>

我的 CSS 看起来像这样（宽度设置为 100% 以确保视频使用视口的整个宽度，并在调整浏览器大小时自动调整大小）：

img, video{
        width: 100%;
}

但是，在 iOS7（iPhone 5S 和 iPad Mini）的 Chrome 或 Safari 中查看此图时，海报图像的左右两侧有黑条：

试图在这里发布图片的链接，但它说我需要至少 10 的声誉，才能发布超过 2 个链接 - 你只需要在我的 Flickr 网站上找到图片（见前两个超链接）

如果我专门为视频元素设置了宽度和高度，那么这个问题就会消失：

<video controls width="320" height="180"
       src="mov/MVI_1880.mp4" 
       poster="mov/MVI_1880_poster.JPG">
</video>

试图在这里发布图片的链接，但它说我需要至少 10 的声誉，才能发布超过 2 个链接 - 你只需要在我的 Flickr 网站上找到图片（见前两个超链接）

但我想避免这种情况，因为在调整视口大小时视频会保持固定大小。

我尝试在 CSS 中设置 auto 的高度，但这并没有改变。

另外值得注意的是，这在我桌面上的 Chrome 中运行良好（即我没有在 HTML 中指定宽度或高度，并且在 CSS 中没有指定 100% 的宽度），并且海报图像正确地调整为视口的全宽：

试图在这里发布图片的链接，但它说我需要至少 10 的声誉，才能发布超过 2 个链接 - 你只需要在我的 Flickr 网站上找到图片（见前两个超链接）

非常感谢任何帮助。

4

0 回答 0