Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

WebVTT on meta event


I have a WebVTT track with json data and I need meta events fired so that I can show a related image or data. I only need this for Chrome Desktop.

When I load the WebVTT track as subtitles, it shows the text overlaid with the video. So I know the WebVTT loads correctly. But when I change the type to metadata, I do not get events for on('meta'). What else do I need to do to make this work?

Thanks!

me.jwplayerInstance.setup({
hlshtml: true,
primary: 'html5',
autostart: true,
autoplay: true,
width: '100%',
height: '300px',
playlist: {
file: url,
preload: 'metadata',
tracks: [{
file: vttUrl,
'default': true,
label: 'English',
srclang: 'en',
kind: 'metadata' //subtitles, metadata, captions, descriptions, chapters
}]
}
});


7 Community Answers

Alex

JW Player Support Agent  
0 rated :

Hi there,

“metadata” is not a valid option to use with “tracks.kind”. As per our documentation, the only acceptable values are “captions”, “chapters” and “thumbnails”.

Also, the .on(‘meta’) API event will only return metadata about the content being played. It will not return information about any side-loaded captions, thumbnails or chapter tracks.

In order to better understand your use case, can you elaborate on what you are trying to do? Are you trying to have images show up somewhere outside of the player when a certain part of the content is being played?

Let me know. Thanks!

Frik Strecker

User  
0 rated :

Hi Alex,

The WebVTT standard allows for metadata. When do you plan to support the full WebVTT standard?

Our use case is to record a web conference and play it back later. However, we need to record the audio track only with meta data representing the visual parts of the recording.

Is there another way for me to execute Javascript at different times during playback? I need a JSON blob to be passed to Javascript code. Sometimes the JSON blob will simply refer to an image to be displayed. Other times it will contain annotations that needs to be overlaid on top of the image. Other times, it will contain links to a youtube video that will be played back, etc.

Thanks,
Frik

Alex

JW Player Support Agent  
0 rated :

Hi Frik,

I can ask one of our Product Managers if support for WebVTT metadata tracks is on the roadmap. In the meantime, would you be providing this audio stream in HLS? If so, would you be able to include timed ID3 metadata in the stream? You would be able to use that metadata as shown on this demo page. That would be the recommended way to go.

As soon as I hear back from the Product Manager about WebVTT metadata tracks, I will let you know.

Alex

JW Player Support Agent  
0 rated :

Hi Frik,

I have heard back from one of our Product Managers who said that player support for WebVTT metadata tracks is something that is on our backlog but there is no clear timeframe for a release. With that being said, he also suggested I share with you this link to another demo page that parses a VTT file for timed metadata to introduce hotlinks in the player’s display. You should be able to accomplish what you are trying to do in a similar manner. That demo page is a proof of concept and not something we can support or provide assistance with, but it shows that it should be possible with JavaScript.

Please let me know if you need any more help or have any other questions.

Thank you!

Frik Strecker

User  
0 rated :

We are using HLS, but ID3 is not good enough. Since slides are represented as single events, the scrubber does not work as expected when jumping around in the playback. If you jump to a point after a slide change, you will see the wrong slide until there is another ID3 event to change the slide. With VTT metadata, you specify the time range for the slide and the scrubber works as expected when jumping around.

Alex

JW Player Support Agent  
0 rated :

Hi Frik,

I would suggest taking a look at the other demo page that shows how one may be able to parse WebVTT metadata tracks to accomplish what you are looking to do. Proper support, as I’ve said, is on the backlog but this should be able to work as a workaround until then.

Thanks.

frik

User  
0 rated :

Thanks

This question has received the maximum number of answers.