Player / mise en place d'un système permettant de contrôler la lecture d'un guide par des liens externes

[semiaddict]

voir le devis 2015052602

AtriumID-513

[semiaddict]

changement de statut suite à la reception du bon de commande

[semiaddict]

J'ai créé une API JavaScript permettant de contrôler un player depuis la page HTML parent.
L'API est largement inspirée de celle de vimeo (voir https://developer.vimeo.com/player/js-api et https://github.com/vimeo/player-api pour plus de détails).

Le concept est relativement simple:

• Le script http://metascore.philharmoniedeparis.fr/sites/default/libraries/metaScore/metaScore.api.min.js doit être inclus dans la page HTML; ce script fait le pont entre la page HTML et l'iframe du player
• On ajoute le player avec un code embed récupéré depuis http://metascore.philharmoniedeparis.fr/en/embeder en cochant la case à cocher "API"

• On initialise un instance de l'API:

  new metaScoreAPI(iframe, callback);

  le paramètre iframe est l'element iframe du player, et le paramètre callback est une fonction appelée lorsque le player est prêt. Le callback reçoit l'objet qui permet de contrôler le player en paramètre.

Un exemple d'utilisation est ci-joint.

example_metascore_api.zip

[semiaddict]

Je réouvre cette tâche pour que vous puissiez spécifier les fonctionnalités désirées de l'API.

[semiaddict]

A priori les fonctionnalités seraient les suivantes :
- lire un extrait dans un index de lecture déterminé  --> possibilité de récupérer ces informations dans le guide lui-même où le lien aura été préalablement créé (probablement par un copier-coller dans la fenêtre du lien)
- aller à une page non sychronisée 

Lors du skype du 27 juillet 2015 est soulevé le problème de l'identifiation du guide au cas où plusieurs guides figureraient dans la même page --> il est décidé d'en rediscuter en septembre

Original comment by: @afborneuf

[semiaddict]

Bonjour,

Lors du Skype du 07/09/2015, il avait été convenu du format suivant pour les liens :

Texte du lien

Hors après réflexion, il me semble que le format suivant serait plus simple à lire et plus générique :

Texte du lien

L'attribut "data-action" indiquerait la méthode de l'API à appeler, et "data-args" contiendrait la liste d'arguments (séparés par des virgules) à envoyer. Dans l'exemple ci-dessus, l'action étant playExtract, avec les arguments 0 pour le TCI, 50 pour le TCO et 2 pour l'index de lecture.

Voici d'autres exemples appliquant ce format :

Texte du lien Texte du lien Texte du lien Texte du lien

Si cela vous convient, je propose d'adopter ce format pour les liens externes utilisant l'API, mais aussi pour les liens internes (en veillant à ce que cette modification soit rétroactive pour les guides déjà importés)

[semiaddict]

Ok c'est parfait
R;

Original comment by: @rbailly

[semiaddict]

Par contre il manque l'indice de lecture ?

Original comment by: @rbailly

[semiaddict]

L'indice de lecture est présent dans l'exemple de l'action playExtract qui prends les arguments TCI, TCO, et indice de lecture.
Voulez-vous que j'ajoute en plus une action "rIndex" pour modifier uniquement l'indice de lecture ?

[semiaddict]

Oui Oussama ! Au moins pour l'action "play". Ça me semble moins pertinent pour les autres actions.

Original comment by: @afborneuf

[semiaddict]

Donc si je comprend bien, il ne s’agit pas d'ajouter une nouvelle action, mais plutôt d'ajouter un argument optionnel à l'action "play" permettant de spécifier l'indice de lecture. C'est bien cela ?

[semiaddict]

J'ai mis à jour l'API et ajouté un parseur automatique de liens metaScore externes.
Un exemple d'utilisation est ci-joint.
Pour que les liens soit parsés automatiquement, ils doivent :

• avoir l'attribut "rel", et sa valeur doit être "metascore"
• avoir l'attribut "data-guide", et sa valeur doit être égale à l'identifiant de l'élément iframe du guide
• avoir l'attribut "data-action", et sa valeur indique le type d'action du lien (voir détail ci-dessous)
• si l'action prend des arguments, l'attribut "data-args" doit contenir leur valeurs séparées par des virgules

Les actions suivantes sont prises en charges :

• play, prend trois arguments (le TCI, le TCO et l'indice de lecture). exemples :

  <a href="#" rel="metascore" data-guide="guide-93" data-action="play">PLAY

  <a href="#" rel="metascore" data-guide="guide-93" data-action="play" data-args="20,500,2">PLAY EXTRACT

• pause, ne prend pas d'arguments. exemple :

  <a href="#" rel="metascore" data-guide="guide-93" data-action="pause">PAUSE

• seek, prend un seul argument (le temps de lecture en secondes). exemple :

  <a href="#" rel="metascore" data-guide="guide-93" data-action="seek" data-args="500">PLAY EXTRACT

• page : prend deux arguments (le nom du bloc et le numéro de la page). exemple :

  <a href="#" rel="metascore" data-guide="guide-93" data-action="page" data-args="permanentText,3">PLAY EXTRACT

example_metascore_api2.zip

[semiaddict]

Il me semble que cette tâche a été accomplie. Je la marque donc comme étant résolu.

[semiaddict]

Oussama, je teste cela cet après-midi. C'est super !

Par contre, pour l'action "page", je viens de me rendre compte qu'il pourrait être assez pertinent d'avoir un 3e argument : "indice de lecture". Est-ce possible ? Je suis désolée de te faire revenir dessus.

Du coup je ré-ouvre cette tâche.

Original comment by: @afborneuf

[semiaddict]

Bonjour Oussama,

Merci pour ce travail. Anne-Florence a testé l'intégration du guide dans la page suivante:

http://digital.philharmoniedeparis.fr/0750826-concerto-pour-piano-n-1-op-15-de-ludwig-van-beethoven.aspx

Le guide seul fonctionne mais pas l'appel depuis le texte ce qui nous semble normal car il manque metaScore.api.js. Nous travaillons demain avec Archimed pour l'ajouter et te tenons au courant.

Par contre nous avons commancé quelques tests (de pilotage depuis la page externe) de plateformes en prenant ta page test, en utilisant des versions à jour des navigateurs, dont voici les résultats:

- MAC, Safari : ne fonctionne pas (carré blanc à la place du guide)
- MAC, Firefox : ne fonctionne pas (carré blanc à la place du guide)
- MAC, Chrome : fonctionne
- PC, Firefox : ne fonctionne pas
- PC, Chrorme : fonctionne
- PC,  IE : fonctionne

Demain j'effectuerai des tests sur tablettes . . .

Merci !

Original comment by: @rbailly

[semiaddict]

Bonjour Rodolphe,

Je n'ai pas eu de problèmes avec Firefox (41.0) sous Mac OS X (10.9.4) ou Windows 8.1.
Merci de me donner le maximum d'information (version du OS, version du navigateur, etc) pour que je puisse reproduire le problème.

J'ai cependant réussi à reproduire et à résoudre le problème dans Safari (7.0.6).

J'ai également résolu un problème de saut de page au clique sur un lien d'API

Note: il est préférable d'utiliser metaScore.api.min.js au lieu de metaScore.api.js

[semiaddict]

Bonjour,

Suite à l'avancement dans l'intégration de CKEditor, et comme indiqué dans 547#4 je suis en train de modifier la structure des liens d'API.

Je compte replacé la structure indiqué dans #11.
Les liens externes aux guides devront désormais avoir la structure suivante pour qu'ils soit parsés automatiquement :

• avoir l'attribut "rel", et sa valeur doit être "metascore"
• avoir l'attribut "href", et sa valeur doit commencer par "#", suivie par la liste des actions à effectué séparées par des "&"
• si une action prend des arguments, le nom de l'action doit être suivi pas "\=" puis par les arguments séparés par des virgules

Les actions suivantes sont prises en charges :

• play, prend trois arguments (le TCI, le TCO et l'indice de lecture). exemples :

  PLAY

  PLAY EXTRACT

• pause, ne prend pas d'arguments. exemple :

  PAUSE

• seek, prend un seul argument (le temps de lecture en secondes). exemple :

  SEEL TO 500 SECONDS

• page : prend deux arguments (le nom du bloc et le numéro de la page). exemple :

  GOT TO PAGE 3 OF THE PERMANENTTEXT BLOCK

• rindex : prend un seul argument (l'indice du lecture). exemple :

  SET THE READING INDEX TO 2

Ce format permet de lancer plusieurs actions à partir d'un seul lien. Exemple:

GOT TO PAGE 3 OF THE PERMANENTTEXT BLOCK AND SET THE READING INDEX TO 2 AND SEEK TO 500 SECONDS

Je vais attendre notre prochain Skype pour en discuter avec vous avant de basculer vers ce nouveau format.

Bon weekend.

[semiaddict]

Je viens de modifier tous les liens de la page html où est embedé le guide test pour les rendre conformes à la nouvelle structure : ça marche très bien !
Merci Oussama.

Original comment by: @afborneuf

[semiaddict]

... par contre dans l'éditeur, le clic sur un lien déclenche bien la lecture, mais en ouvrant le guide dans une nouvelle page.

Original comment by: @afborneuf

[semiaddict]

Cela ne le fait pas chez moi (Chrome 45.0.2454.101m sous Windows 8.1).
Peux-tu vider le cache de ton navigateur et essayer de nouveau ?

[semiaddict]

Ok c'est bon Oussama... même sans avoir vidé le cache, c'est un mystère !

Original comment by: @afborneuf

[semiaddict]

J'ai remplacé les champs "Time In" et "Time Out" du plugin CKEditor de création de lien metaScore.
Je marque donc cette tâche comme étant résolu.

Voir les commits 90cb5a88, dc9ca05f, f546e133 et 08244b59

[semiaddict]

Ci-jointe une nouvelle version de l'exemple.

example_metascore_api3.zip