Résolution d'écran, orientation et dimensionnement des mises en page

Un contenu qui paraît étiré, avec des bandes noires, recadré ou de travers est presque toujours dû à une incohérence entre trois éléments : la résolution de la mise en page, la résolution de sortie du lecteur, et l'orientation physique de l'écran.

Concevez la mise en page à la résolution réelle de l'écran

Une mise en page a une résolution fixe, choisie à sa création. Choisissez celle qui correspond à l'écran :

1920 × 1080 : Full HD paysage standard. Le choix par défaut, et la bonne réponse pour la plupart des écrans.
1080 × 1920 : Full HD portrait, pour un écran physiquement pivoté à 90°.
3840 × 2160 : 4K paysage. Lisez la remarque ci-dessous avant de la choisir, car sur Android elle ne fait pas ce que le chiffre laisse penser.

Si le rapport d'aspect de la mise en page ne correspond pas à l'écran, easyCMS la redimensionne pour l'adapter et vous obtenez des bandes noires, ou la redimensionne pour remplir et vous obtenez un recadrage. Ni l'un ni l'autre n'est un bug ; la solution est de reconstruire la mise en page à la bonne résolution, pas de l'étirer après coup.

Écrans en portrait

Le portrait exige une décision à trois niveaux, et les trois doivent concorder :

Physique : l'écran est pivoté sur son support.
Sortie du lecteur : l'appareil produit une image pivotée. Sous Windows, c'est le paramètre de rotation du pilote graphique, et les écrans commerciaux ont généralement leur propre option de rotation dans le menu du téléviseur. Sous Android, cela se trouve dans le profil de paramètres partagé par votre compte, c'est donc un changement à nous demander plutôt qu'à faire vous-même par appareil, et il doit correspondre à la façon dont l'écran est physiquement monté, sinon vous obtenez une mise en page pivotée sur un panneau non pivoté.
Mise en page : la mise en page est créée en 1080 × 1920.

L'erreur la plus courante est de ne pivoter que la mise en page : une mise en page portrait envoyée vers une sortie paysage est compressée en une fine bande au milieu de l'écran. La deuxième erreur la plus courante est de pivoter à deux niveaux, le lecteur et l'écran, ce qui s'annule et vous laisse à l'envers.

Dans la mesure du possible, effectuez la rotation au niveau de l'écran et laissez le lecteur produire son signal paysage natif, car certains appareils perdent l'accélération matérielle de la vidéo quand la sortie est pivotée par logiciel. Si la vidéo joue bien en paysage et saccade en portrait, c'est ce qui s'est passé : effectuez plutôt la rotation au niveau de l'écran.

4K, et ce qui se passe réellement sur Android

Choisir une mise en page en 3840 × 2160 ne vous donne pas une interface 4K. Sur un lecteur Android, l'interface, les images et le contenu web s'affichent en 1080p puis sont mis à l'échelle vers le panneau ; seule la vidéo se décode nativement en 4K. easyCMS signale un tel écran comme étant en 1920 × 1080, ce qui est correct et non un bug, et c'est ce qui est à l'origine de la plupart des tickets « mon écran 4K est mal détecté ».

Astuce Pour un panneau 4K, créez la mise en page en 1920 × 1080 et placez-y des fichiers vidéo encodés en 4K. Vous obtenez la vidéo 4K native pour laquelle le panneau est conçu, sans quadrupler la taille de chaque image ni gaspiller de quota de stockage sur des pixels que personne ne voit.

Dimensionner la vidéo à l'espace qu'elle occupe

Les vidéos sont mises à l'échelle dans l'espace qu'elles occupent. Pour un résultat propre :

Encodez la vidéo au rapport d'aspect de l'espace qu'elle remplit.
Une vidéo plein écran dans une mise en page en 1920 × 1080 doit être un fichier en 1920 × 1080.
Une vidéo remplissant un espace portrait doit être encodée en portrait, et non être un fichier paysage pivoté par le lecteur.

Laisser le lecteur redimensionner à la volée coûte des performances sur du matériel d'entrée de gamme et est une cause fréquente de saccades, voir Les vidéos ne se lancent pas ou saccadent.

Overscan : du contenu qui déborde des bords

Si quelques pixels sont coupés sur les quatre bords, le téléviseur applique de l'overscan. Cherchez dans les paramètres d'image de l'écran une option Just Scan, Screen Fit, 1:1, Full Pixel ou Mode PC et activez-la. Certains écrans ne désactivent l'overscan que lorsque l'entrée est étiquetée comme un PC. Ne compensez pas en réduisant votre mise en page, corrigez-le au niveau de l'écran.

Tailles d'écran mixtes dans un même réseau

Des écrans de résolutions différentes mais de même rapport d'aspect peuvent partager une seule mise en page : une mise en page en 1920 × 1080 se redimensionne proprement sur un écran en 3840 × 2160. Des rapports d'aspect différents ne peuvent pas partager une mise en page sans compromis. Regroupez les écrans par rapport d'aspect et programmez la mise en page correspondante sur chaque groupe, voir Programmer du contenu.

Concevez le texte pour le pire cas du groupe. Un texte confortable sur un écran de 55” à 2 mètres est illisible sur un écran de 32” à 6 mètres.

Articles liés : Créer des mises en page, Les vidéos ne se lancent pas ou saccadent, Connecter votre premier écran