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
Interactive Transcript Excerpt
Full Interactive Transcript

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 is you don’t use only seconds.

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.

Development Status

No new features planned.

  • 1 site, for individuals or students

  • 3 sites, for business

Add to Cart
  • Encore du super boulot ! Congrats! 😀

    • Merci beaucoup pour tes encouragements 😛