数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究iPad (iOS6) 上的 Safari 浏览器无法将 HTML5 视频缩放至填充页面全宽
本文将讲解如何在 iPad iOS6 上的 Safari 浏览器中，HTML5 视频无法缩放至填充页面全宽。在响应式 HTML5 页面上，可以通过应用以下 CSS 代码来使视频显示为全宽（100%）。视频的原始分辨率为 480x270 像素。在所有桌面浏览器上，视频都会调整大小以跨越页面的整个宽度，同时保持纵横比。
然而，在 iPad (iOS 6.0.1) 上，Mobile Safari 和 Chrome 浏览器会显示一个与页面宽度相同的黑色矩形。黑色矩形的中心包含一个以其原始分辨率 480x270 像素显示的小视频。
以下是关于如何在 iPad iOS6 上的 Safari 浏览器中，HTML5 视频无法缩放至填充页面全宽的示例，在一个响应式 HTML5 页面上。
示例 1
在下面的示例中，我们正在 style 属性内设置视频的宽度和高度。
<!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> 并将 position 设置为 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>
脚本执行后，输出窗口将弹出，在网页上显示视频，使其适合所有源。
更新于：2022-12-15
797 次浏览
广告