播放未加载的视频时，视频海报在 chrome 中被拉伸

Question

我遇到的情况是，使用 object-fit: cover 设置的视频在尝试播放视频时海报被拉伸了。如果没有应用任何样式，海报会拉伸到 2:1 纵横比，我注意到这是默认 video 标签的默认纵横比。

我无法在其他浏览器中重现，它似乎与 CSS 设置无关。

重现的最少代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Video Error Test</title>
    </head>
    <body>
        <style>
            video {
                width: 300px;
                height: 600px;
                object-fit: cover;
            }
        </style>
        <video poster="https://via.placeholder.com/300x600" muted>
            <source src="not-important" type="video/mp4"/>
        </video>
    </body>
    <script>
        setTimeout(() => {
            document.body.querySelector("video").play();
        }, 1000);
    </script>
</html>

Fiddle: https://jsfiddle.net/6c7yjg8a/

有什么想法吗？

Answer 1

最后添加了对视频元素的 readyState 的检查，如下所示：

if (video.readyState < 1) {
    video.addEventListener("loadedmetadata", video.play)
    video.load()
} else {
    video.play()
}

因此 play 命令仅在加载元数据时触发，否则等待。显然，使用元数据可以正确调整大小

https://jsfiddle.net/9qjLtyho/

播放未加载的视频时，视频海报在 chrome 中被拉伸

Video poster gets stretched in chrome when playing a non-loaded video

html

javascript

css

video

google-chrome