angularjs + youtube iframe api

ZeZeN
Javascript

Bonjour,

Je bosse sur un projet en angularjs en ce moment dans lequel je dois intégrer des vidéos youtube sur une page (on a 50 vidéos par pages) il faut que j'ai acces aux controles des vidéos avec les mêmes boutons ce qui implique qu'une seule vidéo soit chargée à la fois.

Je dois pouvoir proposer un bouton "lecture / pause" et détecter la fin des vidéos.
C'est chose aisée quand on a un conteneur où l'on charge les vidéos via une directive mais pour moi chaque vidéo doit aparaître à la demande dans un conteneur différent.

j'ai fait un plunker pour vous montrer un début de réflexion sur le sujet.

En gros mon idée serait de trouver un moyen de recharger la directive à chaque fois que je réintègre une nouvelle iframe au clic sur un des conteneurs sans recharger la page entière.

Aurriez-vous des pistes pour m'aider de préférence en faisant un fork de ce plunker ?
Quelqu'un a-t-il déjà eu ce problème ?

Je suis encore débutant sur angular, ne m'en voulez pas si j'ai fait de mauvaises choses mais je suis tout ouïe si vous avez des suggestions d'améliorations ...

Merci d'avance!

3 réponses

ZeZeN
Auteur
Réponse acceptée

Mince, j'y avais pas pensé!!!

Mais du coup j'ai oublié la directive !

J'ai fait ça directement dans le scope. A l'appuie sur le container de mon choix, je vide le container du player en cours, puis j'injecte un nouveau player dans le nouveau container, sans passer par une directive.

C'est même faisable sans angular, du coup le player a toujours le même nom, je peux donc controler les différents players avec les mêmes boutons puisqu'un seul player ne peut exister à la fois ... :)

la preuve :
http://jsfiddle.net/eLt4aybd/2/

Merci Grafikart depuis le temps que je te regarde sur youtube, c'est un honneur d'avoir eu une réponse de ta part !
Bien joué pour ton nouveau site, j'adore :)

ZeZeN

ZeZeN
Auteur
up! :)

j'ai trouvé ça :
http://jsfiddle.net/eLt4aybd/1/

je vais voir si je peux simplifier ce que j'ai fait et le faire fonctionner comme voulu...
J'aurais espéré des réponses ... je suis toujours preneur d'ailleurs !!! :)

Merci quand même !

Grafikart

J'ai du mal à comprendre ce que tu veux dire par recharger l'iframe. Ce que tu peux faire dans ta directive c'est watch une expression au niveau du $scope et lancer une opération à chaque changement de cette variable.