Responsive Html5 Résolution Vidéo

Je suis en train d'écrire une simple page web en responsive web design, afin de CSS3 media queries pour servir les différentes feuilles de style basé sur la résolution de l'écran. Pour faire simple, disons qu'il s'agit d'un iphone versione et une version de bureau. Je suis en utilisant la balise video html5 pour servir des vidéos, et j'aimerais servir d'une vidéo 720p lorsque le site est accessible avec un bureau et une plus petite, 320p vidéo en accès avec un iphone. Je me trompe ou il n'y a pas de moyen facile de le faire juste avec du html/css? Dois-je utiliser javascript pour modifier dynamiquement la vidéo attribut src? Si oui, quelles sont les meilleures pratiques? Merci à l'avance.

OriginalL'auteur Marek Maurizio | 2011-10-21

  1. 9

    Vous pouvez ajouter la media attribut pour les différents source éléments vous permettant de vous servir des différentes vidéos pour les appareils qui correspondent à la requête de média paramètres (comme lié par DBUK ci-dessus).

    Par exemple:

    <video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

    Mise à jour – 24.07.2012
    Il est probable que ce sera retiré de la spécification.

    Personne ne sait si il y a des informations plus récentes sur la media attribut? Il semble que le travail dans la plupart des navigateurs, mais cette réponse me fait penser que je devrais envisager une javascript approche à la place...
    avez-vous jamais trouver toutes les infos sur cela?
    Quand j'ai finalement exécuté le réactif de la vidéo, j'ai changé le source des balises à l'aide javascript basé sur la width de la fenêtre d'affichage.
    C'est qu'à toute épreuve depuis dire vieux Android ne peuvent soutenir une résolution inférieure, tandis que la petite fenêtre de bureau, pourrait encore obtenir de haute qualité (de l'esp. si elles le mode plein écran)?
    media n'est pas un attribut valide, lorsque le parent de l'élément de source n'est pas picture. donc, cela peut n'avoir aucun effet. en va de même pour srcset et sizes. mdn docs

    OriginalL'auteur Ian Devlin