Aller au contenu
WebViewGold Du vibe coding à l'App Store
Français
Obtenir WebViewGold

Bolt + vidéo et audio

Lecture vidéo et audio native pour votre app Bolt

Une balise vidéo HTML5 fonctionne dans l'app, mais les longues leçons y paraissent à l'étroit et la lecture s'arrête généralement dès que l'utilisateur change d'app. Avec WebViewGold, votre app Bolt confie l'URL d'un flux au lecteur natif grâce à un simple lien (startnativevideo://) : vos spectateurs profitent du plein écran et du Picture-in-Picture sur les deux plateformes, et d'AirPlay sur iPhone. Sur iOS, vous pouvez aussi laisser l'audio HTML continuer en arrière-plan pour les podcasts, la radio et les cours audio.

Dès $109 en paiement unique par plateforme, ou notre équipe s'occupe de tout dès $698.

  • Garantie d'approbation – ou remboursement sous 14 jours
  • Aucun codage requis
  • Paiement unique, mises à jour gratuites
  • Support humain 24/7
  • Conçu en Allemagne depuis 2014 · ISO 27001

Ce que le lecteur natif apporte

Lecteur natif avec Picture-in-Picture

Faites pointer un lien vers startnativevideo://videostreamurl= suivi de l'URL directe d'un flux, et WebViewGold ouvre le lecteur vidéo du système sur iOS et Android. Les utilisateurs peuvent réduire la vidéo dans une fenêtre flottante et continuer à parcourir l'app, voire passer à une autre app.

AirPlay et des commandes familières

Sur iPhone et iPad, le lecteur natif apporte AirPlay, le plein écran et les commandes de lecture standard que les utilisateurs connaissent déjà. Aucune bibliothèque de lecteur à maintenir dans l'app web.

Audio en arrière-plan sur iOS

Pour les podcasts, les flux radio, les méditations et les leçons audio, la configuration HTML background audio permet à l'audio de l'app web de continuer quand l'iPhone est verrouillé ou qu'une autre app est au premier plan. Il s'agit d'un réglage du projet Xcode, présenté pas à pas dans la vidéo de la documentation iOS.

Uniquement des URL de flux directes

Le lecteur natif a besoin d'un fichier .mp4 ou d'un flux HLS .m3u8, pas de l'URL d'une page qui intègre une vidéo. Les hébergeurs de streaming comme Mux, Cloudflare Stream ou Bunny Stream vous fournissent des URL HLS ; les pages YouTube et Vimeo restent des intégrations classiques.

Prompt pour Bolt

Collez ceci dans Bolt pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.

Prompt à coller dans Bolt
Préparez la lecture vidéo et audio pour notre app native WebViewGold. Ajoutez un composant MediaPlayer : dans les navigateurs classiques, il affiche un élément vidéo HTML5 avec controls, playsinline et un poster ; quand navigator.userAgent contient "WebViewGold", il affiche un bouton Lecture qui définit window.location.href sur "startnativevideo://videostreamurl=" + streamUrl, où streamUrl est un lien .mp4 direct ou HLS .m3u8. Créez une Netlify Function get-stream-url qui vérifie le token d'accès Supabase de l'en-tête Authorization, contrôle que l'utilisateur a le droit de regarder la leçon et renvoie une URL Supabase Storage signée valable deux heures, en utilisant SUPABASE_SERVICE_ROLE_KEY depuis l'environnement Netlify. N'exposez jamais cette clé via une variable VITE_. Pour la page podcast, gardez un élément audio standard avec controls et un bouton de lecture visible. Affichez un état d'erreur clair si l'URL du flux ne peut pas être chargée.

Mon WebView iOS est enfin approuvé. Merci !!

Taha Farooqui · CodeCanyon

Ajouter la lecture native étape par étape

Environ 30 minutes, dont l'essentiel pour les tests sur de vrais téléphones.

  1. Obtenez une URL de flux directe

    Utilisez un fichier .mp4 de votre stockage ou une playlist HLS .m3u8 de votre hébergeur vidéo. Les longues leçons passent mieux en HLS, car le lecteur adapte la qualité à la connexion.

  2. Rendez l'URL lisible à elle seule

    Le lecteur natif charge le flux lui-même et peut ne pas voir la session de connexion de la WebView. Pour les leçons payantes, créez côté serveur une URL signée de courte durée après avoir vérifié l'accès, et transmettez-la.

  3. N'appelez le pont que dans l'app

    Définissez un user agent personnalisé contenant un token comme WebViewGold (useragent_iphone et useragent_ipad dans Config.swift, USER_AGENT dans Config.java). S'il est présent, le bouton Lecture navigue vers startnativevideo://videostreamurl= suivi de l'URL du flux ; dans un navigateur, c'est l'élément <video> habituel qui lit la vidéo.

  4. Activez l'audio en arrière-plan si nécessaire (iOS)

    Uniquement pour les apps dont l'audio doit continuer écran verrouillé. Suivez la vidéo HTML background audio de la documentation iOS, puis testez avec le téléphone verrouillé et avec une autre app au premier plan.

  5. Testez comme un spectateur

    Lancez une vidéo, ouvrez le Picture-in-Picture, passez à une autre page, verrouillez le téléphone, basculez en mode paysage et essayez une connexion mobile lente. Faites-le sur un iPhone et sur un téléphone Android.

Une fonction de lecture pour l'app et le navigateur

Une seule fonction pour les deux mondes. L'URL de flux signée vient de la partie serveur de votre stack : Supabase, Firebase ou votre propre API.

javascript
// User agent personnalisé contenant "WebViewGold", défini dans Config.swift / Config.java
var IN_APP = navigator.userAgent.indexOf("WebViewGold") !== -1;

// streamUrl : .mp4 direct ou HLS .m3u8 (signée et de courte durée pour les contenus payants)
function playVideo(streamUrl, videoEl) {
  if (IN_APP) {
    window.location.href = "startnativevideo://videostreamurl=" + streamUrl;
  } else {
    videoEl.src = streamUrl; // hors Safari, HLS nécessite une bibliothèque comme hls.js
    videoEl.play();
  }
}

// Dans le navigateur, gardez un lecteur classique :
// <video controls playsinline preload="metadata" poster="/poster.jpg"></video>

Règles des stores et règles de contenu

  • Guideline 2.5.4 d'Apple : les services en arrière-plan doivent servir à l'usage prévu. N'activez l'audio en arrière-plan que si l'app lit un audio que l'utilisateur s'attend à continuer d'entendre (podcast, radio, cours audio), et indiquez à l'examinateur dans les notes de validation où le trouver.
  • Les cours et vidéos premium vendus dans l'app iOS sont des contenus numériques : Apple attend l'achat intégré (guideline 3.1.1), et Google Play Billing s'applique sur Android. Voir les achats intégrés pour les apps vibe-codées.
  • Ne diffusez que ce dont vous détenez les droits. Les apps remplies de films, de sport ou de chaînes TV de tiers reçoivent des questions sur les licences (guideline 5.2 sur la propriété intellectuelle).
  • Un catalogue vidéo seul peut ressembler à un site web (guideline 4.2). La lecture native avec Picture-in-Picture, des rappels push pour les nouvelles leçons et un écran hors ligne soigné plaident ensemble en faveur d'une app.
  • Android : la documentation WebViewGold décrit le lecteur vidéo natif avec Picture-in-Picture, pas d'option d'audio en arrière-plan. Testez ce que fait votre audio quand l'app est réduite, et ne promettez pas la lecture écran verrouillé dans la fiche Play tant que vous ne l'avez pas vérifiée.

Questions fréquentes

Puis-je lire des vidéos YouTube ou Vimeo dans le lecteur natif ?

Pas via startnativevideo://, qui a besoin d'un fichier .mp4 direct ou d'un flux HLS .m3u8. Les intégrations YouTube et Vimeo continuent généralement de fonctionner comme des iframes classiques dans l'app, avec leur propre lecteur et leur bouton plein écran.

Le Picture-in-Picture fonctionne-t-il sur iOS et Android ?

Oui. Les documentations iOS et Android décrivent toutes deux startnativevideo:// avec Picture-in-Picture : la vidéo continue dans une fenêtre flottante pendant que l'utilisateur parcourt l'app ou une autre app.

L'audio continue-t-il quand l'écran est verrouillé ?

Sur iOS, oui, une fois l'audio HTML en arrière-plan activé dans le projet Xcode comme le montre la documentation iOS. Sur Android, la documentation WebViewGold ne décrit pas de mode audio en arrière-plan : testez votre lecteur sur un appareil avant de le promettre.

Ai-je besoin de l'achat intégré pour les vidéos payantes de mon app Bolt ?

Si l'app elle-même vend le cours ou l'abonnement, oui : Apple attend l'achat intégré pour les contenus numériques (guideline 3.1.1) et Google attend Play Billing. Les contenus achetés sur votre site web peuvent souvent être débloqués aussi dans l'app ; vérifiez le texte actuel des guidelines 3.1.1 et 3.1.3, car les règles sur les liens d'achat externes varient selon les régions.

Les utilisateurs peuvent-ils télécharger des vidéos pour les regarder hors ligne ?

Les liens qui se terminent par .mp4 sont pris en charge par le gestionnaire de téléchargement de WebViewGold, qui enregistre le fichier sur l'appareil. Une bibliothèque hors ligne complète dans l'app web Bolt est un projet plus conséquent ; pour la plupart des apps de cours, le streaming plus l'écran hors ligne natif suffisent.

Trois façons de mettre votre app dans les stores

Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.

Faites-le vous-même

$109 par plateforme, paiement unique

La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.

Voir les offres sur la page principale

Full Service

$698 par plateforme $798

Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.

Détails du Full Service Propulsé par WeSetupYourWebViewApp

Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.

Prêt à publier votre app Bolt ?

Garantie d'approbation App Store & Google Play – ou remboursement sous 14 jours

Vous préférez déléguer ? Full Service : nous configurons, compilons et livrons sous 72 heures, dès $698 par plateforme. Des questions ? Chattez avec nous 24/7.

Les remboursements sont accordés aux conditions indiquées dans notre FAQ : un refus non lié au contenu par Apple et/ou Google, demandé dans les 14 jours suivant l'achat.