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

Hello my fellow bubblers!

I’m beginning to work on a new feature, and I would love some advice on the best way to approach building it out.

I am looking to create a view review tool similar to that of (frame.io) where a user can leave a comment on a video. When that happens, I’m looking to track the time code of where the comment was created, and to create a “bookmark” that lets the user navigate directly to that section of the video (where the comment was left), including a visual of the comment that appears above the video.

I have attached our mockup here of what we’re trying to accomplish. If anyone has ideas on how I can accomplish this feat, I’d really appreciate it. Thanks so much!

Screen Shot 2021-01-04 at 8.55.10 PM

1 Like

What plugin are you using to play the video? Perhaps it has a built in time tracker that will allow you to extract that value.

Still trying to find a video player that has that capability!

I’m not familiar with all the players out there, but my assumption is one of them must have it…and if not, you could always contact the developer to request a feature addition; you would maybe need to fund it, but I believe plugin developers are open to those types of arrangements.

Ok, I will certainly add this to my search. It’s a good starting point - thank you for your time!

1 Like

I’m not sure if this could work but if you could start a workflow WHEN the video starts you could create your own timer that starts ticking at the same time or WHEN the timer starts if you could make your own with Javascript that references the video’s time in real time (which would be the best way) and a datatype of all the comments with time stamps, a field for which comment box it’ll appear in which is chosen using a Random String from 1 to 5 called Comment Box and a field for the video itself; the datatype would be called something like Video Comments. You’d then a few groups like in your image dotted around the video which show depending on the comment box field in the datatype. You’d then have When Do a Search for Video Comments with the constraints Video = this video and time stamp = Your Timer’s time and then on the comment boxes you’d have a text element in each of them with your profile image and time stamp and a condition on each comment box “When Do a Search for Video Comments with constraints Comment Box = 1 this is visible” with not visible on page load ticked for the first comment box, then do that for each of your comment boxes.

I think the hardest part is getting the time from the video but it definitely can be done.

1 Like

Hey @jj11
Not sure if you still need this but they’ll soon be an advanced videoJS plugin added to the store which will allow you to trigger an event at either a given percentage played of the video or at a specific time in seconds. When the event triggers, you should be able to start poping up your comment boxes.

image

3 Likes

Very impressive! I’m going to drop you a message.

@jj11 if you get this working I’d love to test it out and provide feedback, I’m sick of Vimeo for client reviews.

1 Like

We’re getting close! Will DM you.

1 Like

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

1 Like

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

4 Likes

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

Any plans to do this for audio?

I need timestamped comments for audio files

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?

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.

1 Like

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?

1 Like

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.

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.

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 :smiley: )