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, insert the path to the .vtt file into the Transcript field in the “Subtitles” tab of the editor, as you can see in the screenshot below.

You can add as many languages as needed.

If you use shortcodes, you can simply use `transcript=”…”`. Nnotice 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://foliovision.com/images/2016/10/subtitles-lorem-ipsum.vtt" subtitles="https://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.

Keď som zakladal Foliovision, chcel som vytvoriť firmu v ktorej by som sám chcel pracovať, a tiež firmu, ktorej zákazníkom by som chcel byť. Ak sa ma opýtate ako Foliovision robí svet lepším miestom, alebo ako plníme naše heslo Making the web work for you, povedal by som, že používame otvorený softvér a otvorené štandardy, takže vás naše produkty nezamknú v akýchsi rámcoch. V minulosti sme presunuli stovky webových stránok z reštriktívnych redakčných systémov do Wordpressu, do sveta otvorených projektov. Tajomstvo tkvie v tom, že my robíme veci inak. Naši zákazníci nie sú pre nás len číslami, pretože tvoríme niečo osobné pre každého z nich. A tento fakt robí naozaj rozdiel. Všetci naši zákazníci majú skvelé príbehy ktoré si zaslúžia byť vyrozprávané, a mojou úlohou je nájsť spôsob ako ich povedať online. Vždy začneme hľadaním niečoho špeciálneho o danom zákazníkovi, a túto špeciálnu vlastnosť následne premeníme na niečo, čo je súčasťou každej marketingovej kampane, ktorú tvoríme.
Making the web work for you pre mňa znamená, že keď k nám prídu zákazníci s akoukoľvek úrovňou technológie, my zabezpečíme, aby bola pre nich táto neustále sa meniaca internetová technológia prístupná a ľahko používateľná. Súčasťou mojej práce je zaškolenie zákazníkov, aby vedeli používať ich novovytvorené webové stránky, čiže pre nich nielen vytváram webové stránky, ale tiež ich sprevádzam tým, čo webová stránka robí a ako funguje.
S FV Playerom robíme prelomovú prácu, niektoré z našich funkcií sme nevideli pri žiadnom inom produkte, napríklad spôsob akým sme vylepšili vkladanie pre Youtube a Vimeo, vďaka ktorému možno využívať všetky naše pokročilé funkcie - je myslím naozaj výnimočný. Niektorí z našich zákazníkov sú skutočne radi súčasťou technologickej časti našich projektov, no mnohí z nich sú len vydavatelia. Sú to ľudia ktorí vedia veľa o zákuskoch, alebo sú to ľudia ktorí vedia veľa o baseballe, o futbale, o politike Stredného východu, no nevedia veľa o tom, ako fungujú internetové technológie. Ale pre všetky tieto skupiny vieme zabezpečiť publikovanie na najvyššej možnej úrovni s rovnakými nástrojmi, aké majú k dispozícii The New York Times alebo Guardian, alebo akékoľvek ďalšie veľké stránky.

How the Interactive Video Transcript Works

Interactive transcript button