Interactive Video Transcript

If you are looking for quick help, skip to a desired topic on this page:

• How the Interactive Video Transcript works
• How to use the Interactive Video Transcript
• Formatting
• Appearance
• Example

Interactive Video Transcript uses an attached VTT file (usually subtitles) to generate a transcript in a box below the video. The text will follow the playback of the video, highlighting the current line, while allowing users to skip to any point in the video by clicking on individual lines in the transcript. This feature is available only for the users of FV Player Pro.

How the Interactive Video Transcript Works

The main function of this feature is to highlight the current line in the VTT file. If you simultaneously use the same file as subtitles, you can see that the highlighted transcript line will match the one currently shown in the video.

When the Autoscroll function is active (as in the picture above), the text box will automatically scroll down as the video continues, always showing the active line in the top row. This can be turned off when the user wants to scroll through the transcript and let the video play.

The transcript display can be turned on and off with this button:

Interactive transcript button

The transcript box can be dragged around by left-clicking the top of the box and dragging it to wherever you want it, then releasing the mouse button:

The transcript box can be resized by clicking the lower right corner of the box and dragging it:

Tip: to disable transcript dragging and sizing, use these lines of PHP in your theme functions.php

add_filter( 'fv_player_no_transcript_dragging', '__return_true' );
add_filter( 'fv_player_no_transcript_sizing', '__return_true' );

The transcription box can be freely moved around and resized in full screen too:

Transcript box in full screen mode

Another important function is the Search bar. Not only will it find the searched phrase, but it will allow the user to jump through the lines which include it by using the ‘< >‘ buttons. Jumping to a particular line will also make the video jump to the exact point in the timeline. (this can also be achieved by clicking on any line in the transcript).

Note: The transcript text is also a part of the page HTML code. This means a great boost for website rankings in search engines. 

How to Set Up the Interactive Video Transcript

Interactive Video Transcript is currently compatible with VTT files and also with all Vimeo hosted videos (even private ones) that include captions.

To use it with a VTT file, you can either insert the path to the .vtt file into the Transcript field of the shortcode editor, as you can see in the screenshot below, or you can write .transcript=”url-of-the-file.vtt” directly into the shortcode.

Inserting a .vtt file into the shortcode editor

Example shortcode (notice that the same file can be used both for transcripts and for video subtitles):

[fvplayer src="https://cdn.foliovision.com/images/2016/10/SampleVideo_1280x720_10mb.mp4" width="1280" height="720" transcript="https://cdn.foliovision.com/images/2016/10/subtitles-lorem-ipsum.vtt" subtitles="https://cdn.foliovision.com/images/2016/10/subtitles-lorem-ipsum.vtt"]

To use the feature with Vimeo is even easier. Just add a line transcript=”auto” into the shortcode, or write auto into the field for uploading transcript in the shortcode editor:

Activating Vimeo transcripts

Formatting

Under the Transcript field in each video, there is the option to Preserve original formatting.

If you leave this field unchecked, the FV Player Pro will format the VTT subtitles automatically to make them look like paragraphs of text:

New paragraph is automatically started every time there is:

• 2 second (or more) pause between two subtitle lines
• an empty subtitle pause

If you enable the option, the automatic formatting will not interfere with the way the file was originally written. Therefore, each subtitle line will be a separate line in the transcript too. This comes in handy especially for dialogues, as you can see below:

appearance

You can customize the appearance of your Interactive Video Transcript. In order to access these settings, go to Settings -> FV Player Pro -> Setup -> Video Transcript

Hidden by default makes the transcript hidden until the viewer turns it on via the control bar.

Separate subtitle disabling makes it possible to show both the transcript and the subtitles at the same time.

The drop-down menu in Transcript Theme setting gives you three themes to choose from:

Example

Take a look on an example video hosted on Vimeo with the automatic transcript. Here is the shortcode:

[fvplayer src="https://vimeo.com/150185992" transcript="auto" splash="https://i.vimeocdn.com/video/763857357-63cfaa0919921a9fa3e3cb0c93394613e1faa09468f836be41da1ae3f8ca86c0-d_1920x1080?r=pad" caption="Teaser:  "Paillard Bolex" (English subtitles)"]

Foliovision Promo Video