DéveloppeursDocsFournisseurs
Connexion
Yeria
Utilisateurs
Développeurs
Connexion
Documentation

MediaView

Lecture audio et vidéo, playlists et posters.

Description

Le composant MediaView regroupe des ressources audio et vidéo dans une liste de lecture homogène, destinée à la lecture sur mobile. Il prend en charge plusieurs éléments média, avec leurs sources, leurs affiches et leurs contrôles de lecture.

Notes de rendu

Une MediaView est un lecteur assorti d’une liste de lecture facultative — et NON un carrousel ou un pager. Les moteurs de rendu doivent :

  • Afficher un seul lecteur pour l’élément sélectionné (affiche + contrôles de lecture natifs ; plein écran pour la vidéo, lecture intégrée avec contrôles pour l’audio).
  • Lorsque content.items comporte plus d’un élément, afficher une liste de lecture (une liste sélectionnable des éléments) afin que l’utilisateur puisse charger n’importe quel élément dans le lecteur. Avec un élément unique, n’afficher que le lecteur.
  • Ne pas présenter les éléments comme des pages plein écran défilantes (c’est le rôle de CarouselView).

content.title désigne le titre de la liste de lecture ; chaque entrée de items[] constitue une ressource lisible indépendamment, décrite par ses sources, son poster et ses indicateurs de lecture.

Description des champs

idstringrequis
Identifiant unique de la vue média
typestringrequis
Toujours "Media"
contentMediaContentrequis
Objet de contenu média
content.titlestringrequis
Titre de la liste de lecture
content.introstringoptionnel
Texte d’introduction affiché avant les éléments média
content.itemsMediaItem[]requis
Tableau d’éléments média (au moins un requis)
content.items[].idstringrequis
Identifiant unique de l’élément média
content.items[].kindstringrequis
Nature du média : "audio" ou "video"
content.items[].titlestringoptionnel
Titre du média
content.items[].descriptionstringoptionnel
Descriptif du média
content.items[].posterstringoptionnel
URL de l’image d’affiche (pour la vidéo)
content.items[].autoplaybooleanoptionnel
Lecture automatique du média (défaut : false)
content.items[].loopbooleanoptionnel
Lecture en boucle du média (défaut : false)
content.items[].controlsbooleanoptionnel
Afficher les contrôles de lecture (défaut : true)
content.items[].selectedbooleanoptionnel
Marque l’entrée présentée en premier dans le lecteur. À positionner via setSelectedItem(id) (qui désélectionne toutes les autres) — ne jamais le renseigner manuellement sur plusieurs éléments. Par défaut, il s’agit du premier élément. À combiner avec autoplay pour démarrer la lecture dès l’ouverture.
content.items[].sourcesMediaSource[]requis
Tableau de sources média (au moins une requise)
content.items[].sources[].srcstringrequis
URL de la source média
content.items[].sources[].typestringoptionnel
Type MIME (par ex. "video/mp4", "audio/mpeg")
content.items[].metaRecord<string, unknown>optionnel
Métadonnées facultatives
processIdstringoptionnel
Identifiant de processus pour les parcours en plusieurs étapes
metadataobjectoptionnel
Métadonnées de la vue (version, createdAt, author, tags)

Méthodes

setIntro(intro)→ this
Définit le texte d’introduction affiché avant les éléments média
  • intro - Texte d’introduction
addMediaItem(item)→ this
Ajoute une entrée média prête à être lue (selected est ignoré ici — utilisez setSelectedItem)
  • item - Objet MediaItem
setSelectedItem(id) (py: set_selected_item)→ this
Marque cette entrée comme celle présentée en premier ; efface selected sur toutes les autres, afin qu’une seule reste sélectionnée
  • id - identifiant de l’élément média
createMedia(id, kind, src, options?)→ MediaItem
Crée un objet élément média (sans l’ajouter)
  • id - Identifiant du média
  • kind - Nature du média ('audio' ou 'video')
  • src - URL de la source média
  • options - Options du média (type, title, description, poster, autoplay, loop, controls)
clearItems()→ this
Supprime tous les éléments média
getContent()→ MediaContent
Renvoie l’objet de contenu média complet
serve()→ Record<string, unknown>
Diffuse la vue après validation (hérité de BaseView)
toJSON()→ Record<string, unknown>
Renvoie la représentation JSON (hérité de BaseView)
setState(key, value)→ void
Définit l’état de la vue (hérité de BaseView)
  • key - Clé d’état
  • value - Valeur d’état
getState(key)→ unknown
Lit l’état de la vue (hérité de BaseView)
  • key - Clé d’état
setNext(url)→ this
Définit la navigation vers la vue suivante (hérité de BaseView)
  • url - URL de la vue suivante
setPrev(url)→ this
Définit la navigation vers la vue précédente (hérité de BaseView)
  • url - URL de la vue précédente
setProcess(processId, context?)→ this
Définit le contexte de processus (hérité de BaseView)
  • processId - Identifiant de processus
  • context - Contexte du processus

Exemples de code JavaScript

Vue média simple

javascript
1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const mediaView = yeriaApp
6    .createMediaView('media-library', 'Tutorials')
7    .setIntro('Learn in a few minutes')
8    .addMediaItem(
9        mediaView.createMedia('video-intro', 'video', 'https://example.com/videos/intro.mp4', {
10            type: 'video/mp4',
11            title: 'Introduction Video',
12            poster: 'https://example.com/posters/intro.jpg'
13        })
14    );
15
16const response = yeriaApp.serve(mediaView);

Vue média avec de l’audio

javascript
1const mediaView = yeriaApp
2    .createMediaView('audio-library', 'Audio Guides')
3    .setIntro('Listen to our audio guides')
4    .addMediaItem({
5        id: 'audio-guide',
6        kind: 'audio',
7        title: 'Getting Started Guide',
8        description: 'Learn the basics in 5 minutes',
9        sources: [
10            { src: 'https://example.com/audio/guide.mp3', type: 'audio/mpeg' }
11        ],
12        controls: true
13    });

Vue média à plusieurs sources

javascript
1const mediaView = yeriaApp
2    .createMediaView('video-library', 'Video Tutorials')
3    .setIntro('Watch our video tutorials')
4    .addMediaItem({
5        id: 'tutorial-1',
6        kind: 'video',
7        title: 'Tutorial 1',
8        description: 'First tutorial video',
9        poster: 'https://example.com/posters/tutorial1.jpg',
10        sources: [
11            { src: 'https://example.com/videos/tutorial1.mp4', type: 'video/mp4' },
12            { src: 'https://example.com/videos/tutorial1.webm', type: 'video/webm' }
13        ],
14        controls: true,
15        autoplay: false,
16        loop: false
17    });

Vue média en lecture automatique

javascript
1const mediaView = yeriaApp
2    .createMediaView('promo-videos', 'Promotional Videos')
3    .setIntro('Watch our promotional content')
4    .addMediaItem(
5        mediaView.createMedia('promo-1', 'video', 'https://example.com/videos/promo.mp4', {
6            type: 'video/mp4',
7            title: 'Promotional Video',
8            poster: 'https://example.com/posters/promo.jpg',
9            autoplay: true,
10            loop: true,
11            controls: true
12        })
13    );

Vue média à plusieurs éléments

javascript
1const mediaView = yeriaApp
2    .createMediaView('playlist', 'Media Playlist')
3    .setIntro('Browse our media collection')
4    .addMediaItem(
5        mediaView.createMedia('video-1', 'video', 'https://example.com/videos/video1.mp4', {
6            type: 'video/mp4',
7            title: 'Video 1',
8            poster: 'https://example.com/posters/video1.jpg'
9        })
10    )
11    .addMediaItem(
12        mediaView.createMedia('audio-1', 'audio', 'https://example.com/audio/audio1.mp3', {
13            type: 'audio/mpeg',
14            title: 'Audio 1'
15        })
16    )
17    .addMediaItem({
18        id: 'video-2',
19        kind: 'video',
20        title: 'Video 2',
21        description: 'Second video',
22        poster: 'https://example.com/posters/video2.jpg',
23        sources: [
24            { src: 'https://example.com/videos/video2.mp4', type: 'video/mp4' }
25        ]
26    });

Vue média — vidage des éléments

javascript
1const mediaView = yeriaApp
2    .createMediaView('dynamic-media', 'Dynamic Media')
3    .setIntro('Dynamic media playlist')
4    .addMediaItem(
5        mediaView.createMedia('item-1', 'video', 'https://example.com/video1.mp4', {
6            type: 'video/mp4'
7        })
8    );
9
10// Clear all items
11mediaView.clearItems();
12
13// Add new items
14mediaView.addMediaItem(
15    mediaView.createMedia('new-item-1', 'video', 'https://example.com/new-video.mp4', {
16        type: 'video/mp4',
17        title: 'New Video'
18    })
19);

Vue média dans un parcours à étapes

javascript
1const mediaView = yeriaApp
2    .createMediaView('onboarding-media', 'Onboarding Tutorials')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 2,
6        totalSteps: 3
7    })
8    .setIntro('Watch these tutorials to get started')
9    .addMediaItem(
10        mediaView.createMedia('intro-video', 'video', 'https://example.com/intro.mp4', {
11            type: 'video/mp4',
12            title: 'Introduction',
13            poster: 'https://example.com/intro-poster.jpg',
14            controls: true
15        })
16    )
17    .addMediaItem({
18        id: 'guide-audio',
19        kind: 'audio',
20        title: 'Quick Guide',
21        description: '5-minute audio guide',
22        sources: [
23            { src: 'https://example.com/guide.mp3', type: 'audio/mpeg' }
24        ]
25    });

Exemple JSON complet

json
1{
2  "id": "tutorial-playlist",
3  "type": "Media",
4  "content": {
5    "title": "Tutorials",
6    "intro": "Learn in a few minutes",
7    "items": [
8      {
9        "id": "intro-video",
10        "kind": "video",
11        "title": "Introduction Video",
12        "description": "Get started with our platform",
13        "poster": "https://example.com/posters/intro.jpg",
14        "autoplay": false,
15        "loop": false,
16        "controls": true,
17        "sources": [
18          {
19            "src": "https://example.com/videos/intro.mp4",
20            "type": "video/mp4"
21          },
22          {
23            "src": "https://example.com/videos/intro.webm",
24            "type": "video/webm"
25          }
26        ],
27        "meta": {
28          "duration": 300,
29          "views": 1250
30        }
31      },
32      {
33        "id": "guide-audio",
34        "kind": "audio",
35        "title": "Quick Guide",
36        "description": "5-minute audio guide",
37        "autoplay": false,
38        "loop": false,
39        "controls": true,
40        "sources": [
41          {
42            "src": "https://example.com/audio/guide.mp3",
43            "type": "audio/mpeg"
44          }
45        ],
46        "meta": {
47          "duration": 300
48        }
49      },
50      {
51        "id": "advanced-tutorial",
52        "kind": "video",
53        "title": "Advanced Tutorial",
54        "description": "Learn advanced features",
55        "poster": "https://example.com/posters/advanced.jpg",
56        "autoplay": false,
57        "loop": false,
58        "controls": true,
59        "sources": [
60          {
61            "src": "https://example.com/videos/advanced.mp4",
62            "type": "video/mp4"
63          }
64        ]
65      }
66    ]
67  },
68  "process": {
69    "processId": "onboarding",
70    "processName": "User Onboarding",
71    "currentStep": 2,
72    "totalSteps": 3
73  },
74  "metadata": {
75    "version": "1.0.0",
76    "createdAt": "2025-01-28T10:00:00.000Z"
77  }
78}
← Précédent
TimelineView