Safari auf dem iPad (iOS6) kann HTML5-Videos nicht so skalieren, dass sie 100 % der Seitenbreite ausfüllen-HTML-Tutorial-php.cn

Safari auf dem iPad (iOS6) kann HTML5-Videos nicht so skalieren, dass sie 100 % der Seitenbreite ausfüllen

PHPz

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

nach vorne

1305 Leute haben es durchsucht

Safari auf dem iPad (iOS6) kann HTML5-Videos nicht so skalieren, dass sie 100 % der Seitenbreite ausfüllen

In diesem Artikel erfahren Sie, wie Sie 100 % der Seitenbreite ausfüllen, ohne das HTML5-Video in Safari auf dem iPad IOS6 zu skalieren. Auf einer responsiven HTML5-Seite können Sie das Video in voller Breite (100 %) anzeigen, indem Sie das folgende CSS anwenden. Die Originalauflösung des Videos beträgt 480x270. In allen Desktop-Browsern wird die Größe des Videos so angepasst, dass es sich über die gesamte Breite der Seite erstreckt, während das Seitenverhältnis beibehalten wird.

Auf dem iPad (iOS 6.0.1), Mobile Safari und Chrome wird jedoch ein schwarzes Rechteck angezeigt, das die gleiche Breite wie die Seite hat. In der Mitte des schwarzen Rechtecks befindet sich ein kleines Video mit einer nativen Auflösung von 480 x 270 Pixeln.

Hier ist ein Beispiel dafür, wie Safari auf dem iPad IOS6 ein HTML5-Video nicht so skaliert, dass es 100 % der Seitenbreite einer responsiven HTML5-Seite ausfüllt

Beispiel 1

Im folgenden Beispiel legen wir die Videobreite und -höhe im Stilattribut fest.

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

Nach dem Login kopieren

Wenn das obige Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus den auf der Webseite hochgeladenen Videos und macht sie für alle mit dem Stilattribut festgelegten Quellen geeignet.

Beispiel 2

Im folgenden Beispiel verwenden wir die Position auf absolut gesetzt

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

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, erscheint ein Ausgabefenster, in dem das Video auf der Webseite angezeigt wird, sodass es für alle Quellen geeignet ist.

Das obige ist der detaillierte Inhalt vonSafari auf dem iPad (iOS6) kann HTML5-Videos nicht so skalieren, dass sie 100 % der Seitenbreite ausfüllen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!