播放未加载的视频时，视频海报在 Chrome 中会被拉伸
我遇到的情况是，设置的视频object-fit: cover在尝试播放视频时其海报被拉伸。海报被拉伸到 2:1 的宽高比，我注意到video如果没有应用样式，这是默认标签的默认比例。
我无法在其他浏览器中重现，并且它似乎与 CSS 设置无关。
重现的最小代码如下所示：
<!DOCTYPE html>
<html>
<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>
小提琴： https: //jsfiddle.net/6c7yjg8a/
任何想法 ？
萧十郎1回答
-
拉风的咖菲猫
最终添加了对视频元素的 ReadyState 的检查，如下所示：if (video.readyState < 1) { video.addEventListener("loadedmetadata", video.play) video.load()} else { video.play()}因此，play只有在加载元数据时才会触发该命令，如果没有加载，则会等待。显然，通过元数据，大小调整可以正确完成https://jsfiddle.net/9qjLtyho/
随时随地看视频慕课网APP
相关分类
JavaScript