WordPress video player with subtitles

This tutorial will guide you how to create a WordPress video player with subtitles.

There are three steps in this tutorial:

  • Step 1 - Install Wonder Gallery
  • Step 2 - Add mp4 video file and vtt subtitle file to the gallery
  • Step 3 - Publish the video player

At the end of this tutorial, we will create a video player as follows:

Step 1 - Install Wonder Gallery

First please install the WordPress premium plugin Wonder Gallery. You can download the free version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

Step 2 - Add mp4 video file and vtt format subtitle file to the gallery

After you have installed Wonder Gallery, in your WordPress backend, left menu, goto Wonder Gallery -> New Gallery, create a new gallery.

In the gallery editor, step 1, click the button "Add Video". In the Add Video dialog, select or upload an mp4 video file, in the Subtitle/Caption (.vtt file) input box, upload a .vtt subtitle track file.

wordpress video player with subtitles

A .vtt file or WebVTT (Web Video Text Tracks Format) file defines the subtitles or captions for video content.

A .vtt file is a text file, you can create the file or edit it with a text editor. An example is as follows:

WEBVTT

00:01.000 --> 00:20.000
Wonder Carousel - Responsive WordPress Carousel Plugin

00:20.000 --> 00:40.000
Wonder Carousel is the best WordPress carousel plugin to create WordPress image and video carousel.

00:40.000 --> 01:00.000
Support WordPress posts, custom post types, WooCommerce, images, Mp4 and WebM videos, YouTube and Vimeo.

At the beginning of the file, there is a line WEBVTT, then each paragraph defines the time span and the subtitle. For example, the above .vtt file adds three captions to the video content, from 1 second to 20 second, 20 second to 40 second and 40 second to 1 minute.

For more information about vtt file format, please view the document: WebVTT: The Web Video Text Tracks Format.

Step 3 - Publish the video player

After you have added the video file and the .vtt file to the gallery, click the Save & Publish button and save the gallery. The plugin will publish the gallery and display its shortcode.

To add the video player to a WordPress page or post, copy the shortcode and add it to the page or post.