Foliovision › Forums › FV Player › Bug Reports › Chapters or transcript but not both
-
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?
-
-
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?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
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,
EduardHello 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,
EduardHello 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,
EduardHi 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
Introduction00:00:08.608 –> 00:00:15.296
This video will show you how to use cue pointsUnfortunately, 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"]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"]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 tooWe 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-cloudfrontThanks,
MartinHello 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,
MartinThanks 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
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 6 years, 8 months ago by Alec Kinnear. Reason: not enough detail