Introducing Replay

Tor Erik Alræk

An open source React video player with advanced streaming support.

By Tor Erik Alræk

Building an online video website involves solving technical issues, meeting commercial requirements, and even more importantly, optimising the end user experience.

Such a website’s video player is where uncompromising technical requirements meet the essential purpose of the website: delivering the video content with optimal quality, and with an optimal user experience.

The Vimond development team has a long tradition of building video players for its mother company TV 2, and later of course for Vimond’s array of global customers:  from Windows Media Player and QuickTime back in 2000, through Flash and Silverlight, and to where we are today, through the browser’s own HTML5 streaming support, assisted by Javascript.

For the time being, a video player component is not part of the Vimond product line. However, we see this niche as one great way of starting contributing to the open source community.

So here is Replay, an open source React video player with advanced streaming support.

Why Replay?

Even with browser-supported HTML5 streaming, some extra software components are needed in order to play full-featured adaptive streams.

Along with the modern streaming technologies, such software has emerged, in the shape of Javascript libraries like Shaka Player, and HLS.js. These are high-quality projects backed, and continuously developed, by many big players in the business. These projects cover mainly the technical aspects of playing streams.

When it comes to web user experiences, one of the most popular foundations for building web apps today is React from Facebook developers.

The ecosystem around this framework is huge, facilitating all aspects of building a web site. React components are used for building web user interfaces, from small widgets and text, up to composing the full page layout and site navigation.

What does Replay provide?

Replay is where these open-source adaptive streaming libraries meet React - on React’s terms and principles, so that it is simple and straightforward building a React-based video site with advanced streaming requirements.

The Replay player wraps HLS.js, Shaka Player, and also the HTML5 <video> element, into React components that can be included according to the stream requirements. Across these components, all aspects of the video playback are exposed in a consistent, React-friendly, property-oriented API.

On top of this it comes a custom, skinnable player user interface covering all common playback features, but also special features like subtitles and audio language selection, picture-in-picture, and AirPlay.

The result is a ready-to-use React video player component that can be inserted in a React web app. Out of the box it provides support for MPEG-DASH, HLS, and progressive playback, thanks to the mentioned integrated libraries. This includes DRM, and full handling of live and time shifting operations.

The player component can be used on its own, customisations can be plugged in, it can be reskinned, and the open source code can be forked for deeper customisations.

The project itself will not include ad or analytics integrations, neither will there be UI parts for non-playback related features like social media sharing, video recommendations and menus, or integrations with OTT platform APIs.

However, all these are examples of features that can either be built on top of the Replay player component, or built together with parts from Replay into a custom player component.

         Getting started

Simply start using the complete player component by running npm install vimond-replay, and follow the steps in the documentation for inserting t
o a React app.

Replay is published under the Apache 2.0 license. It’s open source, go fork it at GitHub.


Learn more about Vimond and our products