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
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.
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. 🙂
Visual Editor Button
You can add marker right from the visual editor button.
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.
There is few style you can customize in your theme stylesheet:
and for the visual editor style:
You can of course change the mouse
:hover look of these classes.
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.
- Mobile Friendly Markers
- Ajax Friendly init
- Initial release
No new features planned.