Test de la visionneuse Flowplayer


Vidéomodel test Caractéristique modifiable de la vidéo
type de circuit composants du circuit

Documentation sur Flowplayer



Choix de la visionneuse


Après plusieurs tests sur d'autre lecture de vidéo internet, nous avons choisis Flowplayer car il permet une compatibilité avec les différents navigateurs internet ainsi qu'avec les smartphone Android et IOS.
Elle lis parfaitement les vidéo mp4 codé en H.264 que fabrique le serveur qui crée les vidéos.

Fichier annexe


Pour lancer la visionneuse, il faut joindre au fichier les éléments suivants :
« flowplayer-3.2.7.swf » ,  « flowplayer-3.2.6.min.js », « flowplayer.controls-3.2.5.swf », ainsi que les liens vers les vidéos.

Fonctionnement de la visionneuse

Une fois la page chargée, la vidéo va se lancer automatiquement et va boucler sur elle-même ainsi si cette vidéo est courte, l'utilisateur aura l'impression que la vidéo ne s'arrête pas.

Remarque : Nous avons détecté deux petits problèmes : quand la visionneuse arrivé à la fin de la lecture, celle-ci ne lis pas la dernière seconde avant redémarrer ; et quand elle redémarre, elle affiche un cercle comme quoi elle relance la vidéo. Cela pourrait être quelque peu gênant mais même après plusieurs heures de recherche nous avons pas trouvé supprimer ces problèmes. Mais nous aurons peut-être pu palier au problème en créant des vidéo avec une seconde de blanc supplémentaire, qui ne sera de tout manière pas lu par Flowplayer.

Le skin par défaut de la visionneuse a été changé par un skin transparent qui a mon sens est plus approprié pour les vidéos que l'on utilise.

Nous avons également créer un système permettant de changer la vidéo sans changer de page ni même recharger celle-ci. Ce-là fonctionne grâce à un ou plusieurs menus déroulants dont l'utilisateur pourra sélectionner les vidéos qui désire voir, puis un bouton permettra de rendre effectif le changement. Coté programmation, ce système a été créé par une fonction javascript, qui additionne les values des menus déroulants les stocké dans une variables. Grâce à un switch, la fonction compare cette variables avec tout les cases et associe renvoie l'url correspondant quand on clic sur le bouton.

    Nous avons essayé de rendre le script le plus facile changer en fonction de besoins de chacun en effet pour changer le nombre de menu déroulant, il suffit :
  1. créer un nouveau menu déroulant
  2. de numéroter numériquement les values de chaque option
  3. d'ajouter à var num +document.NomDuForm.NomMenuDeroulant.value ;
  4. Et enfin d'inscrire dans le switch tout les cas possible et y mettre un lien correspondant.

Ce système de menu déroulant possède comme même un inconvénient majeur, il faut avoir toutes les vidéos pour tout les combinaisons entre les différents menus. Donc lorsque on n'a pas toutes les vidéos, le mieux est de créer qu'un seul menu déroulant.

On a également un autre problème : Le script, bien que n'utilisant aucunement php, ne s’exécute que si l'on remplace l'index.html en index.php et qu'on le lance grace à wamp. Les vidéos doivent passé par un serveur pour pouvoir être lu.

Amélioration possible

On a tenté d'ajouter à Flowplayer un plugins slowmotion qui aurait permit d 'accélérer ou ralentir la vidéo en fonction des besoins de l'utilisateur mais Ce plugins n'est disponible que lorque que l'on héberge ses vidéos sur le serveur Wowza (qui est payant) et malgrès nos efforts nous n'avons pas pu contourner cette restriction.

Utiliser php

Pour pouvoir lancer un fichier php, il faut un programme qui simule un serveur. Comme programme, on peut utiliser WampServer, téléchargeable gratuitement à l'adresse "http://www.wampserver.com/".
Une fois wamp installé, mettez le fichier contenant le php dans le répertoire "C:\wamp\www".
Après lancez votre navigateur internet et allez à l’adresse "http://localhost".
Et enfin, sélectionnez le lien portant le nom de votre fichier.

Pour les utilisateurs linux, il faut installer Lamp qui est le serveur local de linux, la marche à suivre est décrite via ce lien : "http://doc.ubuntu-fr.org/lamp"

lien vers la partie circuit RLC

Circuit RLC
fait par Aurlien De Ryck, 09128 et Olivier Marinx, 09238