• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

Transcript formatting | using voice spans to display the speaking character

[Solved]

Foliovision › Forums › FV Player › Troubleshooting › Transcript formatting | using voice spans to display the speaking character

  • Gabriele 4 years, 8 months ago

    When I look at the markup inside the transcript window, the “voice spans” ( https://www.w3.org/TR/webvtt1/ => (Example 6) ) from vtt file are shown as follows:

    Example (vtt file):

    ...
    00:00:16.680 --> 00:00:20.040
    <v character>That’s awesome!
    ...
    

    is rendered via FV Flowplayer Pro as follows:

    Example (HTML markup):

    ...
    <span class="fv_fp_transcript_item current" data-chapter="3">
    	<v character="">That’s awesome!</v>
    </span>
    ... 
    

    Unfortunately I haven’t found any documentation how I can influence this to format the transcript output a bit.

    I mainly use the player to display the transcribed scripts of the running movie/radio play in the transcription window to search for dialogs. In this case, the automatic breaking of the output based on “2 second (or more) pause between two subtitle lines” (https://foliovision.com/player/advanced/interactive-video-transcript) is hindering.

    Additional pauses (as described here: https://foliovision.com/support/fv-wordpress-flowplayer/troubleshooting/interactive-player-add-space-in-transcripts) are too time-consuming in this case, because I would have to rework all transcription texts to insert an additional pause to structure the transcription output.

    Is there perhaps a solution to this?

    Thanks a lot!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Martin 5 years ago

    Hello André,

    we have prepared a new feature for FV Player Pro which will let you skip any transcript formatting and use it in its raw form. We need to finish some testing though. Perhaps it will help with your issue.

    How should that “v character” part be displayed? I wonder if using some speech balloon would make sense.

    Thanks,
    Martin

    Gabriele 5 years ago

    Thank you very much for the quick answer.
    The presentation always depends a little on the context.
    In my case I imagine the output like this:

    Transcription
    
    Character-A:	Lorem ipsum dolor sit amet, consetetur sadipscing
    Character-B:	Sed diam nonumy eirmod tempor invidunt ut
    Character-A:	Magna aliquyam erat, sed diam voluptua
    Character-C:	At vero eos et accusam et justo duo dolores et ea rebum
    Character-D:	Stet clita kasd gubergren, no sea takimata sanctus
    Character-E:	Est Lorem ipsum dolor sit amet
    Character-F:	Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    Character-B:	Sed diam nonumy eirmod tempor invidunt
    ...
    

    Influencing the output via CSS or template would of course be great!
    Is there already a schedule for when you are done with the tests?

    Thanks a lot!
    André

    Martin 4 years ago

    Hello André,

    we have added a “Preserve original formatting” checkbox below the transcript field in FV Player editor. When enabled the transcript won’t be formatted in any way, except for line break after each line.

    To get this new feature you have to switch FV Player Pro to Beta (here’s how https://foliovision.com/player/basic-setup/switching-fv-player-pro-to-beta) and then update to the latest version (7.4.38.727.beta). You can also grab a fresh ZIP from https://foliovision.com/my-licenses and switch to Beta afterwards.

    Thanks,
    Martin

    Gabriele 4 years ago

    Hi, Martin,

    thanks for the change! Everything works as described.

    With the css “::before” selector” combined with th “attribute” selector you can now also write the voices (v-tags from the webvtt file) in front of the text passages:

    CSS Example:

    span.fv_fp_transcript_item v[character-a]::before {
       content: "Character A: ";
       color: black;
       font-weight: bold;
    }
    
    span.fv_fp_transcript_item v[character-b]::before {
       content: "Character B: ";
       color: black;
       font-weight: bold;
    }
    

    Transcript window before:

    ...
    Lorem ipsum dolor sit amet, consetetur sadipscing.
    At vero eos et accusam et justo duo dolores et ea rebum.
    ...
    

    With css selectors the voices are output before the text passages in the Transcript window:

    ...
    Character A: Lorem ipsum dolor sit amet, consetetur sadipscing.
    Character B: At vero eos et accusam et justo duo dolores et ea rebum.
    ...
    

    Works great for my purposes => Thanks a lot!

    André

    Martin 4 years ago

    Hello André,

    thank you for posting your notes!

    We could parse these voice spans and save you the trouble of adding the CSS rules for each voice.

    Thanks,
    Martin

    Gabriele 4 years ago

    That would be great of course, if you could set this option in the backend.

    It would also be interesting in this context to standardize the distance between voice/character and dialog text so that the transcript is even easier to read.

    For example:

    Before (without space between voice/character and dialog text):

    character-a: Lorem ipsum dolor sit amet, constetur sadipscing.
    character-abcdefgh: At vero eos et accusam et justo duo dolores et ea. 
    character-abs: Stet clita kasd gubergren, no sea takimata sanctus.
    

    After (with space between voice/character and dialoge text):

    character-a:		Lorem ipsum dolor sit amet, constetur sadipscing.
    character-abcdefgh: At vero eos et accusam et justo duo dolores et ea. 
    character-abs:		Stet clita kasd gubergren, no sea takimata sanctus.
    

    Thanks a lot,
    André

    Gabriele 4 years ago

    The editor did not take over the tabs, so for clarification an example image.

    Thanks,
    André

    transcript_befor_after
    Transcript_Befor_After
    Martin 4 years ago

    Hello André,

    I don’t think we need another option for this. If voice spans are present it should always process them like you described.

    I like the idea of the indentation too. I hope we could get that without having to use tables. But what happens if there is a subtitle line without the voice span? Would that show without indentation?

    Thanks,
    Martin

    Gabriele 4 years ago

    O.k. the parameter for a player via manual shortcode is:

    original_formatting="true"

    topic voice span:
    Yes, an option to automatically prefix the voice span in the transcript window sounds good. (at least then you wouldn’t have to create the voices individually via CSS)

    topic indentation:
    An indentation makes the transcript indeed more readable. But I don’t have a suggestion how to solve this dynamically at the moment. Have you already moved on, or is that out of the question for once?

    Thanks,
    André

Viewing 9 replies - 1 through 9 (of 9 total)
Reply To: Transcript formatting | using voice spans to display the speaking character



Please Sign in or Register to upload files.

Related Posts

  1. Interactive Transcript

  2. FV Player’s New Feature: Interactive Video Transcript

  3. Interactive Video Transcript

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!