IBC2024 TALK

Mastering Cross-Platform Video Playback with React Native

Watch the recording of the IBC2024 talk and learn how to master cross-platform video playback with React Native

  • Viewers expect premium experiences across all devices—web, mobile, smart TVs, set-top boxes, and gaming consoles. Meeting this expectation can be especially challenging for smaller teams competing with major players.

  • While React Native simplifies cross-platform OTT app development, premium features often still require native development, as well as integration with third-party DRM, analytics, and ad solutions. This can be tough for teams with mainly JavaScript developers.

  • The THEOplayer React Native SDK helps reduce the complexity and cost of building and maintaining cross-platform OTT apps. It offers premium features, ready-made connectors, and support for web-based smart TVs—all backed by an experienced video team.

 

This video was part of IBC2024 CE Sessions

Webinar Transcript

Introduction
Welcome everybody!
So today we will be talking about React Native, the big problems that people have doing cross-platform playback and how React Native can actually help.
I'm representing THEO, but also as some of you may have heard, I'm also representing Dolby as of now as well.
So let's kick it off!
 
Challenges for a Streaming Service

And I think one of the things to start with is something that I usually see and hear when I'm talking with customers: 

I usually ask them - what are the biggest problems you are really having? And it's very common that the problems that come back are problems like: we need to ensure that there's a premium video experience, because the services like Netflix and all of the other big giants are setting the bar pretty high. But also, they still want for themselves and their teams to be able to sleep at night, so they need everything to be super stable, which is making things already a bit more complex. And then of course, they always have the targets from their business - they need to get revenue and they need to be profitable.
And if you really start asking them - what are the metrics that you are really focusing on? What are the key aspects? Then usually what comes back is - we needed to interact fast when we do channel startup, it needs to start fast, but also it needs to keep playing so no stalls, smooth ad transitions, all of those kind of things. And obviously, it needs to be available across device. And if I look at myself, we started THEO 12 years ago, back then, if you were playing video on a web browser, usually in Flash or in Silverlight, that was fine, that was the expectation that everybody had. But today, of course, people want to watch it on their phones, on their TVs, in their cars even.
And actually, what you need to support is whatever device that your user has in front of them right now. Because if they cannot watch their content on that device, they will just look at one of the other experiences. And it's actually a bit of an unfair fight because the big brands like Netflix, are getting that expectation that they're available on every platform. But then the question usually is - how do you compete with a company like Netflix, which is spending more than two billion every year on R&D?
Well, that's usually where people start thinking about platforms like React Native or Flutter or anything else which is a cross-platform tool. 
 
React Native: The Appeal

React Native brings a very big promise. It got to the market initially when the mobile applications became more popular. People had to develop for iOS and for Android. And that was only two platforms, but that already was becoming a hurdle. 

So the idea was - let's start developing on TypeScript or JavaScript and use that across all of the platforms. And that actually works great because it allows you to build once, have the same UI, same experience across all of those platforms.
 
 
The Complexity of Streaming with React Native
But there's one big problem with that. And the really big problem is - with video, you sometimes need to get down to the device level. And that's problematic because, for example, DRM, optimized encoding, all of the premium features, things like advertisements - how do you interact and still have enough access to do all of that? And a big problem there is that people need to get down to the native layer. So they start developing native code again. They start again going to Java for Android, going to Swift for iOS, or doing very specific things for web browsers or other platforms. And it's not just that. It just keeps coming. For me, doing cross-platform, it's the gift that keeps on giving. Because even all of the standard features, like offline playback, it's actually not straightforward to do in React Native. None of the open source React Native players support this. Same thing with what I find like the must-have thing: doing full screen - it's actually not that easy on React Native with the tools which are commonly available. And all of these features, all of these capabilities, if you develop them, you will be spending a lot of time on it, but it's not going to lure in new users. They're just expecting that these things are there. The problem is if you don't have these capabilities, you will lose customers. So it's not something you will score big points with but it is something where you will be spending a lot of time. Even if you look at it with React Native, there's always more complexity being added. Doing things like advertisements, analytics, DRM, it is actually super complicated. And it's the gift that keeps on giving because then, for example, there is the new Expo framework getting introduced to React Native, or the new architecture getting introduced. 

There's all of those other platforms, like Apple TV or Fire TV, which require you to change your build pipeline, and it just keeps becoming more and more complex.
 
Elevating Viewer Experience
 
We saw that situation a couple of years ago, and we figured there should be an easier way to solve all of this. And the idea we had was - all of these native SDKs, Web SDKs, Android SDKs, iOS SDKs, or Smart TVs SDKs, can we not just really bring this under one umbrella so that our customers can work with one API, which is in JavaScript or TypeScript, so that you can really use React Native without having to go back into that native layer? And the approach that we took was actually to start doing this in open source. So we developed the THEOplayer React Native SDK fully in open source, building all of the bridges for all of the native SDKs so that you have the highest possible performance, but with all of the capabilities, including offline playback and all of the other stuff, all of the connectors for analytics so that our customers don't have to go back to that native layer if they don't want to. If you want to, you still can, because it's all open source, but if you don't want to, you don't have to. And to build even further on top of that, because once we developed this, our customers were like - oh yes, now we're doing a lot of effort to build our own video UI, and they were redeveloping every time again and again a video UI. So last year we actually launched the open video UI for React Native as well, which is our open source video UI framework, which has all of the components that standard video players need. And as I mentioned before, this is continuously being updated for Expo, for new architecture, for
Fire TV and all of the other platforms just to make sure that for our customers, it becomes as easy as possible to deliver across all of the platforms. And that includes even the really low-end smart TVs where we see a lot of people struggling with performance, with advertisements, and all of those kind of things.
 
 
Boost Revenue with New Ad Experiences
But with advertisements, we see people really, really suffering still today. Building ad experiences, it's difficult even on the easiest platforms to get all of the transitions between DRM protected content and advertisements to get all of that smooth. With THEOads, we're actually going one up on that. What we are doing is with the ads, we are trying to simplify the advertisement stack.
We've developed a framework that allows you to engage more with your customers, engage more with your viewers with new and innovative ad formats so that you can start boosting your revenue in an easier way, but also with the highest possible personalization to get those high CPM's that our customers are targeting. And what we have done over the past months is we actually brought THEOads to React Native as well. So that our customers even if they only want to work in the React Native layer, that they can still bring all of the new premium experiences into React Native and into their apps as well. So this has been quite a lot of work, but the end result is actually very positive, and we have one of our biggest customers, unfortunately, I am never allowed to use their name of their brand because they're that big and they charge massive amounts of money for it, but if you start looking at our React Native source code on GitHub, you will find the name, because they're actually actively contributing on this. But they launched with React Native years ago, and now they're actually launching with THEOads on React Native as well.
Key Takeaways
That's actually already bringing me to the end of the talk, but keep in mind viewer expectations, they are super high. You're not gonna score any points by doing this in the same way as all of the others are doing, but you're just gonna score really negative points if you're not available with the right fewer expectation on all of these platforms. So React Native, people usually think it will make everything easier. It can.
but you do need to work with the right tools. If you approach this blindly and don't have the right support around you, we see a lot of people who are actually going back from React Native to native because they were spending too much time on maintaining all of the bridges and going to the native layer. So you really need the right tools to work with this. And next to that, of course, I added a small bonus - THEOads, if you're interested, hall five, we have a very nice booth with a very nice demo. 
There's a big yellow button that you can push that will show you all of the ad experiences. But that's about it for me. If there's any questions, come and find us. I'm very happy to answer.
Back to top

Speaker

Want to deliver high-quality online video experiences to your viewers, efficiently?

We’d love to talk about how we can help you with your video player, low latency live delivery and advertisement needs.