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.
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.
Even with browser-supported HTML5 streaming, some extra software components are needed in order to play full-featured adaptive 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 startedSimply start using the complete player component by running npm install vimond-replay, and follow the steps in the documentation for inserting to a React app.