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

jj11 · 2021-01-27T06:18:34.634Z

We’re getting close! Will DM you.

greg7 · 2021-01-27T06:21:19.117Z

Dope! I’m pretty handy with bubble, let me know if you need any help in other areas!

pork1977gm · 2021-01-27T18:50:49.001Z

I’ve added the time stamp into the demo page I’ve been working on. Could do with some improvement but I think it works ok!
https://paul-testing-4.bubbleapps.io/version-test/web_videos

image961×601 223 KB

jj11 · 2021-01-27T18:52:40.011Z

Yup, you did it! Thank you so much!!!

nocodepod · 2021-01-28T00:16:00.240Z

Any plans to do this for audio?

I need timestamped comments for audio files

phrase9 · 2021-01-28T01:58:08.034Z

Further to our discussion on the other thread, can these comments be saved into the video? If so, can’t subtitles/captions be added this way as well? Because essentially they are the same thing isn’t it?

pork1977gm · 2021-01-30T08:40:01.622Z

I’ll take a look at making it work with audio (as in the player plays mp3 and other audio files).
Will also look into adding different audio tracks to a video file, although I’m not sure right now what type of video formats work with audio tracks but will investigate it anyway.

pork1977gm · 2021-01-30T14:51:34.355Z

I have these audio files supported right now…
mp3, wav, aac, flac
Kind of small but is there any other file types you want to see play?

phrase9 · 2021-01-30T14:55:57.152Z

I am not the original requester but I too am interested in this and from my side those are the most popular audio formats so I don’t know of any others right now.

pork1977gm · 2021-01-30T15:15:06.232Z

Yeh I think they are the most popular and they play with the correct mime types anyway which is good. I did try other formats to which had either browser compatibility issues or just didn’t work without further work. Hopefully @nocodepod will be ok with those. Whilst I’m here, it’s possible to get Subs burnt into MP4 files if that will be ok? I’ll look at doing it soon.

phrase9 · 2021-01-30T15:38:53.172Z

I am not sure. I am not a programmer but I am trying to do some research on the most popular methods involved in automatic transcription and also subtitling in order to give a precise indication of what I would like to see. Your efforts are moving faster than my research, which is a challenge I welcome )

pork1977gm · 2021-01-30T15:42:03.573Z

Haha I like that!

jj11 · 2021-01-30T19:00:02.372Z

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

can comments be saved to an individual video? I believe so but would love for you to confirm.
can the video player support photos too? (JPG, PNG or TIFF) would be crazy awesome.

Thanks!

pork1977gm · 2021-01-30T20:01:27.831Z

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 · 2021-01-30T20:30:55.953Z

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

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

nocodepod · 2021-02-02T02:22:46.975Z

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.

Screen Shot 2021-02-01 at 5.31.25 PM1726×1848 265 KB

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

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?
how does your app show these comments?

Screen Shot 2021-02-01 at 5.37.11 PM3260×1366 632 KB

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 · 2021-02-02T14:59:55.291Z

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 · 2021-02-02T20:45:54.219Z

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

pork1977gm · 2021-02-03T11:07:46.240Z

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 · 2021-02-19T22:24:18.666Z

Screen Shot 2021-02-19 at 8.44.35 AM1654×921 260 KB

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.