[Feature Request - Extra] Point of interest indicator

[nwparker]

It would be cool to have point in a video slider that were clickable (jumps to that section) to detonate points of interest. Perhaps even with a tooltip on hover.

Maybe something like this?

I know Youtube does something sort of similar with segments of a video. That would also be cool to add.

But I'm really not sure if this type of thing falls into this framework or not. Would be nice to hear some thoughts.

[heff]

Hi, thanks for the idea/request. Can you say any more about what you want to use it for? I think I know what you're looking for but it would be good to know. In general I'd call these chapter markers, but what you're describing doesn't sound like chapters, and youtube shows chapters a little differently now.

[nwparker]

Hi Heff,

Thanks for the reply. I think chapter indicators would be a cool feature.

However, what I was imagining was more similar to how Loom does POI in a video:

[dylanjha]

Thanks @nwparker -- First stab at what this could look like: maybe Media Chrome could bake this into the existing <media-time-range> component?:

<media-controller>
  <media-time-range> 
    <media-time-indicator time="20">
       <svg slot="icon"><!-- thumbs up icon --></svg>
    </media-time-indicator>
    <media-time-indicator time="30">
       <svg slot="icon"><!-- smile icon --></svg>
    </media-time-indicator>
    <media-time-indicator time="40">
       <svg slot="icon"><!-- heart icon --></svg>
    </media-time-indicator>
  </media-time-range>
</media-controller>

What I'm thinking is that there's a new <media-time-indicator> component that specifies the time in seconds, is expected to be used as a child of <media-time-range>, and has an optional slot for the icon.

I like this idea, I'm going to convert this issue to a discussion to get more feedback from the community.

[nwparker]

Thanks @nwparker -- First stab at what this could look like: maybe Media Chrome could bake this into the existing <media-time-range> component?:

<media-controller>
  <media-time-range> 
    <media-time-indicator time="20">
       <svg slot="icon"><!-- thumbs up icon --></svg>
    </media-time-indicator>
    <media-time-indicator time="30">
       <svg slot="icon"><!-- smile icon --></svg>
    </media-time-indicator>
    <media-time-indicator time="40">
       <svg slot="icon"><!-- heart icon --></svg>
    </media-time-indicator>
  </media-time-range>
</media-controller>

What I'm thinking is that there's a new <media-time-indicator> component that specifies the time in seconds, is expected to be used as a child of <media-time-range>, and has an optional slot for the icon.

I like this idea, I'm going to convert this issue to a discussion to get more feedback from the community.

I like the idea, it makes sense! Thanks for the work here

[martinbean]

+1 for this. Chapters can be added to a video using a standard WebVTT track, so it would be good to surface these in the player as well.

I have a video on demand site that makes heavy use of chaptering in videos. It carries pro wrestling and combat sports events, so videos contain multiple match-ups and bouts that are designated using chapters, but I currently have to list these in my web page with event handlers to dynamically set the video currentTime on click. It would be great if these chapters were also shown in the video itself.

[kashyap07]

We're currently using a 3rd party plugin (https://github.com/spchuang/videojs-markers) on videojs videos in our app - this would be very helpful when implementing a feature (a note - taking one, where points of interest are marked with some text on hover) with media-chrome.

Here's what it looks like at the moment: