Avec l’IA, il parait qu’il suffit de savoir poser des questions et qu’il n’est plus nécessaire de savoir coder. Je ne sais pas ce que sait l’IA donc je ne suppose pas qu’elle a lu toute la documentation technique et je l’aide un peu en lui disant ce que je sais comme simple utilisateur.
Ma question, posée promptement…
"- Crée une page qui affiche une carte OpenStreetMap et localise les vidéos de ma playlist, qui sont hébergées chez Streamlike. Toutes les informations dont tu as besoin sont retournées par le webservice "playlist" qui est appelé ainsi : https://cdn.streamlike.com/ws/playlist?playlist_id=4420f0d43d93ccd0 - Chaque item est une vidéo dont tu récupères le media_id. La position de chaque vidéo est donnée par les valeurs de latitude et longitude. Utilise la plus petite vignette (thumbnail_url) comme marqueur du POI. - Au clic sur une vignette, affiche le lecteur vidéo au dessus du POI dans une bulle de 200px de haut. Voici un exemple de code d'intégration d'une vidéo: <div style="position: relative; width: calc(250px * 1.778); max-width: 100%; max-height: 250px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;"><div style="position: relative; width: 100%; padding-bottom: calc(100% / 1.778);"><iframe src="https://cdn.streamlike.com/play?med_id=5096db75da2d6c26" mozallowfullscreen webkitallowfullscreen allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"></iframe></div></div>"
Au vu du premier résultat, j’ai demandé une petite amélioration :
"- Lorsque les vidéos sont proches les unes des autres, affiche une pastille indiquant leur nombre, au lieu de superposer les vignettes. Un clic sur une pastille zoome et les sépare ; en zoomant suffisamment, chaque vignette redevient un marqueur individuel."
Si je veux intégrer le résultat dans mon site WordPress, je n’ai qu’à demander à ajuster le code pour pouvoir le coller dans un bloc de mon CMS.
Et voilà le travail :
A vous d’essayer
Soumettez le même « prompt » à votre agent IA préféré et voyez ce que vous obtenez. Ou adaptez-le, ajoutez des exigences, expérimentez…
En moins de 5 minutes, je parie que vous saurez ajouter un moteur de recherche pour filtrer les vidéos ou adapter la taille des vignettes à la durée ou au nombre de vues !
Si vous avez d’autres idées, décrivez-les et n’hésitez pas à renvoyer votre agent vers le SDK Streamlike sur github ou la documentation technique; Elle saura quoi en faire!