• 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

Chapters or transcript but not both

[Solved]

Foliovision › Forums › FV Player › Bug Reports › Chapters or transcript but not both

  • Michael T. 7 years, 3 months ago

    I’m trying to add both chapters and a transcript to a video using the shortcode:

    [fvplayer src="http://d2ji3rw3p906p9.cloudfront.net/01032018/videos/1.mp4" src1="http://d2ji3rw3p906p9.cloudfront.net/01032018/videos/1.webm" splash="http://d2ji3rw3p906p9.cloudfront.net/01032018/stills/1.jpg"
    chapters="http://www.reach22.com/r22/webvtt/1.vtt"
    transcript="http://www.reach22.com/r22/webvtt/2.vtt"]

    With this shortcode I get the chapters but not the transcript. If I swap them around I get the transcript but not the chapters. Am I missing something?

Viewing 16 replies - 1 through 16 (of 16 total)
  • Eduard 7 years ago
    Avatar photo

    Hi Michael,

    Thank you for reporting this. It seems that this problem only happens when both functions are used with a video delivered via CloudFront. We’ll look into this and try to fix it as soon as possible.

    Thanks,
    Eduard

    Michael T. 7 years ago

    Thanks for the update Eduard. I can now report that it would appear that you can only have one of the following: splash image, chapter, or transcript. I thought it was one of chapters or transcript, in additon to the splash image. But sadly no!

    Could you also confirm whether you can have the splash image with the same CloudFront URL as the video? I thought this was a recent fix but I can’t get it to work.

    I’ve also included <FilesMatch “.vtt”>
    Header set Access-Control-Allow-Origin “*”
    </FilesMatch in the .htaccess file in order to use the same CloudFront URL with chapter and transcript vtt files. Again, no joy. Can it be done?

    Eduard 7 years ago
    Avatar photo

    Hi Michael,

    As I said, the problem here is probably on our end, as we had similar issues with delivering images via CF. We fixed that and now we are looking into this if it’s the same bug and we’ll hopefully fix it soon.

    Thanks,
    Eduard

    Eduard 7 years ago
    Avatar photo

    Hi Michael,

    Sorry that this is taking so long, but we are not able to replicate the issue anymore. Could you please send us a link to a video on your website where this issue can be seen?

    Thanks,
    Eduard

    Michael T. 7 years ago

    Hi Eduard

    Just checking you received the link:
    http://www.reach22.com/r22/sessions/tree-fungal-growth/
    And this is the code:
    An introduction to the types of fungi in woodland

    [fvplayer src="http://d2ji3rw3p906p9.cloudfront.net/01032018/videos/1.mp4" src1="http://d2ji3rw3p906p9.cloudfront.net/01032018/videos/1.webm" splash="http://d2ji3rw3p906p9.cloudfront.net/01032018/stills/1.jpg"
    chapters="http://d2ji3rw3p906p9.cloudfront.net/01032018/chapters/1.vtt"
    transcript="http://d2ji3rw3p906p9.cloudfront.net/01032018//transcript/1.vtt"]

    Regards

    Michael

    Eduard 7 years ago
    Avatar photo

    Hello Michael,

    Thank you for the detailed info. We just realized that FV Player was not set to load other types of data from CloudFront, except video and images. We are working on fixing this now. In the meanwhile, you could deliver the VTT files without CloudFront (for example directly from S3).

    Thanks,
    Eduard

    Eduard 7 years ago
    Avatar photo

    Hello Michael,

    We have updated FV Player Pro and now the issue should be fixed. You can see it in this demo – Interactive Transcript with Chapters. The update should be released next week, but if you want to have the issue fixed immediately, you can update FV Player Pro manually.

    To perform a manual update right now you can log in at https://foliovision.com/my-licenses and then download a ZIP file with your plugin there. Before you upload it to your site via WP-admin -> Plugins -> Add New -> Upload, make sure you remove the current installation of the FV Player Pro plugin. No worries, no settings or video will be lost.

    Thanks,
    Eduard

    Eduard 7 years ago
    Avatar photo

    Hello Michael,

    I forgot to mention that transcript will work, but to also make the chapters working, you will have to set the CORS headers in your CloudFront distribution settings. You can do so by following this guide – Enabling CORS in CloudFront.

    Thanks,
    Eduard

    Michael T. 7 years ago

    Hi Eduard

    OK. So the FV Player Pro update has successfully installed and I’ve set the CORS headers. The good news is that I now have the video, splash image and transcript all nicely appearing as CloudFront urls. The bad news is chapters!

    To test, I’ve uploaded your example vtt file to CloudFront :
    WEBVTT
    00:00:01.878 –> 00:00:05.334
    Introduction

    00:00:08.608 –> 00:00:15.296
    This video will show you how to use cue points

    Unfortunately, when chapters are added, the transcript disappears and the chapters don’t display. If I then remove the transcript code, so the chapters code follows the splash image code then the splash image disappears! And if I remove the splash code so that it is just the video code and the chapters then the video disappears!!

    Any ideas what might be happening? Code is below

    Regards

    Michael

    [fvplayer src="http://d2ji3rw3p906p9.cloudfront.net/09042018/videos/1.mp4" splash="http://d2ji3rw3p906p9.cloudfront.net/09042018/stills/1.jpg"
    transcript="http:// d2ji3rw3p906p9.cloudfront.net/09042018/transcript/2.vtt"
    chapters="http:// d2ji3rw3p906p9.cloudfront.net/09042018/chapters/5.vtt"]

    Michael T. 7 years ago

    Some success ! This code displays everything apart from the chapters, which uses your example chapter vtt text.
    [fvplayer src="http://d2ji3rw3p906p9.cloudfront.net/10042018/videos/1.mp4" src="http://d2ji3rw3p906p9.cloudfront.net/10042018/videos/1.webm" transcript="http://d2ji3rw3p906p9.cloudfront.net/10042018/transcript/2.vtt" chapters="http://d2ji3rw3p906p9.cloudfront.net/10042018/chapters/5.vtt" splash="http://d1s07sr77vqyki.cloudfront.net/10042018/P1.jpg"]

    Martin 7 years ago

    Hello Michael,

    it appears to me that there must be some invalid character in the shortcode. We are working on a better way of storing the video configuration – in database tables. It might be best to check your page HTML code to see if you see references of:

    * splash image in as the CSS background-image
    * chapters in the data-item attribute as the chapters item
    * transcript is loaded and parsed on the post save, so you should see its parsed content in HTML too

    We are not having issues with our setup where the video source, splash, transcript and chapters are all loaded from CloudFront: https://foliovision.com/player/demos/interactive-transcript-chapters

    You might be having a CORS issue with the chapters, please double check:

    * CORS in S3 bucket: https://foliovision.com/player/video-hosting/hls#cors-in-amazon-s3
    * CORS forwarding in CloudFront distribution: https://foliovision.com/player/video-hosting/hls#cors-in-cloudfront

    Thanks,
    Martin

    Michael T. 7 years ago

    Hi Martin

    Many thanks for your help. the issue is now resolved with video, chapters, transcript and splash all displaying. The problem was sorted by setting the CORS for the S3 bucket. I think this action may be missing off the tutorial post.

    Best regards

    Michael

    Martin 7 years ago

    Hello Michael,

    we fixed the CORS instructions already.

    Regarding the side-by-side display – we wanted to make transcript appear in some minimalistic form, so that user would have to click something to get it to display.

    We also have requests to make it appear on top of the player when using fullscreen more.

    For now you can experiment with CSS like this:

    .fv_fp_chapters {
        width: 33%;
        float: left;
    }
    .fv_fp_transcript_wrapper:after {
        content: ' ';
        display: block;
        clear: both;
    }
    

    I wrote down your feature request.

    Thanks,
    Martin

    Michael T. 7 years ago

    Thanks for that Martin. Unfortunately, the css code hasn’t worked for me. I’ll try playing around with it unless you think there may be a problem with the code..

    By the way, you entioned the transcript could appear ina minimalist form with a chceckbox to make it appear. Has that feature been implemented as I can’t find a setting for it.

    Regards

    Michael

    Alec Kinnear 7 years ago
    Avatar photo

    Hi Michael,

    We could help you with the custom display you are looking for as custom web development. What we’d need to start is a visual mockup, along with the code as it is now and access to your dev server. We could do the work without access to your dev server but it would be more difficult as we’d have to set up custom Cloudfront media and permissions to replicate your environment.

    If there are further technical issues with Cloudfront, let us know. We do want to solve those.

    Thanks.

    Alec

    • This reply was modified 7 years, 1 month ago by Alec Kinnear. Reason: not enough detail
    Michael T. 7 years ago

    All sorted . Thanks for your help

    Michael

Viewing 16 replies - 1 through 16 (of 16 total)
Reply To: Chapters or transcript but not both



Please Sign in or Register to upload files.

Related Posts

  1. Interactive Transcript with Chapters

    Interactive Transcript with Chapters

  2. VTT Chapters

  3. VTT Chapters

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!