VIDEOJS


Test & Debug 
Multi plateforme

Environnement



VideoJS : player HTML5 avec priorité sur le  player Générique flash

En production sur MF, PT, ...

Objectif




Devenir le player de vidéo courte des sites M6 :
remplacer le player Générique par le conteneur Flash de VideoJS 

Etat du projet




Très avancé
Mais encore à debugger

Le player chez M6



Le fameux player Générique : 

Full Flash

et fallback HTML5

VideoJS



  • Projet Open Source
  • Full Javascript
  • Multiples conteneurs (HTML5, Flash, Youtube...)
  • API : Composants / Plugins / Events

Composants




Permet de rajouter des éléments au DOM 
Pour interagir avec le player
(Caroussel, Boutons sociaux, ...)

Plugins




Permet de rajouter des fonctionnalités au player
(pre-roll, jingle, ...)

Events




Ensemble de listeners sur lequel on peut se brancher
(play, pause, resize, ended, ...)

On peut en créer autant que l'on veut sur chaque composant

Tests



VideoJS : tests unitaires via QUnit (automatisation via Grunt)

MAIS

Tests pas à jour




TEST ET DEBUG

1ère étape



Inventaire des plateformes à supporter

Et 

Inventaire des fonctionnalités à tester

        

   

Et maintenant, vous croisez




Ce qui nous donne 



  • Windows : FF / IE (dernière) / Chrome
  • Mac : Safari / Chrome
  • Iphone : Safari
  • Ipad : Safari / chrome
  • Android 4.1 : Navigateur de base / Chrome
  • Android 4.3 ou 4.4 : Navigateur de base / Chrome
  • Windows Phone 8 : IE 
  • FEature List

    Publicité 
    Publicité cliquable
    Jingle (avant pub, après pub, anytime, pas du tout)
    Plein écran
    Logo cliquable
    Bouton "Play" qui s'affiche quand la video est en pause
    Barre de navigation escamotable
    Gestion du volume dans le player
    Boutons sociaux (aïe, ils me suivent encore)
    Caroussel
    Estat ...


    Résultat

    2ème étape




    Mettre en place un environnement de test

    Principe

    Permettre à n'importe qui de tester tous les cas décrits

    Pour les dev

    Interface de configuration du player




    ComMent tester ?



    Quel type de test ?


    • Test unitaires : Qunit
    • Test fonctionnels : 
      • Exposer le player dans le top (plugin Debug en cours)
      • Le contrôle visuel reste obligatoire
      • Un click via JS peut marcher, mais pas le click manuel !
      • Donc le test Manuel est finalement le seul valable

    ex.: clic sur bouton play / pause
    M6Player.vjs.controlBar.playToggle.el_.click()  


    Y a vraiment pas mieux ?






    Et PhantomJS / CASPERJS alors ?


    et SlimmerJs ou DalekJS ?




    Et après, on fait quoi ?




    Et bien on debug !

    PC

    Firefox : Ctrl + Maj + K  (natif)
     

    PC

    Chrome : F12

    PC

    IE : F12

    MAC

    Safari : alt + cmd + I

    Android Step 1/2


    Activer le mode USB debug du device



    Android step 2/2


    Sur un PC, avec Chrome : chrome://inspect

    Safari STEP 1/4

    Activez le mode développeur sur IOS
     

    SAFARI STEP 2/4

    Sur Mac / Safari, activez le menu Développement

    SAFARI STEP 3/4


    Dans Mac / Safari faites : 

    SAFARI STEP 4/4


    Et voilà 

    Et pour les autres ?


    Navigateur android, Chrome sous IOS, Windows Phone



    LEs problèmes récurrents


    • iframe : changement d'url
    • compatibilité html5 : mode plein écran
    • problème de cache : utiliser la navigation privée



    MErci



    Olivier pour ton Blog

    http://oliviermansour.com/2012/10/22/deboguer-un-site-web-sous-ipad/
    Made with Slides.com