How can I leave comments on a video with time code?

[pork1977gm]

Haha I like that!

[jj11]

Love the conversation going on here! Wanted to follow up with two clarifications for @pork1977gm

1. can comments be saved to an individual video? I believe so but would love for you to confirm.

2. can the video player support photos too? (JPG, PNG or TIFF) would be crazy awesome.

Thanks!

[pork1977gm]

When you say “video comments saved to an individual video” what do you mean exactly?
Nothing can be physically saved “to the video”, as in the file itself. You can store and save all this stuff in your own database though, using Bubble stuff and all that.

As far as I know, the video player won’t display an image files, you can try but it’ll probably blow up.

[jj11]

Yeah - store the comments in bubble per that specific video. Great!

Photo - hah, don’t want to make it blow up now.

[nocodepod]

firstly, thank you for the reply and apologies for late response-- just coming back after weekend.

second:
Yes, I’m looking to do ‘podcasts’ so mp4 is fine.

I’m looking to have an audio player play a podcast file (at this stage can either be uploaded by user or plugin to an .mp4 listed on an URL–not too fussed) that allows listeners to comment on the file. I need these comments to be timestamped and (ideally) popup when the audio track player hits this timestamp.

basically looking to do something similar to Soundcloud as well as what your video demo does.

I’ve had a play with your demo and wanted to ask some q’s as I couldn’t figure out some things:

1. with the ‘comment popups’ how does the user actually ‘comment’? I had a dig through and couldn’t see anything.
   Can I just pull the ‘comment’ data from a static field in my app?
   Can you please tell me where to look to see this?

2. how does your app show these comments?

To try and achieve what I’m trying to do I’m thinking along the lines:
-I have a static input field where users would comment.
-This comment would be timestamped
-When player hits ‘timestamp’ it would pull the comment data and display it.
-I’m hoping that I can pull the ‘comment’ data from a static field and that it would auto-timestamp this info and display on screen (at appropriate point in ‘vid / audio track’. - is this possible?

You mentioned to one of the other users:

When you say “video comments saved to an individual video” what do you mean exactly?
Nothing can be physically saved “to the video”, as in the file itself. You can store and save all this stuff in your own database though, using Bubble stuff and all that.

Can these comments live in app (rather than encoded to the vid file) and then popup on vid when the at the appropriate time stamp?

Based on what I’ve described, would your app be suitable for this?

many thanks in advance

[pork1977gm]

I’ll get back to you on all this, I’ll put some extra bits into the plugin that should allow for multiple timeUpdate events. Once I’ve done, I’ll amend the demo and reply back explaining how it works.

[nocodepod]

amazing thank you! happy to DM instead if it’s easier for you.

[pork1977gm]

Hi @nocodepod

Ok, so I’ve made some changes.
To answer your first question above, when you asked “how the app showed these comments”
There’s a checkbox sitting just above the video element which when checked, and you start clicking the video player, it pops up with a little comments box there. It’s actually a draggable element because you can move them around if you have coordinates to which you now also have available as states upon clicking areas in the player.

I’ve added a couple of actions regarding “timeUpdate” events. They were somewhat tricky but you’ll see 2 of them which look like this…

There both act the same with the difference being one is designed to take for a single item (number) and the other is designed for a list of numbers. You can use these to create timeUpdate events on the player so when the video is playing and it reaches a specific time, the event called “A videoJS player reaches a specified time” will be triggered.

If you load a list of numbers, say you have 20 numbers in that list then you’ll have all the timeUpdate events for that particular list. This means if your list is like 5,10,25,90,120 etc then when playback reaches those intervals (which are in seconds) the event will trigger. It’s this event which you see triggering in the demo.

I’ve done quite a bit of testing with this to try and stop it firing a zillion times, which I think I have it sorted now so that should help you do what you want to do

I’ve also fixed a couple of bugs, so when the video player is hidden by Bubble’s hide element action, if you have a video playing, it should now stop so it doesn’t keep on playing when the element is invisible.

Oh, there’s a way to add to video thumbnails too but it’s a little tricky.
Instructions updated!
[PLUGIN] - VideoJS Advanced + YouTube, Vimeo, Wistia, HLS, DASH, MUX (plus more) - Need help / Plugins - Bubble Forum

[jj11]

Update 2/19: We’ve successfully built our video review app which tracks comments per the video’s time code, and much more. This feature simply wouldn’t have been possible without this plugin and @pork1977gm help.

@pork1977gm has built one of the best and most advanced video players for Bubble.io. You can do nearly anything with this plugin, and it’s matched by the best support I’ve received in a decade.

Do yourself a favor, and subscribe to this plugin if you have any video/audio needs for your application.