Last updated:

YouTube-Markers — Interactive Markers and Transcripts for WordPress

Introduction

For my WaveSurfer-WP Premium WordPress plugin, I developed a way to have interactive markers system, which allows editors to add clickable element (text, or button) to seek a certain position in an audio file. It can also be used to display interactive transcript.

Transcripts are very handy, cause contrary to subtitles, you can actually read the text at your own timing, copy some infos and make CTRL+F search.

I decided to port this feature to YouTube players, and pack this as a WordPress plugin for oEmbed YouTube players. oEmbed is the simplest way to add a YouTube player to a WordPress post: simply add a YouTube link (like https://www.youtube.com/watch?v=5MgBikgcWnY) to an empty line in the visual editor, and it will be transformed right away into a YouTube player!

I had to learned how to use the YouTube iFrame API.

Note that I also ported the script to SoundCloud players, but I don’t plan to pack it as a WordPress plugin right now. Contact if it is something you need.

Demo

Click on the markers and see how it see playback in the video. See how “current time” is highlighted (black background) on the transcripts.

As a demo, here is a very inspiring TedX Talk by Josh Kaufman, explaining a misconception about learning new things: you don’t have to be an expert to be able to enjoy/take advantage of a new skill. 🙂

Markers List
  • 01:00 – First Minute
  • 02:00 – Second Minutes
  • 03:00 – Third Minute
Interactive Transcript Excerpt

Bonjour à tous.

Il y a deux ans, ma vie a changé à jamais.

Ma femme Kelsey et moi-même avons accueilli dans ce monde notre fille Lela.

Devenir parent, c’est une expérience incroyable.

Full Interactive Transcript

Bonjour à tous.

Il y a deux ans, ma vie a changé à jamais.

Ma femme Kelsey et moi-même avons accueilli dans ce monde notre fille Lela.

Devenir parent, c’est une expérience incroyable.

Ça change votre monde du jour au lendemain.

Et toutes vos priorités changent immédiatement.

Tant et si bien qu’on a parfois beaucoup de mal à s’adapter.

Devenir parent, c’est apprendre de nombreuses choses comme, par exemple, comment habiller son enfant.

(Rires)

C’était nouveau pour moi.

Ceci est une vraie tenue, je pensais que c’était une bonne idée.

Et même Lela sait que ce n’en est pas une. (Rires)

Il y a tellement à apprendre, et en même temps c’est tellement dingue.

Et comme si ça ne suffisait pas, Kelsey et moi travaillons chez nous, nous sommes entrepreneurs, nos propres patrons.

Kelsey développe des cours en ligne pour les professeurs de yoga.

Je suis écrivain.

Je travaille à la maison, Kelsey fait de même.

Nous avons un enfant en bas-âge et nous essayons de faire en sorte que tout ce qui doit être fait soit fait.

Et nous avons une vie très, très chargée.

Deux semaines après le début de cette expérience incroyable, quand le manque de sommeil a commencé à se faire sentir, autour de la huitième semaine, j’ai eu une pensée, qui est celle que tous les parents ont eue peu importe l’époque et l’endroit : Je n’aurai plus jamais de temps libre.

(Rires)

Quelqu’un a dit que c’était vrai.

Ce n’est pas tout à fait vrai, mais sur le moment, on dirait vraiment que c’est le cas.

C’était assez frustrant pour moi, parce qu’un de mes passe-temps favoris, c’est apprendre de nouvelles choses.

Me plonger dans quelque chose par curiosité, et apprendre par tâtonnements, en bricolant, en testant.

Pour finalement devenir plutôt bon.

Sans ce temps libre, je ne savais pas comment j’allais pouvoir refaire ce genre de choses.

Je suis un grand « geek » je veux continuer d’apprendre des choses, et continuer de grandir.

Et ce que j’ai décidé de faire, c’est d’aller à la bibliothèque, et dans les librairies, et voir ce que la recherche dit sur comment apprendre et comment apprendre rapidement.

J’ai lu quelques bouquins, j’ai lu quelques sites internet.

Et j’ai tenté de répondre à cette question : Comment de temps faut-il pour acquérir une nouvelle compétence ?

Vous savez ce que j’ai trouvé ?

10 000 heures !

Vous en avez déjà entendu parler ?

Si vous voulez apprendre quelque chose de nouveau, si vous voulez être bon, ça va vous prendre 10 000 heures.

Et j’ai lu ça dans plein de livres et sur plein de sites.

En lisant tout ça, je ne pouvais pas m’empêcher de penser : Non !

Je n’ai pas le temps ! Je n’ai pas 10 000 heures.

Je ne pourrai plus jamais apprendre quoi que ce soit de nouveau.

Plus jamais. (Rires)

Seulement c’est faux.

10 000 heures, juste pour vous donner un ordre de grandeur, c’est un boulot à temps plein pendant cinq ans.

C’est long.

On a tous déjà appris quelque chose de nouveau, et ça ne nous a absolument pas pris aussi longtemps que ça, si ?

Alors c’est quoi, le problème ? Il y a quelque chose qui cloche.

Entre ce que dit la recherche et ce que dit notre vécu, il y a un gouffre.

Et j’ai trouvé d’où venait le problème : la règle des 10 000 heures vient d’études pour des performances à un niveau expert.

Il y a un professeur à la Florida State University, qui s’appelle K. Anders Ericsson.

Il est à l’origine de la règle des 10 000 heures.

Elle est venue de ses études sur des athlètes professionnels, des musiciens de calibre international, et des grands maîtres des échecs.

Des gens très compétents dans des domaines demandant de très hautes performances.

Et il a cherché à savoir combien de temps ça prend pour devenir un expert dans ces domaines.

Et il s’avère que plus on s’entraîne volontairement, et plus on passe de temps à travailler les différents éléments d’une discipline donnée, plus on passe de temps, meilleur on est.

Et ceux qui sont vraiment au sommet de leur art ont passé environ 10 000 h à s’entraîner.

On parlait du téléphone arabe tout à l’heure.

Voilà ce qui s’est passé : l’écrivain Malcolm Gladwell a écrit un livre en 2007 intitulé « Outliers : L’histoire du succès » et l’élément central de ce livre est la règle des 10 000 h.

Entraînez-vous beaucoup, bien, et vous réussirez extrêmement bien, vous deviendrez un expert.

Donc le message, ce que le Dr. Ericsson disait, c’est qu’il faut 10 000 h pour atteindre le sommet dans une discipline compétitive, dans un domaine très précis.

Mais voilà ce qui s’est passé : quand Outliers est sorti, il est directement arrivé en tête des ventes et y est resté pendant trois bons mois.

Soudainement, la règle des 10 000 h était partout.

Et un jeu de téléphone arabe a commencé à être joué à l’échelle de la société.

Ce message, il faut 10 000 h pour arriver au sommet d’un domaine ultra compétitif, est devenu il faut 10 000 h pour devenir expert à quelque chose, ce qui est devenu, il faut 10 000 h pour devenir bon en quelque chose, qui est devenu, il faut 10 000 h pour apprendre quelque chose.

Mais cette déclaration, il faut 10 000 h pour apprendre quelque chose, n’est pas vraie. Elle n’est pas vraie.

En fait, ce que la recherche dit…

J’ai passé beaucoup de temps ici à la bibliothèque du CSU dans la section psychologie cognitive, parce que je suis un geek.

Quand on regarde les études sur l’acquisition de compétences, On retrouve partout un graphique comme celui-ci.

Les chercheurs, qu’ils étudient une habilité motrice, une capacité physique, ou une habilité mentale, ils aiment étudier des choses qu’ils peuvent chronométrer.

Parce que c’est mesurable, n’est-ce pas ?

Ils assignent une petite tâche qui demande une action physique, ou qui demande d’apprendre une petite combine mentale, et ils chronomètrent le temps qu’il faut au participant pour accomplir la tâche.

Voilà ce que le graphique dit…

Quand les participants reçoivent la tâche, ça leur prend beaucoup de temps parce que c’est nouveau et ils sont mauvais.

Avec un peu d’entraînement, ils s’améliorent.

Cette première phase d’entraînement est très, très efficace.

On devient bon à quelque chose avec seulement un peu d’entraînement.

Il est intéressant de noter que pour les compétences que l’on veut acquérir pour soi-même, le temps importe peu, n’est-ce pas ?

On se préoccupe juste d’être bon, quoi que ça veuille dire.

Si on renomme « Temps d’accomplissement » en « À quel point on est bon », le graphique se retourne et on obtient la courbe bien connue, la courbe d’apprentissage.

L’idée de la courbe d’apprentissage, c’est qu’au début on est vraiment mauvais, et on le sait, n’est-ce pas ?

(Rires)

Avec un peu d’entraînement, on devient très bon très rapidement.

Donc le progrès initial est très rapide.

À un certain moment, on atteint un plateau, et les épreuves suivantes deviennent beaucoup plus difficiles, elles prennent plus de temps.

C’est ça que je veux, donc ma question c’est combien de temps il faut pour passer de « Je débute, je suis mauvais et je le sais très bien » à « Je suis relativement bon » ?

Si possible en un minimum de temps.

Alors, combien de temps ?

Voilà ce que mes recherches disent : 20 heures.

C’est tout. On peut partir de zéro dans n’importe quelle activité.

Vous voulez apprendre une langue ? Vous voulez apprendre à dessiner ?

Vous voulez apprendre à jongler avec des tronçonneuses enflammées ?

(Rires)

Si vous vous entraînez délibérément et sérieusement pendant 20 heures, vous serez très étonné.

Étonné par votre propre niveau.

20 heures c’est faisable, c’est environ 45 minutes par jour pendant un mois.

Même en sautant un jour ici et là.

20 heures, ce n’est pas si difficile à accumuler.

Mais il y quand même une méthode à suivre.

Parce qu’on ne peut pas non plus tâtonner pendant 20 heures et s’attendre à de grands résultats.

Il y a une manière pour s’entraîner intelligemment, pour s’entraîner efficacement, de façon à ce que les 20 heures que vous investissez soient les plus efficientes possibles.

Voilà la méthode, elle marche pour tout.

Premièrement, décomposez la compétence visée.

Décidez exactement de ce que voulez savoir faire lorsque vous aurez fini, regardez cette compétence de plus près et décomposez-la en plusieurs parties.

La plupart des choses que nous considérons être des compétences sont en fait plusieurs compétences qui requièrent pleins de choses différentes.

Plus vous arrivez à décomposer la compétence, plus vous êtes à même de savoir quelles parties de cette compétence vous aideront à atteindre votre but.

Vous pouvez ensuite les travailler en premier.

Si vous faites cela, vous serez capable d’augmenter vos performances le plus rapidement possible.

Deuxièmement, apprenez assez pour vous corriger vous-même.

Trouvez trois à cinq sources d’information sur ce que vous essayez d’apprendre.

Livres, DVD, cours, peu importe.

Mais ne vous en servez pas pour remettre votre entraînement à plus tard.

Je sais que je le fais !

Je prends 20 livres sur le sujet.

« Je vais apprendre à programmer un ordinateur lorsque j’aurai fini ces 20 livres. » Non. Ça, c’est de la procrastination.

Ce qu’il faut faire, c’est apprendre assez pour pouvoir s’entraîner et se corriger au fur et à mesure.

L’apprentissage devient alors la capacité à mieux remarquer nos erreurs, et ensuite à faire les choses un peu différemment.

Troisièmement, éliminez les obstacles à l’entraînement.

Distractions, télévision, internet.

Toutes ces choses qui vous empêchent de vous concentrer sur le travail à faire.

Plus vous êtes capable d’exercer votre volonté pour écarter les distractions qui vous empêchent de vous entraîner, plus vous êtes susceptible de vous asseoir et de vous entraîner, non ?

Et quatrièmement, entraînez-vous pendant au moins 20 heures.

Les compétences ont souvent ce que j’appelle un seuil de frustration.

Vous savez, l’étape « Je suis nul et je le sais » ?

C’est très, très frustrant. On n’aime pas se sentir stupide.

Et ce sentiment de stupidité est un obstacle à notre entraînement.

En s’engageant à l’avance à s’entraîner à ce que l’on veut faire pendant au moins 20 heures, on peut aller au-delà de ce seuil de frustration et persévérer assez longtemps pour en tirer des bénéfices.

C’est tout ! Ce n’est pas sorcier.

Quatre étapes simples à utiliser pour apprendre n’importe quoi.

C’est facile de parler théorie, mais c’est plus marrant en pratique.

L’une des choses que j’ai longtemps voulu apprendre, c’est jouer de l’ukulélé.

Quelqu’un a vu le TED Talk de Jake Shimabukuro ?

Quand il joue de l’ukulélé…

C’est un dieu de l’ukulélé.

C’est extraordinaire.

Je l’ai vu et je me suis dit : « C’est trop bien ! » C’est vraiment un chouette instrument. J’aimerais vraiment apprendre à en jouer.

J’ai donc décidé de tester cette théorie.

Je voulais passer 20 heures à pratiquer l’ukulélé et voir le résultat.

La première chose quand on veut jouer de l’ukulélé, c’est que pour s’entraîner, il en faut un, non ?

J’ai donc acheté un ukulélé — Où est mon charmant assistant ?

(Rires)

Merci monsieur. Je crois que j’ai besoin du câble là.

Ce n’est pas un simple ukulélé, c’est un ukulélé électrique. (Rires)

Ouais.

Les deux premières heures sont les mêmes que pour n’importe quoi d’autre.

On doit obtenir les outils nécessaires à notre entraînement.

On doit s’assurer qu’ils sont accessibles.

Mon ukulélé est arrivé sans les cordes.

J’ai dû trouver comment les monter.

C’est important quand même, non ?

Et apprendre à accorder, à s’assurer qu’on a fait tout ce qui doit être fait avant de commencer notre entraînement.

Quand j’ai été prêt à commencer à m’entraîner, j’ai cherché des infos en ligne sur comment jouer des chansons.

On dit qu’à l’ukulélé, on peut jouer plusieurs cordes à la fois donc on peut jouer des accords, cool, on s’accompagne nous-même, hourra. (Rires)

Quand j’ai commencé à me pencher sur des chansons, j’avais un livre d’accords d’ukulélé dans lequel il y avait des centaines d’accords.

En voyant ça, on se dit : « Ouah, ça fait un peu peur. » Mais si on regarde vraiment les chansons, on retrouve toujours les mêmes accords, n’est-ce pas ?

Il se trouve que jouer de l’ukulélé, c’est comme bien d’autres choses.

Il y a un petit ensemble de choses qui importent vraiment et des techniques qu’on utilise tout le temps.

Dans la plupart des morceaux, on utilise quatre, peut-être cinq accords, et c’est tout, ça fait la chanson.

Pas besoin d’en connaître des centaines, tant que vous connaissez ceux-là.

En faisant mes recherches, je suis tombé sur un bon petit medley de chansons de pop d’un groupe qui s’appelle « Axis of Awesome ». (Sifflements)

Ah, quelqu’un connaît.

Ce que Axis of Awesome dit, c’est qu’on peut apprendre, ou jouer, plus ou moins toutes les chansons pop des 50 dernières années si on connaît quatre accords, qui sont Sol, Ré, Mi mineur, et Do.

Quatre accords alimentent toutes les chansons pop au monde, c’est ça ?

Je me suis dit, c’est cool !

J’aimerais savoir jouer toutes les chansons pop au monde. (Rires)

Donc c’est la première chanson que j’ai apprise, et je voudrais la partager avec vous. Prêts ?

(Applaudissements) Ok.

(Musique)

(Chant) [Journey – Dont Stop Believing] [Journey – Dont Stop Believing] [Journey – Dont Stop Believing] [Adele – Someone like you] (Rires)

[Adele – Someone like you] [Adele – Someone like you] [Celine Dion – My Heart Will Go On] [Celine Dion – My Heart Will Go On] [Celine Dion – My Heart Will Go On] (Rires)

[Jason Mraz – I’m Yours] [Alex Lloyd – Amazing] [The calling – Wherever you will go] [Elton John – Can you feel the love tonight] (Rires)

[U2 – With or without you] [Beatles – Let it be] [Beatles – Let it be] [Red Hot Chili Peppers – Under The Bridge] [Bob Marley – No woman, no cry] [Marcy Playground- Sex and Candy] [Men at work – Down under] (Rires)

[The Irish Rovers – Waltzing Matilda] [Carly Rae Jepsen – Call Me Maybe] (Rires)

[Carly Rae Jepsen – Call Me Maybe] [Psy – Oppa gangnam style] (Rires)

[Andrea Bocelli – Time To Say Goodbye / Con Te Partiro] [Semisonic – Closing Time] (La musique et le chant s’arrêtent) (Applaudissements)

Merci, merci.

J’adore cette chanson. (Rires)

Et j’ai un secret à vous dire.

En jouant cette chanson pour vous, je viens d’atteindre ma vingtième heure d’entraînement à l’ukulélé.

(Applaudissements) Merci.

Et c’est extraordinaire, à peu près tout ce à quoi on peut penser, qu’est-ce que vous voulez faire ?

Le plus grand obstacle à l’apprentissage n’est pas intellectuel, ce n’est pas le fait de devoir apprendre tout plein de petites choses ou d’astuces.

Le plus grand obstacle est émotionnel. On a peur.

Ce n’est pas agréable de se sentir bête, et lorsqu’on commence quelque chose de nouveau, on se sent vraiment bête.

Donc le plus grand obstacle n’est pas intellectuel mais émotionnel.

Mais passez donc 20 heures sur quelque chose.

Peu importe. Qu’est-ce que vous voulez apprendre ?

Vous voulez apprendre une langue ? Apprendre à cuisiner ?

Vous voulez apprendre à dessiner ?

Qu’est-ce qui vous excite ? Qu’est-ce qui vous branche ?

Allez donc le faire. Ça ne prend que 20 heures.

Amusez-vous bien.

(Applaudissements)

Usage

Visual Editor Button

You can add marker right from the visual editor button.

YouTube Marker Button basic usage.

Transcript From SRT

The transcripts has been generated from my SRT to Transcript simple webapp. You can access from this URL: bit.ly/srt-to-markers.

Customization

There is few style you can customize in your theme stylesheet:

  • .youtube-marker
  • .youtube-marker-current

and for the visual editor style:

  • .youtube-marker

You can of course change the mouse :hover look of these classes.

Advanced Usage

To  create custom button anywhere on page from any element, just use the .youtube-marker class, and a data-start attribute. You can specify a data-id if there is several players on page (ID is just the index number of your player, 1 if it is the 1st player on page, 2 if it is the second etc..). You can speicify a data-end attribute to create a subtitle.

Timecode format can be time in seconds, or time as hh:mm:ss.ms, or even just m:s… it is pretty flexible. Just use ":" as unit separator if you need minutes and hours.

For more detailed instructions, you can take a look at my Interactive Markers and Transcript for WaveSurfer-WP Premium article. Just replace .wavesurfer-marker class by .youtube-marker. It works essentially the same way, exept the data-stop attribute which I don’t put in this plugin. Let me know if you need it.

Changelog

v1.0.1 (2019-03-12)

  • Mobile Friendly Markers
  • Ajax Friendly init

v1.0 (2017-01-27)

  • Initial release

Development Status

No new features planned.

  • 1 site, for individuals or students

  • 3 sites, for business