app-store-header-video

Vidéo d'en-tête de l'App Store

Construisez les deux vidéos d'actifs créatifs de l'App Store : l'en-tête de page produit qui boucle au-dessus de l'icône de l'application, et l'en-tête de résultats de recherche qui joue sur la carte de l'application dans les résultats de recherche. Les deux sont en lecture automatique en mode silencieux et bouclent à l'infini, donc chaque image doit fonctionner sans son et la dernière image doit s'enchaîner avec la première.

Cette compétence prépare le fichier. Elle ne télécharge ni ne soumet rien — l'utilisateur publie dans App Store Connect.

Entrées à collecter

Demandez uniquement ce qui manque ; la conversation fournit généralement déjà certaines informations.

1. Placement(s) — en-tête (21:9), résultats de recherche (3:2), ou les deux. Chacun a des dimensions différentes, donc un rendu d'en-tête ne peut pas être réutilisé tel quel pour la recherche.
2. L'idée unique — une phrase que la vidéo doit faire passer. Le conseil d'Apple : "Concentrez-vous sur une idée unique et claire." Deux idées signifie qu'aucune ne passe.
3. Identité de l'application — nom de l'application, proposition de valeur en une ligne, couleurs de la marque, fichier du logo, icône PNG de l'application.
4. Matériel réel du produit — captures d'écran ou séquences de l'application réelle, si le concept montre l'application. Les actifs créatifs peuvent mettre en avant la marque ou le contenu plutôt que l'application en cours d'utilisation, cela est donc facultatif, mais lorsque l'application est montrée, il doit s'agir de captures réelles.
5. Durée — 8 secondes par défaut. Apple accepte de 5 à 30 s.
6. Occasion — evergreen, lancement saisonnier, nouveauté de fonctionnalité, changement de marque. Affecte la possibilité de réutiliser l'actif plus tard.

Procédure

Les scripts de cette compétence se trouvent dans scripts/ à côté de ce fichier. Résolvez ce chemin par rapport au répertoire de ce SKILL.md chaque fois que vous les exécutez — le répertoire de travail de l'utilisateur n'est pas le répertoire de la compétence.

1. Verrouillez le placement et lisez les spécifications

Lisez references/specs.md avant de construire. Il contient les tableaux exactes d'Apple, la distinction entre aperçu d'application et actif créatif, et les règles de zone de sécurité.

Si l'interface en ligne de commande asc est dans le PATH, asc asset-library specs renvoie les données de référence en direct d'Apple — utilisez-la pour confirmer que les chiffres n'ont pas bougé depuis que cette compétence a été écrite. references/publishing.md contient la requête.

Les deux placements ne sont pas interchangeables :

Placement	Rapport	Taille	Utilisation typique
En-tête de page produit	21:9	exactement 3840×1646	Bannière pleine largeur au-dessus de l'icône
Résultats de recherche	3:2	1920×1280 à 3840×2560	La carte dans les résultats de recherche

2. Choisissez une idée et nommez l'image d'affiche

Notez l'idée unique et l'image d'affiche — l'image fixe qu'un utilisateur voit avant le début de la lecture, et l'image qu'Apple montre lorsque la lecture automatique est désactivée. L'image d'affiche doit se suffire à elle-même en tant qu'image statique. "Mettez en avant votre proposition de valeur ou votre fonctionnalité la plus convaincante" (Apple). Si l'image d'affiche a besoin d'une légende pour avoir du sens, l'idée n'est pas encore finalisée.

3. Concevez la couture, pas un clip

La vidéo boucle en continu et les gens la regardent à plusieurs reprises, donc l'état à t=0 et t=D doit correspondre. Planifiez cela avant d'animer quoi que ce soit :

• Mouvement continu — une rotation complète à 360° ou un champ en translation infinie s'enroule parfaitement sans travail supplémentaire.
• Retour à la base — l'échelle ou la position revient à sa valeur de départ, et le dernier battement tombe exactement sur l'image de départ.
• Fondu enchaîné — fondu d'ouverture sur le battement initial, maintien, fondu de retour à l'état de base sur le battement de fermeture de sorte que l'enroulement soit une dissolution douce.

Un clip s'affiche sur [début, début + durée) et un état final tombant exactement sur sa fin n'est jamais rendu. Terminez l'interpolation de fermeture une image plus tôt (début + durée - 1/fréquence_images) de sorte que la dernière image visible soit réellement l'état de base — sinon la boucle est à une image de la fermeture.

Un clip qui se termine sur une image différente de celle de départ est perçu comme un bogue, pas une boucle.

4. Construisez avec HyperFrames

npx hyperframes init <répertoire-projet>

Le index.html racine déclare le canevas. Définissez-le aux dimensions exactes en pixels du placement — HyperFrames rend aux dimensions authorisées de la composition et ignore toute taille que vous supposez :

<div id="racine"
     data-composition-id="principale"
     data-width="3840" data-height="1646"
     data-duration="8" data-fps="30">

Règles qui font ou défont cette étape :

• Ne codez pas en dur 1920px/1080px sur #racine ; stylisez-le width:100%; height:100%.
• Il n'y a pas de préréglage --resolution pour le 21:9 ou le 3:2 — --resolution landscape-4k est 3840×2160, ce qui est la mauvaise forme et sera rejeté.
• Donnez au div hôte, à la racine de la scène et à la clé de la timeline le même id. Une non-concordance fait attendre chaque rendu 45 s par scène puis afficher des images statiques.
• Utilisez fromTo, pas from, à l'intérieur d'une scène — l'hôte repositionne la scène et from dérive lors du retour en arrière, ce qui casse exactement une boucle.
• Les polices doivent être regroupées en fichiers dans assets/fonts/ avec @font-face ; seules les familles regroupées sont résolues par nom.
• Placez le texte et la copie dans la composition en tant que variables (data-var-text), jamais cuites dans une image.
• Gardez chaque scène dans compositions/ comme sa propre sous-composition afin qu'une seule battement puisse être re-rendu.

references/hyperframes-build.md contient les extraits de technique de boucle, les commandes de vérification et d'instantané, les indicateurs de rendu, et un pipeline canvas-à-ffmpeg pour se rabattre sur un rendu navigateur 3840×1646 trop lent pour itérer. La spécification et la vérification sont les mêmes dans les deux cas.

5. Générez des images de support uniquement lorsque le concept en a besoin

Les photos, illustrations et arrière-plans atmosphériques proviennent de la génération d'images. Ne générez jamais l'interface utilisateur de l'application avec un modèle d'image — il hallucine les interfaces, et une fausse interface utilisateur dans une fiche de boutique est pire que pas d'interface utilisateur. Utilisez de vraies captures d'écran pour l'application ; utilisez la génération pour tout ce qui l'entoure.

mcode-tools connector tools --keyword image
mcode-tools connector tool <nom_outil>          # lisez d'abord input_schema
mcode-tools connector call <nom_outil> --args '{"prompt":"...","aspect_ratio":"21:9"}'

references/asset-generation.md contient le flux complet de découverte et d'appel plus la façon de demander un rapport hauteur/largeur spécifique.

6. Vérifiez, prenez un instantané, prévisualisez — puis rendez

npx hyperframes check --json                                  # doit être propre
npx hyperframes snapshot --at 0,4,8                            # lisez les PNG
npx hyperframes preview --background                           # donnez l'URL à l'utilisateur

Regardez les instantanés avant de montrer l'aperçu. Les vérifications réussies seules ne signifient pas que l'image a l'air correcte.

Rendez uniquement après que l'utilisateur a vu l'aperçu et l'a approuvé, ou lorsqu'il a demandé le fichier sans s'arrêter :

npx hyperframes render --quality delivery --fps 30 --format mp4 --output out/<nom>.mp4

Ajoutez --video-frame-format png lorsque la source est un enregistrement d'écran de l'application, afin que le texte de l'interface utilisateur et les couleurs plates survivent à l'extraction d'images.

Itérez sur les instantanés, rendez une seule fois. Un instantané d'une seule image est quasi-instantané, donc jugez la composition avec npx hyperframes snapshot --at 0,4,7.9 et lisez les PNG. Un rendu de livraison complet 3840×1646 de 8 secondes prend environ 9 secondes sur un Mac série M — le rendu n'est pas la partie lente, l'itération l'est. Rendez une fois que les images ont l'air correctes.

Effectuez le rendu du test à la qualité de livraison, ou re-encodez-le avant de faire confiance au verdict de la couture. Un rendu de qualité brouillon comporte du bruit de quantification, et le bruit de l'encodeur sur la dernière image diffère de son bruit sur la première image. Cela se manifeste par une différence d'enroulement qui n'est pas géométrique, et vous finirez par chasser un bogue qui n'existe pas. Si un petit test provient de --quality draft, re-encodez-le comme le ferait le script de conformité (libx264 -crf 18 -pix_fmt yuv420p) et vérifiez-le.

7. Conformez le fichier aux spécifications

Exécutez ceci même après un rendu HyperFrames. Une fréquence d'images erronée et une taille de pixel erronée sont les deux raisons de rejet que les gens rencontrent en premier.

node <répertoire-compétence>/scripts/conform-video.mjs --in out/header.mp4 --out out/<app>-header.mp4 --placement header
node <répertoire-compétence>/scripts/conform-video.mjs --in out/search.mp4 --out out/<app>-search.mp4 --placement search

Chaque placement a besoin de sa propre composition et de son propre rendu. Le canevas de l'en-tête est 21:9 et le canevas de recherche est 3:2 — recadrer l'un dans l'autre jette la composition et place le sujet hors cadre. La conformité corrige la résolution, la fréquence d'images et le codec ; elle ne peut pas corriger une composition construite pour la mauvaise forme. Définissez la racine de la composition de recherche à data-width="3840" data-height="2560".

Une racine de projet par placement. La composition racine déclare le canevas, donc les deux placements ne peuvent pas partager une racine. Donnez à chacun son propre dossier de projet avec son propre index.html et une copie des actifs — check et snapshot ne regardent que la racine, et render --composition <fichier> rend un fichier de composition autonome.

Le script met à l'échelle et recadre au canevas exact, force une fréquence d'images constante de 30 ou 60 ips, encode H.264 yuv420p (pas d'alpha), supprime l'audio et définit faststart. Il refuse de mettre à l'échelle vers le haut silencieusement et le dit lorsque la source est trop petite.

8. Vérifiez avant de remettre

node <répertoire-compétence>/scripts/verify-video.mjs out/<app>-header.mp4 --placement header
node <répertoire-compétence>/scripts/verify-video.mjs out/<app>-search.mp4 --placement search

Le script vérifie les dimensions, le rapport, la fréquence d'images (constante, exactement 30 ou 60), la durée, le codec, le format de pixel et l'audio. Il juge également la couture de la boucle : il compare la première image à la dernière image par rapport au mouvement typique d'image à image du clip lui-même, de sorte qu'un enroulement plus perturbateur qu'un pas d'image ordinaire est signalé comme un saut visible. Il écrit une bande *-seam.png des deux images pour inspection visuelle. Il doit se terminer par 0. Corrigez la composition et re-rendez si ce n'est pas le cas.

Ensuite, extrayez l'image d'affiche et regardez-la seule — c'est l'image fixe que la boutique montre avant le début de la lecture, donc si elle a besoin d'une légende pour avoir du sens, la vidéo a besoin de travail. Choisissez l'image la plus forte, qui n'est pas nécessairement la première :

ffmpeg -v error -y -ss 00:00:04.000 -i out/<app>-header.mp4 -frames:v 1 out/<app>-poster.png

Signalez le code temporel que vous avez choisi. Les images d'affiche sont définies sur l'actif dans la bibliothèque d'actifs et ne peuvent pas être modifiées après l'approbation de l'actif, donc le choix doit être fait avant de soumettre.

9. Remettez

Donnez à l'utilisateur :

• le(s) chemin(s) du fichier final, un par placement
• le rapport de vérification
• l'image d'affiche et quelle image c'est
• les étapes de publication

Un actif créatif doit passer trois portes distinctes — téléchargé, approuvé et placé — et l'approbation seule ne le publie pas. references/publishing.md contient les deux routes avec les commandes asc exactes :

asc asset-library view --app ID_APP                     # trouvez l'ID de la bibliothèque
asc asset-library videos upload --library-id ID --file ./header.mp4
asc asset-library videos set-poster-frame --id ID_VIDEO --time-code 00:00:04:00
asc localizations list --app ID_APP                     # trouvez l'ID de localisation
asc localizations placements create --localization-id LOC --video-id VID \
  --placement-type PRODUCT_PAGE_HEADER_ASSET           # ou APP_STORE_SEARCH_RESULTS_ASSET

Pour une application déjà en ligne, la version courte dans App Store Connect est : Apps → votre application → barre latérale → Bibliothèque d'actifs → + → Télécharger des actifs créatifs → téléchargez les deux fichiers → définissez une image d'affiche → Ajouter pour révision → Soumettre pour révision → attendez APPROUVÉ → la version en direct → Informations sur la page produit → "En-tête et résultats de recherche" → Parcourir les actifs → choisissez l'actif → Suivant → Publier. Cela est mis en ligne sans nouvelle version et sans nouvelle révision. Si l'application n'a pas encore de version en direct, attachez les actifs à la version suivante à la place et soumettez-la.

Dites à l'utilisateur de vérifier le résultat avec Aperçu dans l'onglet En-tête et résultats de recherche — il montre l'actif sur iPhone et iPad, dans différentes orientations, langues et en mode sombre, et le recadrage diffère selon le placement. Les images d'affiche ne peuvent pas être modifiées après l'approbation de l'actif, donc choisissez-en une avant de soumettre.

Arrêtez-vous là. N'exécutez pas le téléchargement, la soumission de révision ou la publication vous-même. Le téléchargement et la publication sont les étapes de l'utilisateur.

Contrat de sortie

• out/<app>-header.mp4 — 3840×1646, H.264 yuv420p, fréquence d'images constante 30 ou 60 ips, 5–30 s, pas d'alpha, pas d'audio, moins de 500 Mo
• out/<app>-search.mp4 — 3:2 dans 1920×1280–3840×2560, mêmes règles d'encodage
• un rapport de vérification avec chaque vérification PASS
• une image d'affiche et son code temporel
• une courte note de remise avec les étapes de publication de references/publishing.md

Les deux placements obtiennent leur propre fichier. Ne remettez pas un seul fichier pour les deux.

Gestion des échecs

Symptôme	Que faire
ffprobe / ffmpeg introuvable	brew install ffmpeg (macOS) ou choco install ffmpeg (Windows) ; les scripts en ont besoin pour vérifier et conformer
HyperFrames ne peut pas démarrer Chrome	npx hyperframes browser ensure, puis npx hyperframes doctor --json et vérifiez .ok
Le rendu semble lent	Ce n'est généralement pas le cas. Un rendu de livraison 3840×1646, 8 s mesure environ 9 s sur un Mac série M. Si c'est vraiment lent, vérifiez que le moteur de rendu a des travailleurs GPU, et itérez sur les images hyperframes snapshot au lieu de re-rendre. --quality looks est plus rapide que --quality delivery si vous avez seulement besoin d'un aperçu
L'encodeur étiquette le fichier avec le niveau 4.1	Les deux canevas dépassent le plafond de macroblocs du niveau 4.1 — 3840×1646 fait 24720 macroblocs et 1920×1280 fait 9600, contre une limite de 8192. Ré-encodez avec -level 5.1
La vérification de la couture échoue	Corrigez le dernier battement pour que l'état revienne à l'état de base. Un fondu enchaîné (--seam-crossfade) est un repli, pas une correction, car il consomme C secondes de contenu
Le texte est illisible à la taille de la vignette	Agrandissez-le. Apple note que les actifs apparaissent différemment dans la boutique, donc le plus petit rendu est le vrai test
Téléchargement rejeté dans App Store Connect	Réexécutez verify-video.mjs sur le fichier qui a été réellement téléchargé, pas sur l'original local. asc asset-library videos upload valide également le fichier par rapport aux spécifications en direct d'Apple avant de le télécharger, donc son erreur nomme la règle que vous avez manquée
Apple rejette le placement	L'emplacement peut déjà être pris — la création d'un placement ne remplace pas un existant. Utilisez asc localizations placements list --localization-id LOC pour voir les emplacements occupés, puis asc localizations placements update --id ID_PLACEMENT --video-id ID_VIDEO pour remplacer une vidéo dans un créneau déjà attribué. Si un type de placement n'est pas disponible pour une application, vérifiez son éligibilité dans references/app-eligibility.md.