iPad (iOS6) 上的 Safari 浏览器无法将 HTML5 视频缩放至占满页面宽度的 100%
htmlweb developmentfront end technology更新于 2024/8/10 1:16:17
本文将教您如何在 iPad (iOS6) 上的 Safari 浏览器中将 HTML5 视频缩放至占满页面宽度的 100%。在响应式 HTML5 页面上，应用以下 CSS 代码即可将视频以全宽 (100%) 显示。视频的原始分辨率为 480x270。在所有桌面浏览器上，视频都会调整大小以覆盖整个页面宽度，同时保持宽高比不变。
然而，在 iPad (iOS 6.0.1) 上，移动版 Safari 和 Chrome 浏览器会显示一个与页面宽度相同的黑色矩形。黑色矩形的中心包含一个小视频，以原始分辨率 480x270 像素显示。
以下示例展示了 iPad iOS 6 上的 Safari 如何无法缩放 HTML5 视频以填充响应式 HTML5 页面上的 100% 页面宽度
示例 1
在下面的示例中，我们在样式属性中设置了视频的宽度和高度。
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
<body>
<video preload autoplay controls>
<source src=https://samplelib.com/lib/preview/mp4/sample-5s.mp4>
</video>
</body>
</html>
执行上述脚本后，它将生成由上传到网页的视频组成的输出，并使其适合使用 style 属性设置的所有源。
示例 2
在下面的示例中，我们使用 <video> 并将位置设置为 absolute。
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
position: absolute;
}
</style>
<body>
<video preload autoplay controls>
<source src="Https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
</video>
</body>
</html>
当脚本执行时，会弹出输出窗口，将视频显示在网页上，使其适合所有来源。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
