web-dev-qa-db-fra.com

Safari sur iPad (iOS6) ne met pas à l'échelle la vidéo HTML5 pour remplir 100% de la largeur de la page

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 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) montrent un rectangle noir de la même largeur que la page. La vidéo est minuscule et affichée dans sa taille native (480x270) à le centre du rectangle noir.

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

inspiré par http://webdesignerwall.com/tutorials/css-elastic-videos . Il y a un commentaire sur cette page qui me porte à croire qu'il y a une régression dans iOS6.

Depuis la mise à niveau de mon iPad vers iOS 6, ce correctif ne semble plus fonctionner, je pense que c'est la hauteur: auto causant le problème. Quelqu'un a-t-il connu un problème similaire et a-t-il une solution?

Quelqu'un d'autre rencontre-t-il ce problème? Y a-t-il un moyen d'afficher une vidéo HTML5 en pleine largeur sur l'iPad (iOS6) tout en préservant les proportions en utilisant uniquement CSS?

Le 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>
html5mobile-safarihtml5-videoresponsive-design
33
thisguyzaphod

Je vois deux problèmes ici:

  1. Mobile Safari ne déterminera pas pour vous les dimensions (ou les proportions) de votre vidéo. Vous devez spécifier la hauteur et la largeur dans les attributs d'élément ou CSS, car cela ne téléchargera pas du tout l'en-tête du fichier vidéo jusqu'à ce que vous commenciez à jouer. Voir cette page , troisième section.

  2. Même si vous faites cela, le navigateur ne semble pas s'en soucier. Lorsque vous le définissez sur auto, il revient à la hauteur par défaut de 150 pixels. Honnêtement, je ne peux pas comprendre pourquoi. C'est probablement un bug. 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 dans un div, qui est défini sur position: relative. Mettez la toile à l'échelle comme vous le feriez avec 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 à la taille souhaitée et la vidéo se développera pour remplir la div.

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

51
brianchirls

Intégrant une partie de la réponse @brianchirls, voici ce que j'ai fait. Cela semble fonctionner jusqu'à présent sur le bureau, Android et iOS. Profitez de l'astuce de rembourrage réactif, où padding-top, en tant que pourcentage sera un pourcentage de la largeur. Ma vidéo est en 16: 9 alors voici mon code:

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

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

J'ai eu un scénario similaire avec IOS6 et un objet vidéo ne redimensionnant pas à son parent. Je l'ai résolu en ciblant tous les éléments de la div parent contenant la vidéo avec CSS. Donc, dans votre exemple, vous devrez entourer votre vidéo d'un div (par exemple class = "DivWithVideo") et ajouter le CSS suivant:

 .DivWithVideo * {max-width: 100%}
1
uknowit2

vous pouvez l'utiliser pour définir le centre de votre vidéo dans un conteneur avec des marges comme vous le souhaitez. pas besoin d'ajouter d'élément supplémentaire. correction pour iOS 7 spécialement. faire attention à -webkit-calc préfixes si besoin

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

J'ai dû faire quelque chose de similaire avec les vidéos mises en ligne par les utilisateurs. Cela signifie: je ne sais pas quelle est la résolution de la vidéo, elle pourrait même être en mode portrait.

Ma solution consistait à définir la hauteur via javascript lors du chargement des métadonnées. Pour la plupart des navigateurs, la vidéo est dimensionnée correctement depuis le début; sur l'iPad, la taille de la vidéo est ajustée lorsque l'utilisateur frappe la lecture. Pour moi, c'était bien de laisser la vidéo grandir dès que je sais à quel point elle doit être grande.

Code (object.id est utilisé car dans ma configuration, il pourrait 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 pur CSS, j'aimerais la voir ...

0
Marius