我遇到的情况是，设置的视频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 回答
拉风的咖菲猫
TA贡献1995条经验 获得超2个赞
最终添加了对视频元素的 ReadyState 的检查，如下所示：
if (video.readyState < 1) {
video.addEventListener("loadedmetadata", video.play)
video.load()
} else {
video.play()
}
因此，play只有在加载元数据时才会触发该命令，如果没有加载，则会等待。显然，通过元数据，大小调整可以正确完成
https://jsfiddle.net/9qjLtyho/
添加回答
举报
0/150
提交
取消