首頁 > 文章 > web前端 > iPad上的Safari瀏覽器（iOS6）無法將HTML5影片縮放至填滿頁面寬度的100%

iPad上的Safari瀏覽器（iOS6）無法將HTML5影片縮放至填滿頁面寬度的100%

PHPz轉載: 2023-09-01 16:45:081280瀏覽

本文將教您ipad IOS6 上的safari 如何不縮放HTML5 影片填充100% 的頁面寬度在響應式HTML5 頁面上，可以透過應用以下CSS 以全寬(100% ) 顯示影片。影片的原始解析度為 480x270。在所有桌面瀏覽器上，影片都會調整大小以跨越頁面的整個寬度，同時保留寬高比。

但是，在 iPad (iOS 6.0.1)、Mobile Safari 和 Chrome 上，顯示與頁面寬度相同的黑色矩形。黑色矩形的中心包含一個小視頻，其原始解析度為 480x270 像素。

以下是 ipad IOS6 上的 safari 如何在響應式 HTML5 頁面上不縮放 HTML5 影片以填充 100% 頁面寬度的範例

範例 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

在以下範例中，我們使用位置設定為絕對的

<!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>

當腳本執行時，將彈出輸出窗口，將影片顯示在網頁上，使其適合所有來源。

以上是iPad上的Safari瀏覽器（iOS6）無法將HTML5影片縮放至填滿頁面寬度的100%的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：html文字框程式碼如何寫下一篇：html文字框程式碼如何寫

看更多