recherche

Maison  >  Article  >  interface Web  >  Safari sur iPad (iOS6) ne peut pas redimensionner la vidéo HTML5 pour remplir 100 % de la largeur de la page

Safari sur iPad (iOS6) ne peut pas redimensionner la vidéo HTML5 pour remplir 100 % de la largeur de la page

PHPz
PHPzavant
2023-09-01 16:45:081313parcourir

Safari sur iPad (iOS6) ne peut pas redimensionner la vidéo HTML5 pour remplir 100 % de la largeur de la page

Cet article vous apprendra comment remplir 100 % de la largeur d'une page sans mettre à l'échelle la vidéo HTML5 dans Safari sur iPad IOS6 Sur une page HTML5 responsive, vous pouvez afficher la vidéo en pleine largeur (100 %) en appliquant le CSS suivant. La résolution originale de la vidéo est de 480x270. Sur tous les navigateurs de bureau, la vidéo est redimensionnée pour s'étendre sur toute la largeur de la page tout en préservant les proportions.

Cependant, sur iPad (iOS 6.0.1), Mobile Safari et Chrome, un rectangle noir s'affiche de la même largeur que la page. Le centre du rectangle noir contient une petite vidéo avec une résolution native de 480x270 pixels.

Voici un exemple de la façon dont Safari sur iPad IOS6 ne met pas à l'échelle une vidéo HTML5 pour remplir 100 % de la largeur d'une page HTML5 réactive

Exemple 1

Dans l'exemple ci-dessous, nous définirons la largeur et la hauteur de la vidéo dans l'attribut 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>

Lorsque le script ci-dessus est exécuté, il générera une sortie composée des vidéos téléchargées sur la page Web et la rendra adaptée à toutes les sources définies à l'aide de l'attribut style.

Exemple 2

Dans l'exemple suivant, nous utilisons la position définie sur absolue 

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

Lorsque le script s'exécute, une fenêtre de sortie apparaîtra pour afficher la vidéo sur la page Web, la rendant ainsi adaptée à toutes les sources.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment écrire du code de zone de texte HTMLArticle suivant：Comment écrire du code de zone de texte HTML

Articles Liés

Voir plus