Ionic 3 • Creating a YouTube Video Player ! • Episode 15

On se retrouve aujourd'hui dans le quinzième épisode de notre série consacrée au développement d'une application hybride via le framework Ionic 3 pour iOS, Android et Windows Phone.
Dans cette épisode je vous présente comment créer de A à Z une application pour la plateforme KZbin.
C'est au travers de cet épisode que je vous présente comment lire des vidéos depuis une application Ionic. Pour mettre en place une telle fonctionnalité, je vous montre comment utiliser l'API de KZbin (KZbin Data API V3), effectuer des requêtes via un service et jouer une vidéo à l'aide d'un plugin Cordova.
Bien entendu, il est parfaitement possible de suivre cet épisode sous Windows, Mac ou Linux =)
POUR M'AIDER (MERCI !) : www.tipeee.com...
▬▬▬▬▬ Au programme ▬▬▬▬▬
► Création d'un projet depuis la console Google Developper
► Activation de KZbin Data API V3
► Création et implémentation d'un provider (service).
► Utilisation de Postman pour mettre en place nos requêtes HTTP.
► Création d'une interface.
► Exécution d'une requête GET HTTP via HTTPClient.
► Vérification de données lors de l'affichage (dans le bind).
► Utilisation du Loading controller.
► Lecture d'une vidéo via un Plugin natif iOS et Android.
▬▬▬▬▬▬▬ Liens ▬▬▬▬▬▬▬
► Épisode 13 (création d'une soundbox): • Ionic 3+ • Lire des fi...
► Épisode 5 (qu'est-ce qu'un service/une API ?): • Ionic 3+ • Intégration...
► Épisode 9 (intégration de Google Maps): • Ionic 2+ • Explication...
► Google developper console : bit.ly/2EBo34I
► Postman : bit.ly/2BHr67b
► JSON Editor Online : bit.ly/2o4Cvrs
► Documentation KZbin Data API V3 : bit.ly/2Elbd7s
► Documentation du plugin : bit.ly/2nUJjJa
Les routes utilisées dans le projet :
► www.googleapis.com/youtube/v3/videoCategories?part=snippet&regionCode=FR&key=CLE_API
► www.googleapis.com/youtube/v3/search?part=snippet&videoCategoryId=10&key=CLE_API&maxResults=10&type=video
►www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&key=CLE_API&regionCode=FR&maxResults=10
▬▬▬▬▬▬ Informations ▬▬▬▬▬▬
Bon visionnage !
J'espère que cette épisode vous plaira !
PS : N'hésitez pas à mettre en HD !
Retrouvez la série via sa playlist officielle : bit.ly/ionic2retro
N'hésitez pas à faire des suggestions dans les commentaires !
Si jamais des points abordés dans cet épisode ne sont pas clairs, dîtes-le moi !
▬▬▬▬▬▬ Musiques ▬▬▬▬▬▬
Nicolai Heidlas - Wings
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - Waiting For Tomorrow
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - Santa Claus Is Coming To Town Swing / Jazz Version
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - Sunday Morning
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - Point Of View
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - 50 New Cities
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - On And On
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Nicolai Heidlas - Sunny Afternoon
/ nicolai-heidlas
/ channel
www.facebook.c...
/ nheidlas
Merci pour les + de 10 700 abonnés !!
@+
► Pour soutenir la chaîne : www.tipeee.com...
► S'abonner à la chaîne : bit.ly/22j9tkU
► Twitter : / iphoneretro
► Facebook : bit.ly/20iX9iR
► Achetez vos jeux moins cher : www.instant-ga...
► Contribuer aux traductions de vidéos : bit.ly/2qN5bFL

[@jeremynoh4640]

Toujours aussi bon.... Vidéo claire et précise, Merci pour tes vidéos de qualités

[@dimitridessus]

Merci !!

[@بيانالحق-ع7ك]

merci beaucoup Mr Dimitri, vos videos sont trés claires et sympa pourtant j'aimerai bien que vous fassiez une video sur authentification fingerprint

[@dimitridessus]

Merci ! J’ai noté l’idée merci 😊

[@mohamedfall9702]

Bonsoir je voudrai que vous faites une vidéo qui apprend comment enregistrer une vidéo dans Firebase avec Ionic.

[@pecheopoint7403]

merci encore pour cette vidéo ! le lecteur youtube améliorer serait très sympas pour la suite !

[@dimitridessus]

C'est noté merci pour ta suggestion :)

[@romsteak]

Superbe vidéo dimitri merci, j'aurais une idée de vidéo, intégrer ionic dans electronjs afin de faire une application desktops.

[@dimitridessus]

Je compte faire une vidéo sur Electron prochainement :)

[@romsteak]

OK super j'ai hâte de la voir !! Peut tu répondre a mon commentaire sur l’épisode 6 j'ai un petit problème Merci

[@jaurestankeunzeyem2123]

toujours cool tes videos merci dimitri; pour la prochain je suis pour une application de chat instantanée

[@dimitridessus]

Merci !!

[@KingOsX77]

Merci beaucoup pour ton travail

[@dimitridessus]

Merci à toi du soutien !!!

[@yassinerassy5912]

bro tres bon travail chef

[@dimitridessus]

Merci !

[@mukengakapeta7718]

salut dimitris, tout marche nikel je e fait , mais un petit soucis, quant je Clic sur la vidéo, la méthode openvideo n'est pas reconnu, et d’ailleurs dans le home.ts y a pas cette méthode ou fonction openvideo voici l'entete du message Cannot read property 'openVideo' of undefined at Object.eval [as handleEvent] (MesvideoKZbinPage.html:33)

[@MacTime89]

Bonjour, Je souhaiterais savoir si il est possible d’empêcher de toucher a la timeline de la vidéo ? Je souhaiterais synchroniser tout les utilisateurs sur cette vidéo sans qu'ils puissent avancer. Comment faire ? Encore merci pour ces tutos de qualité

[@hugoblanc1999]

Jolie vidéo, mais comment gérer les quotas imposé par youtube ? On a le droit qu'a 10000 unit per day en mode non authentifié. Inutilisable donc dans une application sur les stores ...

[@dimitridessus]

Hello, c’est une nouvelle limite que Google a mis en place (c’est similaire avec Google Maps). Je suis parfaitement d’accord que c’est très limite quand on ne souhaite pas payer mais malheureusement je ne suis pas Google 🤷‍♂️

[@assithibaut5792]

A quand la prochaine vidéo: création d'une belle intro animée flash?

[@bomienkouadionarcisse3709]

Bjr Dimitri, Vraiment merci pour le vidéo elle est superbe .... Mais j'ai un souci une erreur ..... dans la home pae causée par le : : 'default' .... ERROR TypeError: Cannot read property 'default' of undefined at Object.eval [as updateRenderer]

[@srongtin576]

Hi bro, for KZbin Video Player can we display it on page, i mean i don't want it pop up for default, can we add it in ionic page? thank you.

[@manuelsefaitdesfilms4013]

Salut Dimitri , j'avais débuté tes vidéos mais j'ai relâché quand on est passé de la V2 a la 3 ! du coup vu que tu continue , je me demandais si il n'y avait des choses obsolète ou dépréciée dans les premier épisode ?

[@dimitridessus]

Hello, contrairement à la V1 vers la V2, rien n'a réellement changé côté code. Pour être franc et 100% transparent avec toi, je dirais que la seule vidéo "obsolète" est le premier épisode (et encore c'est pas grand chose). Sans vouloir faire de placement de vidéo :p j'ai fais une vidéo sur la transition de Ionic V2 à Ionic V3 :)

[@manuelsefaitdesfilms4013]

super merci, pour la reponse , je vais tout de suite voir cette dernière , ^^ fait tout les placement que tu veux :p , tant que je progresse moi c'est le plus important

[@_pol8413]

Coucou pourrait tu montrer comment mettre sur le play store ou app strore l’application crée

[@dimitridessus]

Hello ça arrive (.... très très prochainement #teasing 😉)

[@srongtin576]

Your video awesome, but i am really poor that follow you and fail when i add KZbin Video Player to my app. so could you send this sample app for us. I MANY THANK FOR YOUR HELP.

[@dimitridessus]

Hello, you can find all samples on my GitHub page : github.com/istornz/IonicKZbinPlayerEp15 👌

[@srongtin576]

TheiPhoneRetro thank you so much 😍