資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告