Watch the recording and discover how you can create your own video player user interface with the Open Video UI

Thomas: Good afternoon, everybody. We're joining here from Belgium. So, if you're in another time location, maybe good morning or good evening, whatever. Anyway, welcome to our webinar on Open Video UI. While we wait for other people to join, let's quickly do an introduction round so you can get to know us.

My name is Thomas De Backer. I'm the Technical Customer Success Manager here at THEO. And basically, I'm responsible for the customer journey or the customer's experience with our products. With me I have Mattias Buelens. Mattias, do you also like to say a few words to our listeners?

Mattias: Sure thing. So, hi everyone, I'm Mattias. I work as a software architect at THEO. And I'm one of the main developers on the Open Video UI, which will proudly present to you today. We're really looking forward to that.

Thomas: Love your enthusiasm, Mattias.

Mattias: Yeah, we have lots to talk about today.

Thomas: All right, and before we start, there are a few practical things that I want to go through with you guys first: on screen, you should be able to see a UI, it's not our Open Video UI, of course. There are a few buttons which allow you to interact with us. First you have the react button, so, if you're really thrilled about a certain topic that we will show you, you can always share all the emojis with us, you can also share the dislike emojis also. You have a full screen button and a leave button. Don't use the leave button until the end of the webinar, of course. And on the right, you will see a poll button and a question button. We always like to start our webinars with a poll. So, when we get to that, use that button to share your answers with us. And if you have any questions, you can always communicate to us with the question section. There is a session reserved at the end of the webinar, and we'll go through them afterwards. The webinar will also be recorded, and the slides and recording will be shared with you afterwards.

Thomas: Okay, so let's kick off with the poll. The main question here is: how did you build your video player UI today? A couple of the possible answers are, first, you've built your video player UI from scratch, from the ground up, basically. You are already using THEOplayer's Open Video UI, which is amazing, of course. And you're using another open-source video player UI, or you are using a closed source video player UI, which is in this case then the THEOplayer UI that is delivered with the THEOplayer SDK. If you're using something else or have another solution, just select the other option, and you can type your response in the question section. So, if you press the poll button. We can see the votes. Okay. I see that already most of the people are building their UI from the ground up, doing all the work themselves. It's good to see because that's why we are doing this webinar, of course, to introduce you to the Open Video UI. All right, second option is: you're customizing another open-source video UI, and some people also work with our default THEOplayer UI.

Mattias: Also see one vote for the open video UI. So, yay. Love to see you here today.

Thomas: Yeah, indeed. Okay, good. So, we see most people are building their own video UI from scratch.

Mattias: Yeah, which is something that we do see a lot.

Thomas: Yeah, all right, good. Let's take a look at what we will discuss today. First, we will start by discussing why we built the Open Video UI. Then we will show how we developed it. We will show how you can customize it and use it on different platforms. Then there's the accessibility aspect also that we support. And finally, we'll end with showing our roadmap and the Q&A session.

But first, why the Open Video UI? Well, to answer that question, we need to go back to a bit of THEOplayer history. When our customers started working with THEOplayer, and they wanted to build the UI on top of that, they always basically had two options. The first option was to create your own UI from scratch, or to use another open-source UI. But it has a few downsides: it offers a lot of freedom, of course, you can create your own look, but you need to spend a lot of time and effort on building it all from scratch. Also, whenever you would upgrade your THEOplayer version, there is, of course, a risk that things would not work anymore. The second option would be to take the THEOplayer closed source UI, so the UI that we deliver with our SDK, and use that one. But in terms of flexibility, it's a bit of a disadvantage because simple things like updating your text or colors, is a bit of a complex process.

So, we looked at what do our customers really need. And it's quite simple:  it's actually an easy way to change the look and feel of the player, so they want to put their own branding in the player. And we at THEO, we always like to keep on improving our products. So, we thought, okay, let's do something with that. And that's why we introduced the Open Video UI.

Mattias: Yes, indeed.

Thomas: Yeah, with this open video UI, you can see it a bit as a kickstarter for your UI development. It's component-based and it's open source, so, with those components, you can start by easily updating those or adding simple things to your UI without extra effort. And you already have the basic foundation available. And you can add a lot of personal branding to that UI, for example: colors, buttons, logos, whatever you can think about, you can add it. So, it really saves you as a customer a lot of time and effort also.

Mattias: So that's why we started developing the video UI, to achieve those goals. Now let's take a closer look at how exactly we did that. So, first of all, we wanted to make the new UI much easier to use. We made it really easy to get started by giving you a default UI out of the box with a basic layout, but already a full video experience that is fully featured, everything that you can expect from a video player is already in there. And if you then want to change the layout, we will also make it really easy to do that. We give you all of the components that we use to build our UI as building blocks to build your own UI. You can place them anywhere you want in the UI. You have full control there. We also made it easy to change the styles: every color, font, or length that we use in the UI, and in the UI components, that has a clear name, like the button icon color or the control bar heights, you can change the value of all of those named items through things like CSS custom properties or material team variables. And you'll know that those changes will also apply to other components that we introduce later on. So, you can confidently make your brand style in the new UI and know that it'll work with everything that you build.

We also wanted to make the new UI feel more native to the platform than we did before. Whether you're developing for Web, Android or React Native, the new UI should feel at home in your code base. It shouldn't feel like an ugly duck out. So that's why we make full use of the development toolkit that is already available for each specific platform. So, on Web, we use HTML5, JavaScript and CSS together with web components so that you can use the UI with or without an application framework. On Android, we use Jetpack Compose, so you can write your UI in the declarative API using Kotlin, and in React Native, well, naturally, we use React components so that you can plug those directly into your React app. But the UI shouldn't only feel native as an app developer, it should also feel native for your users. So, we automatically adapt the UI to the device form factor. For example, on mobile, we'll move the play button from the bottom bar to the center overlay so that it has more touchable space. And since the volume is also handled by the platform on these platforms, we hide the volume slider altogether. On a smart TV, we have more screen real estate, so, we make the buttons and the seek bar a bit bigger so that they're really easy to read.

Now here is what that looks like in action with the Open Video UI for web. So, you can change the volume with the regular slider, you can seek through the video, with thumbnail previews. And you can change the style of subtitles - you can turn on French and then, for example, make the font monospace or make it yellow and it'll apply immediately. Now in this demo, we also wanted to show you what mobile and TV look like. So, this is something that would usually happen automatically but here is the mobile version of the web player with now a seek button in the middle together with the play button. And we make now the menus take up the entire player so that you have, once again, more touchable regions - easier to touch. And for TV, we again, make everything bigger, make the menus take up the entire sidebar of the player so you can change all of that. Now, in this demo, we didn't have a TV remote connected to this desktop, so we can't show that, but you can definitely try that out on your own TV.

So that is the Open Video UI for web. And all that you've seen is already provided by the default UI. It has a ton of features, but it's actually really simple to use. All you have to do is load up the Open Video UI on your webpage and add a THEOplayer default UI HTML tag to your page. You pass along the configuration for THEOplayer, which you're already used to, if you're already using THEOplayer, along with the source of your video, and that's it, you're done. This is a fully functional player, and you can ship that off. You get the great user experience for desktop mobile and web, and mobile and TV, with live, VOD, advertisements, casting to Airplay, everything that you can imagine, all with just a single default UI element.

Now, of course, if you need more customization, you can create a custom UI. So, you swap out the THEOplayer default UI tag with a THEOplayer UI, and now you can put any element that you want inside that UI. So, for example, you can place a play button with the THEOplayer play button tag, you can place a seek bar with the THEOplayer time range tag, you name it, you think of it, you can place them everywhere. You have full control over the layout, it's all controlled by CSS. And you can even add your own buttons to this, this is just HTML, you can put a button there, a paragraph, a whole other component that you have in your app. Doesn't matter, it'll work.

Now, that is the Open Video UI for Web, a powerful toolkit for building your next video player. But of course, we have only seen the tools so far, so now let's actually build something with this, because we know that our customers build a lot of cool video players, whether you're scrolling through video, through your social media, or you're watching your anime show on a laptop, or you're enjoying a movie on the big screen, your video is taking center stage, but the stage changes a lot. So, you want your video experience to be tailored to the specific use case that you're dealing with. You want to make it really your own. So that's why the Open Video UI lets you build this, lets you do this.

So, we'll now take a look at some of the demos that we made where we showcase some use cases. So, first of all, you can already do a lot with just the default UI. We can show you a video of this - so here is the default UI, but now styled to be a little more Christmassy to get into the holiday spirit. So, we've changed the colors, we've changed some fonts, we've changed some lengths, and all of this is just controlled by some CSS properties. And this is live, so you can change them from red to orange, some red to blue, and suddenly, the UI is a bit more, orangey: orangey Christmas, why not? So, this shows that you can already do a whole lot with just the default UI. This would be much more difficult with our old UI, where you only had like two or three colors that you could change. Here you can change any color that you want.

So that is the default UI. Of course, if you want more control, you can build a fully custom UI. So here we have some fictitious streaming platform where you want to make your video player for. And now the playback controls are all in the center, like the play and the seek buttons to the left and the right. And we even put a custom button in the bottom right corner to watch the next episode. This would be much more difficult with our old UI. And probably you would end up building it all from scratch. But with the Open Video UI, you can actually reuse a lot of components, you don't have to reinvent all of the logic yourself, even if you go for a use case that is as extreme as this, like building your own layout.

Now, finally, for a completely different UI. This is a UI very specifically tailored for mobile, portrait style videos, very short. You will want to focus more on social buttons and less on providing a lot of controls for the video. But this also works. You can still take our components, put them in a completely different layout and build your video player that way.

So, if these demos have inspired you, I definitely recommend you read our guides on how to get started with custom UI's. And all of these demos are up on our website, so, you can try them out yourself, you can toy with them, and you can check out the codes. It's just HTML and CSS. So, you can get some inspiration and copy them into your own projects.

Now that is all possible with the Open Video UI for web. But of course, there's more than just the web. We know that our customers have a lot more platforms that they want to support, like Android apps, iOS apps, TV apps for Tizen and WebOS, or React Native if you're trying to target all of the platforms at once with a single code base. And of course, we want our Open Video UI to work on whatever platform you're developing for.

So, let's start with the largest platform on mobile: Android. The Open Video UI for Android uses a Jetpack and Post framework, and this gives you a fully declarative API to build your UI that is much easier to use than the classic Android system. And here it is in action. Again seek bar, play button in the middle, everything that you've seen on the web already, but now native on Android. And it's also tweaked a little bit to look great with the material theme that is common on Android, so, ripples on the buttons and more materially colors too. So that is the Open Video UI for Android. Again, to put this in your code, it's just putting the THEOplayer default UI in your compose layouts. That's all you need. You put your player config there, you put your source there, you compile it and you have this running in your app. If you want to change the colors, you have the THEOplayer team that you can wrap your entire default UI with. And you can change the colors individually. If you've used Jetpack Compose before and you've seen the Material team stuff, it is very similar to those. So that should give you an idea on how that works.

Of course, if you want to build a custom UI, you can do that too. Again, lots of inspiration from the Material components for Jetpack. So if you've seen this before, this should seem familiar. You now have the UI controller instead of the default UI. And that provides basic scaffold layout where you can put your composables in like the top slots or the center or the bottom. So, in this example, we've put the play button in the center and in the bottom we have the seek bar and then the current time and the full screen button in a row at the bottom.

So that is, again, very similar to the ideas that we had on web, but now native on Android, native compose, and this will work with everything that you already have in your compose app.

Last but not least, we have open video UI for React Native. So, if you're already building a React Native app targeting web, Android, and iOS, you can put our UI in there. And again, I'm repeating myself, but it's very easy to get started. You just put the default UI tag in your app, put the player config in there, and you're off to the races, you can start playing with your new UI. There are more examples on our GitHub if you want to build a custom UI for this, too.

Thomas: All right, then we come to accessibility. It's actually an important part, but it's often developed at the end, or it's forgotten. And we have a lot of our customers that are coming back to us on this topic. So that's why we thought it's really important that we dive into this one also.

Let's start with what is actually the accessibility. Well, we have four principles: the first one is perceivability - the content must be available to the user, he needs to be able to hear it or to see it. And then we have the operability part - the user needs to be able to input or to interact with the product. Understandability is the next one - it needs to be understandable for a user to interact with the product, clear labels, and clear instructions, and so on. And the last one is robustness - the product must be able to work on different devices, different platforms, different browsers, but also with assistive technologies.

Now, if we would apply these principles, onto a video player, then we come to perceivability. But then, I think most people always assume that, that the end user is always able to hear and to see the video content that's shown always perfectly, but there are people that don't have perfect vision. And for example, those people need the enlarge the buttons in their UI. Or you have hearing impaired people, those people want to enable subtitles during the content. But for that aspect, we also need to take into account the permanent or temporary disabilities. So, for example, you can also walk through a loud environment where you're not able to hear the content. So, you want to be able to enable subtitles for just a small period of time. So, it's also an important one to think of.

Then we have operability. For your video player UI, you want to be able to interact with it through the keyboard, through the mouse on the PC, with your fingers on a smartphone or with a TV remote on smart TVs.

And for the understandability part, the user must be able to easily and quickly recognize how he can navigate or interact with this UI.

And then of course for robustness, it needs to be able to work on all types of devices and platforms. And if you take into account the accessibility for the Open Video UI, well, then I can tell you that we have excellent support for screen readers already. So, it's the perceivability part. Thanks to using semantic HTML and ARIA attributes, we're able to foresee this. The THEOplayer also offers already best-in-class support for closed captions and subtitles, but with the Open Video UI, we're able to let the users change their font size and their colors through the settings, like you saw in the demo. We also support keyboards, mouse, touch, and TV remote interactions. And of course, we always test this with our test automation framework on a different range of devices, browsers, and versions all in all.

Thomas: So, if we take a look then at the roadmap, we already delivered in 2023, the open video UI for Web, for Android and React Native. For Web, we focused a bit more on the monetization part because this is a really important part for our customers. For Android and React Native, we didn't get to it yet, but it's the first thing on our to-do for 2024. Next to that, we also have a lot of customers that have non-English speaking viewers, and they also want to interact with UI that's not in English. So that's why we also will enable localization support for Web. Next to that, later on in 2024, we will first focus on enabling the Open Video UI on different platforms, and iOS will be the first one. And after that one, we will focus on the TV platforms: for Android TV, TV OS, and smart TVs.

We always like to update our roadmap based on customer feedback. So, if you have important features that you would like to see earlier developed, let us know, we can always see if we can put it earlier in the roadmap.

Thomas: Now, before we head into the Q&A session, we would like to summarize the Open Video UI with a few key takeaways.

You should see the Open Video UI as THEOplayer's new open-source UI. And that is basically a kickstarter for your UI development. It will be cross-platform, it's already there for Web, Android, and React Native, and it will be there soon for iOS and other TV platforms. It enables you to do rapid customization, so to quickly and easily customize your UI for your own branding and look and feel.

It's accessibility compliant, and of course, it's an important one, it's actively maintained by our team. So, support and maintenance are covered by THEO Technologies.

Thomas: Well, that's it. Then we come to the Q&A. I think I saw some questions already popping by. So, let's take a look at those.

Mattias: There's been a ton of questions. So, comment from Jonathan: he started building his own UI, but it was horrible. I completely understand that, it is a lot of work. So, we're hoping that the Open Video UI is now another option for you that you can maybe look at that.

Thomas: Next one is: “Do you know about Mux elements? If yes, what do you think about it?'' I think this is one from Mattias.

Mattias: Yes, so our friends over at Mux have made the Media Chrome UI project, which we took some ideas from. We think it's a really good idea, it's also built on Web components. And so, you'll see some things appear in the Open Video UI like that. So, the idea that you build your own UI using components, that is something that we took. But Open Video UI on the other hand is very focused on THEOplayer, we give you all of the features that you have with THEOplayer whereas the Media Chrome only gives you the common denominator of your player's feature, which means you probably wouldn't get very good support for ads there.

Thomas: Okay, good. Next one: “how's the performance of the SDK in React Native versus native Android iOS?”

Mattias: Well, of course, React Native is always going to be a little bit more overhead compared to doing everything native. But from our testing, we haven't seen any noticeable lag or noticeable jitter due to the UI. We've optimized the UI enough that it works good enough.

Thomas: All right, I think that's a clear answer based on the reactions.

“Is it possible to add or remove new UI elements during runtime?”

Mattias: Yes, so this is really great about web components in JavaScript. You just use the DOM APIs. So everything is just an HTML element and you can just do a UI.append child or UI.remove child. to change the DOM and everything automatically updates. So that's really cool. For Android, we're using Jetpack Compose, so, every time that you change the composition, the UI updates too, and everything gets auto wired.

Thomas: Amazing, right?

Mattias: Yes.

Thomas: Next one: “will this be similar in case of Android and Chromecast? For example, I want to change the subtitle color in casting device or change the subtitle selection box in a different way.“

Mattias: So, if you're talking about, if on the sender side you change the subtitle settings, then those should be forwarded to Chromecast receiver too. I'd have to check that might not work yet, but that is definitely something that I think THEOplayer should do. So yeah, that would be a really good feature request. As to the styling of the UI, we consider the THEOplayer sender and the THEOplayer receiver to be more or less independent from each other. So, you choose your styles for the sender, and you choose your CSS style for the receiver, and you build your own app for those, and we don't copy like CSS changes to the sender over to the receiver. If you want to do that, we recommend you make a receiver app custom for your brand too.

Thomas: Okay, good. Next one: “how can I still leverage my Chrome OS UI built on top of the player in the past? Can I reuse the code but still move to the open video UI?”

Mattias: This is a bit of a tricky case because now you're mixing and matching styles of developing your UI. You can probably get pretty far with it, so, the Open Video UI manages the THEOplayer instance on its own. So, whenever you create a THEOplayer default UI or a THEOplayer UI element, that creates a Chromeless player behind the scenes. But we do give you access to that Chromeless player. So, if you have existing UI components built on top of that, you can probably make that talk to the Open Video UIs instance of the THEOplayer Chromeless player, and then that should work. I wouldn't recommend it, I would recommend you look into the Open Video UI components because it's probably easier to do that. But yes, there should be a way to do it.

Thomas: Okay, good.

“Can we try it out if we're not using THEOplayer?” It's quite related to the THEOplayer. So yeah, you need to be a THEOplayer user or customer to be able to use it. 

And then next one. “Do we need to pay extra for this or is it included as a THEOplayer customer?” Okay, this relates to the previous one. Yeah, it's already included in the normal pricing.

Mattias: So, the open video UI is fully free and open source on our GitHub with the caveat that, well, you have to use it together with an existing THEOplayer license. But other than that, when you're already using THEOplayer, go nuts. Like fork it, tweak it, flip it upside down. The code is all open and you can use it however you like.

Thomas: Yeah, indeed. Next one: “how do we know which element is which? Is it documented somewhere?” I think this is one for you, or just?

Mattias:  So, on our GitHub, you can click through to the documentation website, which has all of the examples, all of our guides, and also importantly, our API documentation. And in our API documentation, we list all of the components that we offer, along with the HTML element names. So, you can check out the API docs, go through the components and then find all the attributes that you can use to configure and to style it.

Thomas: Right, the next one is related to advertisements: “is it possible to customize advertisement player and its behavior? Example, I want a sticky advertisement player inside my main player, so main content will run as it is, and I need a small player at the bottom corner that will run some gaming ads, muted.”

Mattias: That is a really interesting use case. So, keeping your video playing while muted, while the ads are playing. That is not something that the Open Video UI supports right now, but it's something that we can look into. It'll require a little bit more support from THEOplayer itself because now THEOplayer only shows the ads, or it shows your video. So, we'd need to change a bit how that works so that you can have ads and video playing at the same time. But it's a really good idea, yes.

Thomas: Okay, another one on ads: “is there anything that allows us to offer greater advertising and/or sponsorship opportunities?”

Mattias: I mean, we give you the toolbox to build a great ad UI. You can put some more components around the player to put even more ads. Yeah, this is a bit of an open question, I think. This is not something that you would solve only with the open video UI, but we can talk later.

Thomas: Okay, and that was also the last one. If there are any other questions, you can keep on raising them in the chat, we can come back to you after the webinar also.

Thomas: There's one last thing that we'd like to share with you. Our marketing team has done some amazing research on video companies and media companies that are offering a video playback experience cross-platform to their end users. They came up with this amazing report. It's called the State of Cross-platform Video Playback in 2024. It's a really big hit, it's a good read and gives you some interesting insights on the current challenges that other customers have. So it's that great of a hit that they're already started working on the next edition. This will also be shared as a PDF with the slides and with recording on this webinar. So definitely, take a look at it. If you are interested to also share your feedback, you can contact our marketing team to set up like an interview for the research.

And with this, we come to the end of our webinar. I've really enjoyed sharing the new features about the Open Video UI with you guys. I hope you liked it too. If you have any amazing work that you create with the Open Video UI, definitely let us know. We really want to know how you are using our products. So, thank you very much, and I'd like to see you soon.

Mattias: Thank you, everyone.

Thomas: Bye bye.

Mattias: Bye.