Le Hollandais Volant#8496 - Responsive HTML5 video | Ian Devlin
Intéressant : proposer des vidéos adaptés à la largeur de l’écran en utilisant la balise vidéo avec les média queries.
Inutile en effet de proposer une vidéo en 1920×1080 sur un écran en 1280×720.
Ceci dit, je dis attention au pixel-ratio !
Car un écran de 1280×720 (typiquement mon Wiko Cink Five) possède un écran (viewport) détecté par le navigateur de 640×360, à cause du correcteur de ratio de pixels appliqué sur les pages web, histoire de zoomer le texte.
Et le CSS, lui, détectera seulement 640 et non 1280 ! Et voir une vidéo de 360p sur un écran 720p, c’est pas spécialement beau à voir… Il faut alors tenir compte également du pixel-ratio, et là seul le -webkit-pixel-ratio existe, donc on est vraiment pas sorti de l’auberge niveau CSS.
(un écran mobile de 5 pouces a par exemple une définition aussi grande qu’un ordinateur de 12 pouces, et le correcteur de ratio-pixel serre à corriger ça et à conserver les caractères lisibles)
Inutile en effet de proposer une vidéo en 1920×1080 sur un écran en 1280×720.
Ceci dit, je dis attention au pixel-ratio !
Car un écran de 1280×720 (typiquement mon Wiko Cink Five) possède un écran (viewport) détecté par le navigateur de 640×360, à cause du correcteur de ratio de pixels appliqué sur les pages web, histoire de zoomer le texte.
Et le CSS, lui, détectera seulement 640 et non 1280 ! Et voir une vidéo de 360p sur un écran 720p, c’est pas spécialement beau à voir… Il faut alors tenir compte également du pixel-ratio, et là seul le -webkit-pixel-ratio existe, donc on est vraiment pas sorti de l’auberge niveau CSS.
(un écran mobile de 5 pouces a par exemple une définition aussi grande qu’un ordinateur de 12 pouces, et le correcteur de ratio-pixel serre à corriger ça et à conserver les caractères lisibles)