I am new to Bubble and trying to work with the videoJS Advanced player. I have the video working but not sure how to get the subtitles to work. It says in the docs that this is possible, but I don’t see any options to load subtitle files in, Please help with some instructions and screenshots.
Love some help @pork1977gm
Hi @dmitry
There should be a load subtitles action, can you see it in the list of available actions?
I am a bit new to bubble so not sure how to access this. Can you perhaps show some step by step screenshots?
I would need to dynamically load the captions from the bubble database.
Also is there a way to format the captions?
No probs, so have the video on your page first and make sure a video is loaded, then you run this action
Fill in the required details etc and with a bit of luck they should load. The action does contain a bunch of options which will allow you to style the subs, but if you find that there’s not enough styling, you can access the state called “Subtitles current caption” on the video player which will show you the subs as the video plays. You could use that in a text element and style it how you like.
If you haven’t see this page yet, it’s worth looking at:
http://paul-testing-4.bubbleapps.io/version-test/transcription?debug_mode=true
And the editor for it is here:
Paul-testing-4 | Bubble Editor
Hey there. Almost working so a few more questions.
Question 1: I have videos with a variable set of transcripts. They are stored in a separate table. I’d love to load all the subtitles available on page load. Is that possible or is it one at a time?
Question 2: my transcription software returns SRT files but seems like you only work with VTT files. They seem similar. Is it possible to support both? At the moment I would need to convert each file each time.
Hi, so the subtitles need to be loaded, ideally after each video has loaded. Loading 3 sets of subtitles for example against one video will make it look like this.
This is the result of running the action 3 times. I just called each sub file “car subs” hence why it shows by the same name 3 times. You may need to try this out because when the video player changes sources, I’m unsure whether the subtitle tracks are cleared each time or if they persist. If they persist then you may want to remove the previous one. You can’t apply subs to a video which hasn’t yet loaded in the player.
Use the action within the loaded metadata event which will trigger after each video has been loaded. You can load multiple subtitles by running the action multiple times and they stack up in the player controls as shown above.
VTT files support a lot more in terms of styling and are generally a more advanced version than the SRT file types. That being said, I’m sure I’ve managed to load SRT files though. Best thing is that if you’re able to send me the URL to one of your videos and the associated SRT file for that video, then I can try loading the SRT file and debug where necessary.
I’m sure with a bit of playing around with the actions and timings, you can do what you need to.
Thanks so can you show me how to trigger something after a “loaded metadata” event? not sure how that works unfortunately.
Also let’s say I have a Thing called video abs another thing called Transcript where I store multiple Transcripts per video. How do I load all the transcripts for a video when that number is different from video to video.
I converted the SRT files to VTT and they see to be working. Same exact transcript just different formats. Is this something that you can help fix The program I am using does SRT by default and for my purposes that would be easier.
Ok, I’ll make some adjustments so that both SRT and VTT files will work. When an SRT file is detected, I’ll do the conversion within the action so all you’ll need to do is supply the URL. I’ll also take a look at adding a new option that will accept a list of URL’s (each URL would be the URL to a subtitles file) and when using this, they will all load against a single video and appear as a list in the controls when clicked. I’ll try getting these done by the end of the day for you and hook up a quick demo.
The “loaded metadata” event is here…
Use that and you’ll get this which will trigger when the video has been loaded.
