bobbywalters

Hey @fireemerald, thanks for giving the plugin a try and I appreciate you taking the time to give feedback.

WebVTT was created to get the tracks read in and used within administration screens and on normal pages as easy as possible following conventions and using all the standard WordPress shortcodes. As a result, the rendering is left up to any JavaScript handler, by default MediaElement.js in WordPress, and the browser to display and control the video. This allows any handler to be used without creating a dependency on how the track information is presented. Meaning, a new video player plugin could create their own filter and parse the <track> elements as they saw fit.

Creating a separate chapters list would take some effort but not out of the realm of possibility. Some things that would need to be considered:

• How to tell that the chapters should be split out into a separate list?
• How to interact with subtitle language change to match the chapters to the right language?
• What happens if there isn’t a matching language for both subtitle and chapter tracks?
• What happens if a different handler other than MediaElement is used?

I’d recommend checking out the MediaElement.js Plugins and seeing what’s possible using their API. MediaElement is quite robust in what it can do and creating a nice chapters list plugin would be a welcomed addition I’m sure. Plus the example you already came across could be a head start.

Again, thanks for using WebVTT.

Hey @pucicu,

I’m sorry to hear you are having difficultly installing the plugin. Would you be able to provide more detail, such as an error log, to the issue you’re seeing?

Thanks

Hey Eric,

I viewed the page today and I was able to see the English, French, and Chinese subtitles and switching between them seemed fine.

I apologize for the late reply but were you able to track down what the problem was since everything seems OK now?

Thanks,
Bobby

I’m glad you like the plugin and find it useful. Thanks for leaving a review Leo.

WebVTT works with the WordPress [video] shortcode to know when to add the track files. As long as the video file name, track names, and shortcode all line up everything should display correctly.

Below is an example to get a video to offer 2 different subtitle tracks.

Uploaded file names:

• oceans-clip.mp4
• oceans-clip-subtitles-en.vtt
• oceans-clip-subtitles-es.vtt

Edit a page and use the “Text” tab to see the source. Look for the video shortcode block which should look something like this:

[video width="640" height="264" mp4="https://host/wp-content/uploads/2016/05/oceans-clip.mp4"][/video]

Viewing the page should display the video and a video control button to select which subtitle track to use.

Another way to verify that the file names follow the convention is to view the VTT or video file “Attachment Details” in the Media Library. The VTT file will link to the video it will display with and the video will list all available VTT files associated with it. These screenshots match the example above and will hopefully provide more clarity.

That would be great to get your help to translate WebVTT into French.

Providing another localization would amount to supplying 2 files into the webvtt/languages folder (a .mo and a .po). Using a GNU gettext friendly translation tool to open up the language template file, translating all the identified strings that can be localized, and saving the translations into a new .po and .mo file.

Using an editor like Poedit makes it straight forward.

1. Download Poedit from https://poedit.net/ and install it.
2. Open the language template file webvtt/languages/webvtt.pot and select the language to translate into (in this case French).
3. Add all the translations for each source text line.
4. Use “File -> Save as…” to save the changes to webvtt/languages/webvtt-fr_FR.po.
5. Use “File -> Compile to MO…” option to save the .mo file as webvtt/languages/webvtt-fr_FR.mo.

Now to get the .po and .mo files back into the repository, the easiest way would be to submit a Pull Request on GitHub https://github.com/bobbywalters/webvtt so the changes could get merged in.

Thanks again for offering to translate.

Sorry for the delay in replying back and I’m glad the plugin has helped out.

By default in WordPress the display handling of chapters and subtitles is done by MediaElement.js. MediaElement.js appears to create a single overlay for tracks (chapters, subtitles, etc) and it looks like chapters take priority over subtitles. Without using MediaElement.js the default I’m seeing in Chrome (51.0.2704.54 beta-m (64-bit)) is that subtitles take priority over chapters.

To make things even more interesting the WebVTT specification allows for styling elements within the track files to use CSS (ie font styling), provide alignment, and position. Speaker semantics and other pseudo CSS elements exist to better display the text given more context.

So far I haven’t seen anything indicating which track type (chapters vs subtitles) should take precdence. This indicates it’s more of a preference based on video player and options to handle the WebVTT display. As a result, exploring other HTML5 video players to find one that supports both chapters and subtitles at the same time is likely the only solution.