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:

Video Transcript with the “Preserve original formatting” option off

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:

Video transcript with the “Preserve original formatting” option on

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:  &quot;Paillard Bolex&quot; (English subtitles)"]

Foliovision Promo Video

Autoscroll:

When I started Foliovision, my idea was that I wanted to create a company that I would like to work in, and also a company that I would like to be a client of. If you ask me how is Foliovision making the world a better place or how are we making the web work for you, I would say that we use all the open source and open standards so our products are not going to lock you inside of some box, like, in past we moved hundreds of websites out of restrictive content management system into Wordpress, into open source world. The secret is that we are doing things differently here. Our clients aren’t just numbers for us, because we are crafting something personal for each of them. And this really makes a difference. All of our clients have really great stories and they all deserve to be told so it’s up to me to find a way to tell them online. We start by finding something special about the client and then we turn this special thing into something that’s a part of every marketing campaign we do. We are a small and strong group of like-minded young professionals trying to achieve our company's goal, which is to make our clients happier and to make their daily life easier. Quick reactions are very important to our clients. That is why we make our services available at all times. What making the web work for you means to me is that whatever the level of technology our clients come to us with, we will make this sophisticated and ever-changing internet technology accessible to them. The part of my job is training clients to actually use their new websites, so I'm not just creating the websites for them, I also guide them through what the website does and how it works. We have a plugin tracking the number of post or website shares. Several social media channels have recently limited the access to this data so we had to adjust our plugin - and we were one of the first ones to accomplish this. With FV Player we are doing the cutting edge work, we haven’t seen some of our features in any other product, for example the way we improved the embedding for Youtube and Vimeo so that you can use all of our advanced features - I think that it’s pretty unique. Some of our clients actually like to be very involved on the technology side, but many of them, actually they’re just publishers, people who know a lot about cakes, or they’re people who know a lot about baseball, or soccer, or Middle Eastern politics, but they don’t know very much about how Internet technology works. But for all of them we’re able to make it possible for them to publish at the highest possible level with all the same tools that the sites like The New York Times, or the Guardian or any of these other huge sites enjoy.

Interactive Video Transcript

How the Interactive Video Transcript Works

Interactive transcript button