Safari sur iPad (iOS6) ne met pas à l'échelle les vidéos HTML5 pour qu'elles occupent 100 % de la largeur de la page.

Question

Safari sur iPad (iOS6) ne met pas à l'échelle les vidéos HTML5 pour qu'elles occupent 100 % de la largeur de la page.

Demandé el 10 de Janvier, 2013: Quand la question a-t-elle été
15277 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'utilise le CSS suivant pour afficher une vidéo en pleine largeur (100 %) sur une page HTML5 réactive. La taille native de la vidéo est de 480x270. La vidéo est mise à l'échelle pour remplir toute la largeur de la page sur tous les navigateurs de bureau tout en conservant le rapport hauteur/largeur.

Cependant, Mobile Safari et Chrome sur mon iPad (iOS 6.0.1) affichent un rectangle noir de la même largeur que la page. La vidéo est minuscule et s'affiche dans sa taille native (480x270) au centre du rectangle noir.

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

inspiré par http://webdesignerwall.com/tutorials/css-elastic-videos . Un commentaire sur cette page me laisse penser qu'il y a une régression dans iOS6.

Depuis la mise à jour de mon iPad vers iOS 6, cette correction ne semble plus fonctionner, je pense que c'est la hauteur : auto qui est à l'origine du problème. Quelqu'un a eu une expérience similaire et a trouvé une solution ?

Quelqu'un d'autre rencontre-t-il ce problème ? I existe-t-il un moyen d'afficher une vidéo HTML5 en pleine largeur sur l'iPad (iOS6) tout en préservant le ratio d'aspect en utilisant uniquement des CSS ?

Le code HTML est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
          <source src="file.mp4"  type="video/mp4">
          <source src="file.webm" type="video/webm; codecs=vp8, vorbis">
          <source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>

Demandé el 10 de Janvier, 2013 par thisguyzaphod

Answer 1

5 Réponses

Answer 2

51voto

brianchirls Points 3069

Je vois ici deux problèmes :

Mobile Safari ne calculera pas les dimensions de votre vidéo (ou le rapport hauteur/largeur) pour vous. Vous devez spécifier la hauteur et la largeur dans les attributs de l'élément ou dans la feuille de style CSS, car l'en-tête du fichier vidéo ne sera pas téléchargé tant que la lecture n'aura pas commencé. Voir cette page , troisième section.
Même si vous le faites, le navigateur ne semble pas s'en préoccuper. Lorsque vous le réglez sur auto, il revient à la hauteur par défaut de 150px. Honnêtement, je n'arrive pas à comprendre pourquoi. Il s'agit probablement d'un bogue. Mais...

... il existe une solution de contournement.

iOS ne semble pas avoir le même problème avec un canevas. Vous pouvez donc placer un canevas et votre vidéo à l'intérieur d'une div, qui est réglée sur position: relative . Mettez le canevas à l'échelle comme vous le feriez pour votre vidéo. Réglez la vidéo sur position: absolute et la hauteur et la largeur à 100%. De cette façon, le canevas forcera la div à avoir la taille souhaitée, et la vidéo s'étendra pour remplir la div.

Exemple de travail ici : http://jsbin.com/ebusok/135/

Répondu el 11 de Janvier, 2013 par brianchirls (3069 Points )

Answer 3

15voto

emptywalls Points 317

En incorporant une partie de la réponse de @brianchirls, voici ce que j'ai fait. Cela semble fonctionner jusqu'à présent sur desktop, Android et iOS. Profitez de l'astuce du padding responsive, où le padding-top, en tant que pourcentage, sera un pourcentage de la largeur. Ma vidéo est au format 16:9, voici donc mon code :

#video-container {
 position: relative;
 padding-top: 56.25%;
}

video, object {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

Répondu el 17 de Janvier, 2014 par emptywalls (317 Points )

Answer 4

1voto

uknowit2 Points 69

J'ai eu un scénario similaire avec IOS6 et un objet vidéo qui ne se redimensionnait pas par rapport à son parent. J'ai résolu le problème en ciblant tous les éléments à l'intérieur du div parent contenant la vidéo avec CSS. Dans votre exemple, vous devez donc entourer votre vidéo d'une div (par exemple, class="DivWithVideo") et ajouter le CSS suivant :

 .DivWithVideo * {max-width: 100%}

Répondu el 7 de Janvier, 2014 par uknowit2 (69 Points )

Answer 5

0voto

Sergey Sahakyan Points 357

Vous pouvez utiliser cette fonction pour centrer votre vidéo dans le conteneur avec les marges que vous souhaitez. pas besoin d'ajouter un élément supplémentaire. correctif pour iOS 7 spécialement. faites attention à -webkit-calc préfixes si nécessaire

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);

Répondu el 5 de Novembre, 2015 par Sergey Sahakyan (357 Points )

Answer 6

0voto

boerfi Points 355

J'ai dû faire quelque chose de similaire avec les vidéos téléchargées par les utilisateurs. Cela signifie que : Je ne sais pas quelle est la résolution de la vidéo, elle peut même être en mode portrait.

Ma solution a été de définir la hauteur via javascript lorsque les métadonnées sont chargées. Pour la plupart des navigateurs, la taille de la vidéo est correcte dès le début ; sur l'iPad, la taille de la vidéo est ajustée lorsque l'utilisateur appuie sur le bouton de lecture. Pour moi, il n'y a pas de problème à laisser la vidéo grandir dès que je sais quelle taille elle doit avoir.

Code (object.id est utilisé parce que dans ma configuration, il peut y avoir plusieurs vidéos sur la même page) :

<script type="text/javascript">
    // set height and width to native values
    function naturalSize_{{ object.id }}() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        var ratio = myVideo.videoWidth / myVideo.videoHeight;
        var video_object = $('#video-{{ object.id }}');
        video_object.animate({
            height: (video_object.width() / ratio) + "px"
        }, 1000);
    }

    $(document).ready(function() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        myVideo.addEventListener('loadedmetadata', naturalSize_{{ object.id }}, false);
    })
</script>

Si quelqu'un a une solution plus propre, peut-être en CSS pur, j'aimerais la voir...

Répondu el 18 de Septembre, 2013 par boerfi (355 Points )

Safari sur iPad (iOS6) ne met pas à l'échelle les vidéos HTML5 pour qu'elles occupent 100 % de la largeur de la page.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Safari sur iPad (iOS6) ne met pas à l'échelle les vidéos HTML5 pour qu'elles occupent 100 % de la largeur de la page.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: