Aller au contenu principal

La vidéo de démo d’application, faite depuis votre URL

Par Gauthier Bros, fondateur de PageToVidMis à jour le 7 min de lecture

Une application web déjà en ligne, ou la page de présentation d’une application mobile, suffit pour obtenir une démo commentée à partir de son URL, sans ouvrir de logiciel de montage. C’est notre approche de la vidéo de démo d’application : la page que vous avez déployée devient la matière du film, et le 9:16 filme sa version mobile dans un écran de téléphone.

Ce guide s’adresse au développeur indépendant qui préfère écrire du code que monter de la vidéo. Il couvre ce qui peut être filmé selon ce que vous avez construit, une vraie démo verticale d’un jeu dans le navigateur, la place de chaque film (y compris les limites honnêtes des aperçus App Store et Google Play) et le rendu depuis Cursor ou VS Code.

Jam3a : une démo verticale (9:16) de 50 secondes pour une application de soirées jeux dans le navigateur, 92 mots prononcés, filmée sur la version mobile du site. Salons privés, de deux à douze joueurs, sans téléchargement ni inscription.

Réalisé à partir de helpful-hotteok-c43edb.netlify.app avec PageToVid et publié par son auteur. Le voir sur sa page → · Voir toutes les vidéos publiques →

Ce que vous pouvez filmer, selon ce que vous avez construit

Nous filmons des pages web dans un vrai navigateur cloud. La première question n’est donc pas le format, mais ce qui possède une URL.

Ce qui est filmé, selon le type d’application
Ce que vous avezCe que nous filmonsMeilleur formatÀ savoir

Une application web responsive

L’application elle-même, déconnectée ou via une session de capture (à partir de Scale)

9:16 pour un usage mobile, 16:9 pour un outil de bureau

Ce qui se rapproche le plus d’une vraie démo produit

Une page de présentation d’app mobile

La page : captures, fonctionnalités, badges des stores

9:16 et 16:9

Elle montre votre marketing, pas des images de l’app en marche

Une app native sans présence web

Rien pour l’instant

—

Enregistrez-la sur l’appareil ou le simulateur

Une API, un SDK ou une CLI

Votre documentation ou votre page, ou un storyboard écrit par vous

16:9

Une animation tirée d’un storyboard écrit l’explique souvent mieux

Pour une application web derrière une connexion, utilisez une route de démo publique avec des données d’exemple, sur tous les plans, ou une session de capture à partir du plan Scale : l’extension navigateur transmet votre session connectée à l’enregistreur.

Une vraie démo verticale : Jam3a, 50 secondes

Jam3a est une application de navigateur pour les soirées jeux entre amis : vous ouvrez un salon privé et vos amis le rejoignent, sans rien installer. Nous avons réalisé sa démo de 50 secondes en 9:16, 1080×1920, avec 92 mots prononcés en anglais. Comme elle est verticale, elle a été filmée sur la version mobile du site dans un écran de téléphone, celle que voit un utilisateur sur son smartphone.

La narration ouvre sur la soirée, pas sur le produit : « Tired of complicated game setups for game night? ». Elle nomme les frictions que tout organisateur connaît (téléchargements, identifiants), puis montre le parcours dans l’ordre où l’organisateur le vit : créer un salon privé en quelques secondes, inviter de deux à douze joueurs, choisir un jeu à manches courtes. Elle se termine sur l’action proposée par la page, « Create your private room now », et répète la promesse qui compte le plus pour un groupe : ni téléchargement ni inscription.

Pourquoi c’est une bonne démo de développeur : chaque phrase est une étape ou une contrainte de la vraie application, et les faits les plus forts, la fourchette de joueurs et l’absence d’installation, se vérifient sur la page. C’est le rôle d’une démo d’application : répondre à « que se passe-t-il quand je l’ouvre ? » avant que le spectateur ait à le demander.

Où placer votre démo, et ce que chaque endroit accepte

Un film tiré de votre site donne le meilleur de lui-même sur les surfaces que vous maîtrisez. Les stores font exception : ils demandent des images de l’application elle-même.

Emplacements d’une démo d’application et leurs règles
EmplacementQuoi utiliserRègles à connaître

Votre page de présentation

Un film 16:9 en haut de page, un film 9:16 pour les visiteurs sur mobile

Écrire pour une lecture sans le son : les sous-titres portent l’histoire

Posts et galeries de lancement

Le film 16:9, 45 à 60 secondes

Une tâche, montrée de bout en bout

README ou page GitHub

Une image d’aperçu reliée à la page du film

Gardez le premier écran du README pour la commande d’installation

Réseaux sociaux

Le film 9:16

L’essentiel dans les premières secondes

Aperçu App Store d’Apple

Des images capturées dans l’application

Jusqu’à 30 secondes, jusqu’à trois aperçus par langue, uniquement du contenu de l’app, lecture muette par défaut

Vidéo d’aperçu Google Play

Un lien YouTube vers des images de l’app

Seules les 30 premières secondes se lancent automatiquement (en muet) ; au moins 80 % de la vidéo doit montrer l’expérience réelle dans l’app ; publicités désactivées

Pour une application native, un film de votre page de présentation ne peut donc pas servir d’aperçu dans les stores : Apple n’accepte que du contenu issu de l’application, et Google Play veut que l’essentiel de la vidéo montre l’expérience réelle (voir les sources). Il reste utile sur la page qui envoie les visiteurs vers le store. Pour une application web sans fiche dans un store, c’est la démo. Pour réussir un montage vertical, lisez comment faire des vidéos verticales pour TikTok et Reels.

Lancer vos démos depuis l’IDE ou la chaîne de déploiement

Un développeur veut rarement un tableau de bord de plus. Deux façons de rester là où vous travaillez :

  1. Connecter le serveur MCP

    Ajoutez PageToVid à Cursor ou VS Code (ou à Claude, ChatGPT) comme serveur MCP ; la configuration est sur la page MCP et dans faire des vidéos avec Claude via MCP. Disponible sur tous les plans.

  2. Demander le film en langage courant

    « Une démo 9:16 de 45 secondes de https://votre-app.example, centrée sur la création d’un salon, qui se termine sur “Commencer gratuitement”. » L’assistant peut d’abord inspecter la page dans le format choisi, pour que les plans visent le produit et pas seulement le bandeau d’accueil.

  3. Relire le storyboard, puis lancer le rendu

    Lisez les scènes, corrigez une phrase ou repointez un plan, puis lancez le rendu : 40 crédits par film, environ 10 minutes. Le premier film sur n’importe quel site est gratuit, avec un petit badge.

  4. Refaire le rendu à chaque version

    Quand un déploiement modifie un écran montré dans la démo, appelez l’API depuis votre CI et recevez un webhook quand le nouveau film est prêt. La méthode est dans automatiser des vidéos avec l’API.

Un conseil tiré de nos propres rendus : pointez le film vers une route publique stable, pas vers un déploiement de prévisualisation qui disparaît après la fusion.

Les erreurs que nous voyons dans les démos d’application

  • Un tableau de bord de bureau filmé en 9:16. Le vertical filme votre version mobile. Si elle a été bâclée, corrigez-la ou faites la démo en 16:9.
  • Une application vide. Un compte neuf sans salon, sans projet, sans données, c’est la démo d’un écran blanc. Remplissez-le.
  • Filmer la page de présentation et l’appeler gameplay. Pour une fiche de store, cela enfreint les règles ci-dessus ; sur votre site, dites « voici ce qu’elle fait », pas « regardez-moi jouer ».
  • Toutes les fonctions à la fois. Un seul parcours : ouvrir, faire l’action principale, voir le résultat.

D’autres films verticaux et la démarche correspondante sont sur le cas d’usage vidéos TikTok ; pour un outil de bureau, le cas d’usage vidéo démo SaaS convient mieux.

Ce que ça coûte à un développeur indépendant

Votre premier film sur n’importe quel site est gratuit, sans carte ; les films gratuits portent un petit badge et un écran de fin. Un film sans abonnement, badge retiré, coûte 3,90 $. Le plan Creator à 19 $ par mois couvre 25 films, de quoi faire une version 16:9 et une version 9:16 à chaque mise à jour. Un nouveau rendu après un changement d’interface coûte un rendu. Les clips générés par IA, pour les plans que votre site ne peut pas montrer, sont réservés aux plans payants, à 311 crédits le clip de 8 secondes. Le détail est sur la page tarifs, et si vous comparez avec des outils à avatars ou à banques d’images, les pages de comparaison disent honnêtement où chacun l’emporte.

Quand s'en passer

Quand un développeur ne devrait pas utiliser PageToVid

Les aperçus de store d’une application native. Enregistrez l’application elle-même : le simulateur iOS ou QuickTime avec votre iPhone branché, l’enregistrement de l’émulateur d’Android Studio, puis un découpage dans CapCut ou iMovie. C’est ce que demandent Apple et Google.

Un jeu dont la sensation est l’argument. Fluidité, commandes et son exigent une vraie capture de jeu, par exemple avec OBS.

Une longue visite technique. Un tour de 15 minutes de votre SDK, c’est un enregistrement d’écran avec votre voix, dans Loom ou OBS.

Une conférence ou une histoire de fondateur. Prenez une caméra et montrez votre visage.

Transformez votre site en vidéo — gratuitement

Collez la page à filmer. PageToVid écrit le script, filme le vrai site, enregistre la voix et livre le MP4.

Première vidéo offerte · sans carte · prête en quelques minutes

Questions fréquentes

Puis-je utiliser un film PageToVid comme aperçu App Store ?

Pas pour une application native. Apple indique que les aperçus ne doivent montrer que du contenu de l’application, et Google Play veut qu’au moins 80 pour cent d’une vidéo d’aperçu montre l’expérience réelle dans l’app. Un film de votre page de présentation a sa place sur cette page, dans vos posts de lancement et sur vos réseaux.

Le 9:16 recadre-t-il mon site de bureau ?

Non. Le 9:16 charge votre site dans un écran de téléphone et filme sa version mobile, la même version responsive que vos utilisateurs voient sur leur smartphone. Le 16:9 et le 1:1 filment la version bureau.

Peut-on créer des vidéos de démo depuis Cursor ou VS Code ?

Oui. Ajoutez le serveur MCP de PageToVid à votre éditeur et demandez en langage courant un film d’une URL. L’assistant peut inspecter la page, rédiger le storyboard et lancer le rendu, sur tous les plans.

Une démo peut-elle être refaite automatiquement à chaque version ?

Oui, via l’API : lancez un rendu depuis votre CI quand une version modifie un écran montré dans la démo, et recevez un webhook quand le nouveau film est prêt. Chaque rendu coûte 40 crédits.