Taking subtitles to the next level

Recently, we created a post about what we’ve been doing in 2023, where I mentioned how we’ve been working on improving video experiences. More specifically: we generate subtitles automatically and even customizing how they look based on a custom theme. But after seeing some of our customers building e-learning experiences, we decided to take it a step further. We can do more with text!

Introducing the text component

Besides our most used component <mave-player>, we also have <mave-clip> meant to be used to integrate nicely within your UI, where there is no need for a player and/or controls and is made for performance. And we also have <mave-list> and <mave-upload> to easily build your own extensive video experience. Today we’re launching <mave-text>: a component to embed a textual representation of a video directly onto your site.

Without further ado, here’s the actual real life example what you will get with this new component:

Just as the other components, you can customize the look and feel of the text component, truly making it your own. It’s what you expect from webcomponents, but with some extra’s we’re providing with mave.

How to use it

You could use the text component alone and have the text version of the embed. But, the most common use case would be along side the player component like so:

<mave-player
  embed="ubg500ZcbxpAbZq"
  theme="dolphin"
  style="display: block; width: 100%; overflow: hidden; background: center / contain no-repeat url(https://space-ubg50.video-dns.com/0ZcbxpAbZq/poster.jpg); aspect-ratio: 16 / 9;"
></mave-player>

<mave-text embed="ubg500ZcbxpAbZq"></mave-text>

Because it uses the same embed id as the player, it will automatically sync with the player. You will need to set a certain height and set the overflow of the element to make it scroll, but other than that - you’ll get most out of the box. So when you pause the player, the text will also pause. And when you seek in the player, the text will also seek to the correct position.

But, you can also click on a sentence in the text to jump to that position in the video. This functionality can also be altered by providing the element clickable="false". And there are more options that you can change.

Our plan is to add more features to the text component. Let us know what you think and we’re looking forward to see what you build with it.