Safari pada iPad (iOS6) tidak boleh menskalakan video HTML5 untuk mengisi 100% lebar halaman-html tutorial-php.cn

Safari pada iPad (iOS6) tidak boleh menskalakan video HTML5 untuk mengisi 100% lebar halaman

PHPz

Lepaskan： 2023-09-01 16:45:08

ke hadapan

1334 orang telah melayarinya

Safari pada iPad (iOS6) tidak boleh menskalakan video HTML5 untuk mengisi 100% lebar halaman

Artikel ini akan mengajar anda cara mengisi 100% lebar halaman tanpa menskalakan video HTML5 dalam safari pada ipad IOS6 Pada halaman HTML5 responsif, anda boleh memaparkan video dalam lebar penuh (100%) dengan menggunakan CSS berikut. Peleraian asal video ialah 480x270. Pada semua penyemak imbas desktop, video diubah saiz untuk merentangi keseluruhan lebar halaman sambil mengekalkan nisbah bidang.

Walau bagaimanapun, pada iPad (iOS 6.0.1), Safari Mudah Alih dan Chrome, segi empat tepat hitam dipaparkan dengan lebar yang sama dengan halaman. Bahagian tengah segi empat tepat hitam mengandungi video kecil dengan resolusi asli 480x270 piksel.

Berikut ialah contoh cara safari pada ipad IOS6 tidak menskalakan video HTML5 untuk mengisi 100% lebar halaman pada halaman HTML5 responsif

Contoh 1

Dalam contoh di bawah, kami akan menetapkan lebar dan tinggi video dalam atribut gaya.

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

Salin selepas log masuk

Apabila skrip di atas dilaksanakan, ia akan menghasilkan output yang terdiri daripada video yang dimuat naik pada halaman web dan menjadikannya sesuai untuk semua sumber yang ditetapkan menggunakan atribut gaya.

Contoh 2

Dalam contoh berikut, kami menggunakan set kedudukan kepada mutlak

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

Salin selepas log masuk

Apabila skrip dilaksanakan, tetingkap output akan muncul untuk memaparkan video pada halaman web, menjadikannya sesuai untuk semua sumber.

Atas ialah kandungan terperinci Safari pada iPad (iOS6) tidak boleh menskalakan video HTML5 untuk mengisi 100% lebar halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!