Tagvideojs

[javaScript] VideoJS – astuces et bonnes pratiques de mise en place

Centering the Big Ass Play Button in VideoJS

EDIT: ATTENTION, la méthode donnée dans ce lien n’est pas la bonne!!!

Il suffit, en effet d’ajouter la classe .vjs-big-play-centered sur l’élément HTML video.

Sous Edge la popin vidéo est écrasée

J’avais un height: 0px; pour les sélecteurs .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3. Edge (jusqu’à 17 exclus) n’a pas aimé.

[javaScript] Mettre en place le plugin videoJS avec une playlist façon YouTube

VideoJS, sources du projet sous Git, documentation officielle.

Exemple avancé (avec playlist). Sources: Playlist Plugin for video.js (Brightcove), Video.js Playlist UI (Brightcove).

Un tutoriel de mise en place (incomplet – en tout cas je n’ai pas réussi à faire fonctionner une playlist avec les seules infos données dans ce tuto).

LA SOLUTION pour une mise en place qui fonctionne.

Mes retours après mise en place dans un projet:

  • Les sources sont fournies brutes avec un workflow à base d’NPM + Grunt qui permet de builder des versions custom « production-ready ».
  • Les sources de styles sont en SASS.
  • Les sources de JS sont en ES5 (ou ES6?).
  • Je n’ai pas réussi à faire fonctionner le cli fourni pour procéder au build… notamment des fichiers JS. J’ai dû procéder à une mise à jour de Node et NPM sur ma machine; je me suis arrêté parce que le build process me renvoyait d’autres erreurs par la suite.
  • J’ai récupéré des sources JS buildées sur différents services de CDN.
  • L’exemple avancé (avec playlist) intègre un plugin mux et fonctionne avec React ce qui n’était pas utile dans mon cas. De plus,
    sa mise en place est assez mal décrite dans le billet de blog qui détaille sa mise en place.
  • C’est un post sur stackoverflow – Create playlists for video.js qui m’a mis sur la voie.

Sources:

Markup HTML

Styles

video-js.less

Passer ce bloc de code

video-js-playlist-ui.less

Passer ce bloc de code