React & React Native Video Playback: Simple Guide

Are you an entrepreneur or an enterprise IT leader with plans to launch client-facing web and mobile apps? You will likely use videos heavily since these are increasingly popular. You might be considering the use of React for your proposed web app. Furthermore, you probably want to use React Native for the proposed mobile apps. These frameworks enjoy plenty of popularity. How to incorporate the React video and React Native Video playback functionality? Read on, as we explain that. 

The Importance Of Video Content

If you want to capture the attention of your potential and existing clients, then focus on video content. Video content is a key part of content marketing. The reasons for this are as follows:

• A video makes it easy to explain your product to your potential clients.
• The video content delivers a high return on your investments in marketing.
• You can market video content in various ways, e.g., “stories” on social media platforms like Facebook, live videos, webinars, etc. This offers more flexibility.
• Videos drive more user engagement.
• You improve your SEO rankings with video content.

Observers state that in 2020, streaming video content amounted to 75% of all Internet traffic. They believe that this will increase to 82% by 2022. 

What Are React and React Native?

Before discussing the technicalities of incorporating video content in React and React Native apps, let’s talk about React and React Native briefly. These are two popular frameworks for modern application development. 

Facebook developed React in 2011. This web development library is also called React.js. The company used this JavaScript-based open-source framework in the Facebook timeline. Facebook acquired Instagram in 2012. It used React.js in the Instagram timeline too. 

React.JS offers the following advantages:

• You can use React.js for both front-end and server-side development. 
• Websites and web apps developed using React have good speed.
• React.js has a component-based architecture, which promotes the reuse of components. This expedites development.
• React improves the SEO of a website.
• React.js enjoys high popularity. A vibrant developers’ community supports it, and this community has created many useful development tools.

React Native is a cross-platform mobile development framework from Facebook. This open-source JavaScript-based framework uses React.JS. React Native can deliver a near-native user experience. You can run the app on both Android and iOS. 

React Native offers the following advantages:

• It offers a near-native experience since React Native compiles to native app components. 
• React Native generates platform-specific code for both Android and iOS. This further helps it deliver a near-native user experience.
• Since React Native is based on JavaScript, it’s easy to learn.
• React Native supports “hot reloading”, which expedites app development.
• You can use the ready-to-use UI libraries offered by the React Native ecosystem. This helps you to offer a smooth user experience. 

Setting The Context: Key Challenges In Implementing React Video & React Native Video Playback

Let’s assume that a user of your proposed React or React Native app clicks the button to play a video. A lot of processing takes place before the user sees the first frame of the video. You need to address the challenges that occur during this process.

The video player will download the entire video at one go only if the video is very small. We call this process “single-source playback”, and this isn’t a recommended approach in most cases. Very few real-life use cases have videos small enough for “single-source playback”. 

Most of the time, a video download-and-playback software spits a video into pieces. We commonly use the term “chunks” for these pieces. The software downloads these chunks in a series. Therefore, a device will always download small amounts of data at one time. 

On top of that, a video player must choose the right video quality that’s suitable for the network conditions that it faces. We refer to this process as “choosing a bitrate”. If a video player faces slow network conditions, then it should step down to a smaller bitrate. A failure to do so results in that “buffering” message. This can put off users, and they might move away from the video content. 

Video players use  ABS (Adaptive Bitrate Streaming) to switch between different levels of video quality while downloading chunks. We now discuss the software solutions to achieve ABS effectively.

Technology solutions to achieve ABS effectively For React Video & React Native Video Playback

Three technology solutions exist that help video players achieve ABS effectively. These are as follows:

HLS (HTTP Live Streaming)

Apple developed HLS streaming and launched it in 2009. This solution divides a video into chunks of 10 seconds. It then creates indexes for all of these chunks in a separate playlist file. 

HLS is the only native ABS format for operating systems like iOS and OS X. If you are building a video player app for these operating systems, then you need to use HLS.

#EXTM3U

#EXT-X-PLAYLIST-TYPE:EVENT

#EXT-X-TARGETDURATION:10

#EXT-X-VERSION:4

#EXT-X-MEDIA-SEQUENCE:0

#EXTINF:10.0,

fileSequence0.ts

#EXTINF:10.0,

fileSequence1.ts

#EXTINF:10.0,

fileSequence2.ts

#EXTINF:10.0,

fileSequence3.ts

#EXTINF:10.0,

fileSequence4.ts

DASH (Dynamic Adaptive Streaming over HTTP)

Multiple technology companies including Google and Microsoft collaborated to develop DASH. They did that in response to a request from MPEG in 2009. DASH is a relatively new standard since it was published in 2012. The developers of DASH wanted to combine earlier standards like MSS and HLS into one standard. However, Apple devices still only support HLS. 

This technology solution splits a video into chunks of 2-4 seconds. This makes the downloading process faster. In turn, this results in better performance. 

<?xml version="1.0" encoding="utf-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="urn:mpeg:dash:schema:mpd:2011"
xmlns:xlink="http://www.w3.org/1999/xlink"
xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011 http://standards.iso.org/ittf/PubliclyAvailableStandards/MPEG-DASH_schema_files/DASH-MPD.xsd"
profiles="urn:mpeg:dash:profile:isoff-live:2011"
type="dynamic"
minimumUpdatePeriod="PT3S"
suggestedPresentationDelay="PT3S"
availabilityStartTime="2017-10-04T03:31:48"
publishTime="2017-10-04T22:28:30"
timeShiftBufferDepth="PT15.8S"
minBufferTime="PT3.9S">
<ProgramInformation>
<Title>RTSP Session</Title>
</ProgramInformation>
<Period start="PT0.0S">
<AdaptationSet contentType="video" segmentAlignment="true" bitstreamSwitching="true" frameRate="15/2">
<Representation id="0" mimeType="video/mp4" codecs="avc1.4d0020" bandwidth="2000000" width="1280" height="960" frameRate="15/2">
<SegmentTemplate timescale="15360" initialization="init-stream$RepresentationID$.m4s" media="chunk-stream$RepresentationID$-$Number%05d$.m4s" startNumber="22732">
<SegmentTimeline>
<S t="1047462831" d="30639" />
<S d="61438" />
<S d="30709" />
<S d="61457" />
</SegmentTimeline>
</SegmentTemplate>
</Representation>
</AdaptationSet>
</Period>
</MPD>

MSS (Microsoft Smooth Streaming)

Microsoft built this solution, which downloads small chunks of a video in a series. MSS caches the small chunks of videos that it downloads. It uses the edge of the network for this caching. The client-side of an app using this solution requests for these chunks, and it receives them quickly.

The video player needs a manifest file from the server before it can start playback. The manifest file has details like the duration of the video, locations of the chunks, and bitrates available to the video player. 

<?xml version="1.0" encoding="UTF-8"?>
<SmoothStreamingMedia MajorVersion="2"
      MinorVersion="0" Duration="2300000000" TimeScale="10000000">
   <CustomAttributes>
      <Attribute Name = "timeScaleZeroPoint" Value = "..." />
   </CustomAttributes>
   <Protection>
      <ProtectionHeader SystemID="{9A04F079-9840-4286-AB92E65BE0885F95}">
      Base-64 Encoded Data
      </ProtectionHeader>
   </Protection>
   <!-- <StreamIndex Type="video">
            describes the video streams available at each quality level-->
   <StreamIndex
      Type = "video"
      Chunks = "115"
      QualityLevels = "6"
      MaxWidth = "720"
      MaxHeight = "480"
      TimeScale="10000000"
      Url="QualityLevels({bitrate},{CustomAttributes})/Fragments(video={start_time})"
         Name = "video">
      <QualityLevel Index="0" Bitrate="1536000" FourCC="WVC1"
         MaxWidth="720" MaxHeight="480"
         CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840" >
            <CustomAttributes>
               <Attribute Name = "hardwareProfile" Value = "10000" />
            </CustomAttributes>
         </QualityLevel>
         <QualityLevel Index="1" Bitrate="1536000" FourCC="WVC1"
                     MaxWidth="720" MaxHeight="480"
                     CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840" >
            <CustomAttributes>
               <Attribute Name = "hardwareProfile" Value = "1000" />
            </CustomAttributes>
         </QualityLevel>
         <QualityLevel Index="2" Bitrate="1024000" FourCC="WVC1"
            MaxWidth="720" MaxHeight="480"
            CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840">
            <CustomAttributes>
               <Attribute Name = "hardwareProfile" Value = "1000" />
            </CustomAttributes>
         </QualityLevel>
      <!-- Additional quality levels, up to a total of ‘QualityLevels’
         attribute, last one below -->
         <QualityLevel Index="5" Bitrate="307200" FourCC="WVC1"
            MaxWidth="720" MaxHeight="480"
            CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840">
            <CustomAttributes>
               <Attribute Name = "hardwareProfile" Value = "1000" />
            </CustomAttributes>
         </QualityLevel>
         <!-- fragment boundary definitions: specify the duration of
            each fragment in TimeScale increments (default is 100nsec) -->
         <c n="0" d="19680000">
         <!-- fragment boundary definitions: specify the duration
               of each fragment in TimeScale increments (default is
               100nsec) -->

                     <f i="0" s="1525" q="2122"/>
                     <f i="1" s="1406" q="1640"/>
                     <f i="2" s="1217" q="875"/>
                     <f i="3" s="1107" q="1428"/>
                     <f i="4" s="607" q="928"/>
                     <f i="5" s="407" q="428"/>
         </c>
         <c n="1" d="8980000">
                     <f i="0" s="1525" q="2122"/>
                     <f i="1" s="1406" q="1640"/>
                     <f i="2" s="1217" q="875"/>
                     <f i="3" s="1107" q="1428"/>
                     <f i="4" s="607" q="928"/>
                     <f i="5" s="407" q="428"/>
         </c>
         ... <!-- fragment definitions omitted -->
         <c n="114" d="50680000">
                     <f i="0" s="1525" q="2122"/>
                     <f i="1" s="1406" q="1640"/>
                     <f i="2" s="1217" q="875"/>
                     <f i="3" s="1107" q="1428"/>
                     <f i="4" s="607" q="928"/>
                     <f i="5" s="407" q="428"/>
                  </c>
         <!-- end fragment definitions -->
   </StreamIndex>
   <!-- a stream of pictures designed to provide film-strip navigation
      (Zoetrope) around the presentation -->
   <StreamIndex
       Type = "video"
       ParentStreamIndex = "video"
       Subtype = "ZOET"
       FourCC = "JPEG"
       MaxWidth = "100"
       MaxHeight = "100"
       Url = "QualityLevels({bitrate})/Fragments(zoetrope={start_time})"
       Name="zoetrope">
       <QualityLevel Index = "0" Bitrate = "0" />
       <!-- this data is much sparser - every 10 seconds or so -->
       <c t = "0"/>
       <c t = "100000000" />
       <c t = "200000000" />
       <!-- additional data omitted for clarity -->
   </StreamIndex>

   <StreamIndex Type = "text" ParentStreamIndex = "video"
      ManifestOutput = "true" Subtype = "CTRL"
      Url = "QualityLevels({bitrate})/Fragments(control={start_time})"
      Name = "control">
      <QualityLevel Index = "0" Bitrate = "0" />
      <c t = "0">
      <!-- data is a Base64-encoded version of:
      <AdInsert Type = "midroll" Duration = "30s" Time = "250000000"/>-->
         <f i = "0"> PEFkSW5zZXJ0IFR5cGUgPSAibWlkcm9sbCIgRHVyYXRpb24gPSAiMzBzIiBUaW1l
   ID0gIjI1MDAwMDAwMCIgLz4=
         </f>
      </c>
   </StreamIndex>
      <!-- <StreamIndex Type="audio"> describes the audio streams
      available at each bitrate-->

   <StreamIndex
      Type = "audio"
      Chunks = "147"
      Language = "eng"
      QualityLevels = "1"
      TimeScale="10000000"
      Url = "QualityLevels({bitrate},{CustomAttributes})/Fragments(audio={start_time})"
      >

      <QualityLevel Index="0" Bitrate="94208" FourCC="WMA2"
         SamplingRate="48000" Channels="2" BitsPerSample="16"
         PacketSize="1115" HardwareProfile="1000"
         CodecPrivateData= "6101020044AC0000853E00009D0B10000A00008800000F0000000000"/>

      <!-- fragment boundary definitions: specify the duration of
         each fragment in TimeScale increments -->
      <c n="0" d="18770000"><f i="0" s="45"/></c>
      <c n="1" d="18840000"><f i="0" s="41"/></c>
      <c n="146" d="9290000"><f i="0" s="41"/></c>
      <!-- end fragment boundary definitions -->
   </StreamIndex>

   <!-- Additional audio and video feeds can be made available by
   adding <StreamIndex Type="audio" Name="..."> and
      <StreamIndex Type="video" Name="...">
   tags to this manifest and adding an additional Name attribute
   that discriminates for the default video/audio feed. E.g.:
      <StreamIndex Type="video" Name="alternate-angle"> ...
   -->

   <!-- specifies a script-stream [Type="Text" Subtype="SCMD"]
   The absence of a Url attribute and presence of a <Content    >
   element indicates that the content is embedded in the manifest
   rather than requested in fragments from the server
   -->
   <StreamIndex Type="text" Subtype="CAPT" Name="captions ">
      <QualityLevel Index = "0" FourCC = "DFXP" />
      <c t = "0" />
      <c t = "20000000" />
      <c t = "40000000" />
      <!-- additional fragments omitted for clarity -->
   </StreamIndex>

   <StreamIndex Type="text" Subtype="SCMD" Language="en-us"
      TimeScale="10000000" >
      <Content>
         <ScriptCommand Time="REFERENCE_TIME"
            Type="Some string" Command="some string"/>
         <ScriptCommand Time="REFERENCE_TIME2"
            Type="Some string2" Command="some string2"/>
      </Content>
   </StreamIndex>

   <!-- specifies markers/chapters [Type="Text" Subtype="CHAP"]
   The absence of a Url attribute and presence of a <Content    >
   element indicates that the content is embedded in the manifest
   rather than requested in fragments from the server
   -->

   <StreamIndex Type="text" Subtype="CHAP" Language="eng"
      TimeScale="10000000">
      <Content>
         <Marker Time="REFERENCE_TIME" Value="some string" />
         <Marker Time="REFERENCE_TIME" Value="some string" />
      </Content>
   </StreamIndex>
</SmoothStreamingMedia>

React video and React Native Video Playback Frameworks

Now that you know about the different technology solutions to ensure effective ABS, you might wonder how to incorporate them into your app. You can do that by using online video player frameworks. 

We now review a few such frameworks. Since we are talking about  React video and React Native Video playback, we focus on JavaScript frameworks. We highlight whether they support MSS, HLS, or DASH. These React video and React Native Video playback frameworks are as follows:

1. Video.JS

Video.JS is a popular React video and React Native Video playback framework. This free and open-source framework supports HTML5. Developers of this framework first launched it in 2010, and it supports 450,000+ websites at the time of writing this. Companies like LinkedIn and Tumbler use it. 

Video.js offers the following key advantages:

• It offers a consistent look-and-feel across different browsers.
• Video.JS supports video playback on desktops and mobile devices;
• This framework supports HTML5;
• Video.JS supports popular adaptive video formats like HLS and DASH.
• You can play videos from YouTube, Vimeo, and other social video platforms with added plugins.
• You can import Video.JS easily using NPM (Node Package Manager). 
• This framework offers comprehensive documentation. This makes it easy to integrate for React video and React Native Video playback.
• Video.JS offers many community-built plugins. 
• You can use extra CSS to enhance the style according to your requirements.

2. HLS.JS

HLS.JS is a well-known video player library. It’s open-source and free. As the name indicates, HLS.JS supports the HLS format. HLS.JS uses HTML5 video and MediaSource Extensions to deliver the React video and React Native Video playback functionality.

The developers of this library launched it in 2015. Twitter and New York Times are among popular companies that use HLS.JS. 

HLS.JS offers several advantages, which are as follows:

• It’s lightweight.
• HLS.JS supports all popular browsers like Chrome, Firefox, Safari, etc. 
• This video playback library supports all the key desktop and mobile platforms. 
• You can import HLS.JS easily using NPM.
• HLS.JS offers detailed documentation, which makes it easy to integrate it into your React or React Native app.

3. DASH.JS

Developers working with the DASH industry forum created DASH.JS, a popular free and open-source React video and React Native Video playback. DASH.JS supports the MPEG-DASH format, which is popularly known as DASH. 

MPEG-DASH is browser-agnostic. As we discussed earlier, it combines many benefits ABS formats like MSS and HLS. It’s a robust ABS format. The fact that DASH.JS supports it is a key advantage of this video player framework.

The other key advantages of DASH.JS are as follows:

• DASH.JS is a reliable and robust framework.
• This framework offers adaptation algorithms that work very well.
• This framework is codec and browser agnostic.
• DASH.JS offers a wide range of features like in-band events, multiple-periods, etc.
• You can import DASH.JS into your project using NPM. DASH.JS offers comprehensive documentation.
  

Implementing The React Video Playback Functionality

To implement the React video playback functionality in a React JS app, you first need to take care of the dependencies. You can use the “React JS Media” library for this. You can install it using NPM.

Subsequently, you need to install the following components:

• “ReactVideo”, which is for a native video player;
• “ReactAudio”, which is for an audio player;
• “FacebookPlayer”, which is for videos from Facebook;
• “Image”, which is for images that are responsive and optimized;
• “YouTubePlayer”, which is for YouTube videos.

Take the following steps:

• Import the native video player from the relevant library. You need to pass the necessary arguments to it. Use it in your app for normal video files supported by browsers. 
• You need to import the audio player from the “React JS Media” library and pass arguments.
• Import the YouTube player and provide the necessary arguments. 
• Import the Facebook player to play videos from Facebook. Provide the necessary arguments. 

Implementing the React Native Video Playback Functionality

React-native doesn’t provide video or audio playback functionality out of the box. However, there are fully functional libraries developed and maintained by the react-native developer community for media playback.

The most important being react-native-video, which has extensive support for both android and ios platforms. The library provides video support by delegating to the corresponding native video libraries on the target platform, i.e. ExoPlayer on android, and AVFoundation on ios. The library supports playback of most popular video streaming formats such as DASH and HLS and supports adaptive multi-bitrate playback, captions, and many low-level video APIs.

If you have secure content protected by DRM, you can configure the react-native-video library to play that as well. It supports playback of Fairplay DRM content on ios, and Playready and Widevine DRM content on android devices.

You need to first take care of the dependencies when implementing the React Native video payback functionality. You can use the following libraries:

• “React Navigation”, which is for navigating the application;
• “Redux”, a predictable state container for JavaScript-based apps;
• “React-redux”, which has the React bindings for Redux;
• “Recompose”, which helps you to write the logic of the component;
• “Reselect”, a “selector” library for Redux.

You can use NPM to install them.

The execution of the video playback function involves the following arguments/parameters:

• “source”: This refers to the source of the video that you want to display.
• “resizeMode”: This is a string. It describes how the app should scale the video for display. This argument can have “stretch”, “contain”, or “cover” as values. 
• “shouldPlay”: It’s a Boolean. This indicates whether a video is supposed to play.
• “useNativeControls”: This is another Boolean. If this is set to “true”, then it displays the native playback controls like “play” and “pause”. 
• “onLoad”: This is a function. The React Native app calls it when the video has been loaded.
• “onError”: This is another function. The React Native app calls it if loading or playback encounters a fatal error. The “onError” function passes a string with an error message as the parameter.  

Developing a React.JS or React Native app: Everything else remains the same

The above guide touches upon the React video and React Native Video playback functionality, however, everything else about developing a React.JS or React Native app remains the same. Focus on the following:

• Forming a competent project team that focuses on client value and collaboration;
• Managing the functional and non-functional requirements of your project effectively;  
• Making the right architectural decisions and choosing a suitable architectural pattern;
• Designing and developing the app to deliver the functional requirements;
• Delivering the non-functional requirements like performance, scalability, security, etc.;
• Managing the project effectively and delivering value to the client. 

Solution by Video Hosting Providers like VdoCipher for React Native App

Instead of using an open-source player, you can choose an online video player from a ready-to-use solution provider. Opting for a cloud solution can help you in getting the additional features, which you’d not have gotten with an open-source solution. These additional features can be encryption-based, which ultimately stops the download of your videos, helping you to put a stop to piracy.

Opting for proprietary software gives you the following benefit:

Support: You get dedicated support that can easily solve all your problems. Otherwise, with an open-source, you’re pretty much on your own and at the whims of their community,

Complexity: If you don’t have the right personnel, it can be really difficult to set up your own video player, hosting, APIs, and more. With a paid solution, you won’t have to care about setting up the infrastructure. As you’ll get a finished product, and a better user interfaces with the help of which you can easily set up your videos.

Security: With open-source players, all the vulnerabilities are usually exposed to every one, since everyone is exposed to the code. In case of any vulnerability, any malicious user can easily find them and take advantage of them. With a paid solution you won’t have to worry about it. On top of it, you get other features, which can protect your videos from any pirate. With a decrypted player along with DRM-based security, you are good to go and not worry about the pirates.

Vdocipher provides a react native SDK, which allows secure encrypted adaptive react native video playback. Also, everything from transcoding, hosting, CDN, DRM encryption to encrypted player is taken care of. he end to end solution ensures that there are no issues in the React video and React Native Video playback. Also, to ensure smooth and secure video streaming regardless of the user’s location, device, browser, and internet speed.

Conclusion

Video contents are already popular, their appeal is growing. React and React Native are popular frameworks to develop modern apps. If you plan to develop a React video or React Native video playback functionality, then you need to know about the relevant adaptive video formats. You also need to know about the best video player frameworks. We reviewed 3 such frameworks, and we evaluated their advantages. Analyze your project requirement carefully before choosing the right video player framework. You can refer to Vdocipher’s react native video SDK to know more about how this SDK enables you to securely stream and download DRM-protected videos through your react-native app.