React Native Video Player: Add Videos To React Native Apps

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. 

React Native Video Player : Add Videos to React Native with the react-native-video Library

Embedding videos into your React Native app can enhance the user experience significantly. With the help of the react-native-video library, adding videos is both simple and efficient. In this guide, we’ll walk through installing the library, setting up a basic video player, customizing controls, and invoking useful methods for more interactive playback. Let’s dive in!

1. Install the Library

To begin, you’ll need to install the react-native-video library, which provides the tools to display and control video content easily in your app. Open your project directory in the terminal and run the following command:

npm install react-native-video

Once installed, link the package if you’re using an older version of React Native. For newer versions, auto-linking should handle this for you.

2. Setting Up the Video Player

After installing, it’s time to set up the video player component. Import the Video component from the react-native-video library into your code:

import Video from 'react-native-video';

Now, within your render function, you can add the Video component to display your video. Here’s a basic example:

<Video 
  source={{ uri: 'https://www.example.com/path/to/video.mp4' }} 

  style={{ width: '100%', height: 200 }}

  resizeMode="contain"

/>

In this example, we set the source prop with the video URL and specify the style prop to control the video player’s size. You can adjust resizeMode to manage how the video fits within the player area.

3. Specifying the Video Source

The source prop in react-native-video is where you define the location of your video file. This could be a URL pointing to an online video or a local file stored within the app. Here’s how to set up each:

For an online source:

<Video source={{ uri: 'https://www.example.com/video.mp4' }} />

For a local file:

<Video source={require('./path/to/local/video.mp4')} />

Make sure that the local file path is correct, as any error will prevent the video from loading properly.

4. Enabling Playback Controls

By default, the react-native-video component doesn’t include controls. To add playback controls, set the controls prop to true:

<Video 

  source={{ uri: 'https://www.example.com/video.mp4' }}

  controls={true}

  style={{ width: '100%', height: 200 }}

/>

With this simple setting, users can now play, pause, and skip through the video.

5. Create Custom Video Controls

If you want more control over the player’s appearance and functionality, you can build custom controls. To do this, hide the default controls by setting controls={false} and add custom buttons for play, pause, rewind, or fast-forward:

const [paused, setPaused] = useState(false);

<Video 

  source={{ uri: 'https://www.example.com/video.mp4' }}

  paused={paused}

  style={{ width: '100%', height: 200 }}

/>

 

<Button title={paused ? "Play" : "Pause"} onPress={() => setPaused(!paused)} />

This simple example uses a button to toggle between playing and pausing the video. You can expand on this by adding more buttons and functionality to control the playback as needed.

6. Invoke Methods in the Video

The react-native-video library offers a variety of methods that give you control over video playback, making it easier to provide a tailored viewing experience. These methods can be used to implement features like seeking, pausing, resuming, adjusting playback speed, and more. Below are some common methods and how to implement them effectively.

a) Using seek() to Jump to Specific Times

The seek() method is one of the most frequently used methods, allowing you to move the video to a specified timestamp in seconds. This is especially useful for creating features like “skip intro,” jumping to specific scenes, or implementing a custom progress bar.

To use seek(), set up a reference to the Video component and call the seek() method with the desired timestamp:

import React, { useRef } from 'react';

import { Button } from 'react-native';

import Video from 'react-native-video';

const VideoPlayer = () => {

  const videoRef = useRef(null);

  return (

    <>

      <Video 

        ref={videoRef}

        source={{ uri: 'https://www.example.com/video.mp4' }}

        style={{ width: '100%', height: 200 }}

      />      

      {/* Button to jump to 10 seconds */}

      <Button title="Skip to 10s" onPress={() => videoRef.current.seek(10)} />

      {/* Button to skip to halfway point */}

      <Button title="Go to 50%" onPress={() => videoRef.current.seek(50)} />

    </>

  );

};

With this setup, users can jump to any point in the video with just a tap, improving navigation and making it easy to reach desired segments.

b) pause() and play() for Controlled Playback

While the paused prop is typically used to toggle play/pause states, you can also control playback by programmatically toggling it. The paused state can be controlled using custom buttons to switch between paused and playing states.

import React, { useRef, useState } from 'react';

import { Button } from 'react-native';

import Video from 'react-native-video';

const VideoPlayer = () => {

  const [isPaused, setIsPaused] = useState(false);

  return (

    <>

      <Video 

        source={{ uri: 'https://www.example.com/video.mp4' }}

        paused={isPaused}

        style={{ width: '100%', height: 200 }}

      />

      

      {/* Toggle between play and pause */}

      <Button title={isPaused ? "Play" : "Pause"} onPress={() => setIsPaused(!isPaused)} />

    </>

  );

};

In this example, pressing the button will either pause or play the video, letting users control playback easily.

c) Adjusting Playback Speed with rate

With the rate prop, you can control the playback speed of the video, a great feature for users who want to watch at faster or slower speeds. The rate value is a multiplier, with 1.0 representing normal speed, 0.5 for half speed, and 2.0 for double speed.

Here’s how to adjust playback speed using custom buttons:

import React, { useState } from 'react';

import { Button, View } from 'react-native';

import Video from 'react-native-video';

const VideoPlayer = () => {

  const [playbackRate, setPlaybackRate] = useState(1.0);

  return (

    <View>

      <Video 

        source={{ uri: 'https://www.example.com/video.mp4' }}

        rate={playbackRate}

        style={{ width: '100%', height: 200 }}

      />

      {/* Buttons to control playback speed */}

      <Button title="0.5x Speed" onPress={() => setPlaybackRate(0.5)} />

      <Button title="Normal Speed" onPress={() => setPlaybackRate(1.0)} />

      <Button title="1.5x Speed" onPress={() => setPlaybackRate(1.5)} />

      <Button title="2x Speed" onPress={() => setPlaybackRate(2.0)} />

    </View>

  );

};

This setup gives users a simple way to switch between different playback speeds, which is especially useful for instructional videos or content where users may want to skip or slow down certain parts.

d) Capturing Video Events with Event Handlers

The react-native-video library includes event listeners that let you capture important video playback events like onEnd, onProgress, and onBuffer. These can be used to track playback, show loading indicators, or trigger specific actions when the video reaches certain points.

Here’s an example of using onProgress to track the playback progress:

<Video 

  source={{ uri: 'https://www.example.com/video.mp4' }}

  onProgress={(data) => console.log("Current time:", data.currentTime)}

  style={{ width: '100%', height: 200 }}

/>

In this example, onProgress logs the current playback time, which can be used to update a custom progress bar or trigger in-video actions when specific timestamps are reached.

e) Using fullscreen Mode

If you want to enable fullscreen playback, you can use the fullscreen prop along with custom controls to switch the video view into fullscreen mode.

import React, { useState } from 'react';

import { Button, View } from 'react-native';

import Video from 'react-native-video';

const VideoPlayer = () => {

  const [fullscreen, setFullscreen] = useState(false);

  return (

    <View>

      <Video 

        source={{ uri: 'https://www.example.com/video.mp4' }}

        fullscreen={fullscreen}

        style={{ width: '100%', height: fullscreen ? '100%' : 200 }}

      />

      

      {/* Toggle fullscreen mode */}

      <Button title={fullscreen ? "Exit Fullscreen" : "Fullscreen"} onPress={() => setFullscreen(!fullscreen)} />

    </View>

  );

};

This code enables the video to toggle between fullscreen and normal view, giving users the flexibility to enjoy the content however they prefer.

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.

FAQs

How do I install React Native Video in my project?

You can install React Native Video using npm or yarn. Run the following command in your project directory:

or

After installation, link the package using react-native link if you’re using React Native CLI.

What video formats does React Native Video support?

React Native Video supports a wide range of video formats, including MP4, MOV, MKV, and more. However, the actual format support depends on the underlying platform (iOS or Android) and the codecs available on the device.

How can I add custom controls to a video in React Native?

You can add custom controls by disabling the default controls using the controls prop (set it to false) and creating your own custom controls using buttons and other UI components. You can then use the video component’s methods (like play, pause, seek) to control the video.

How do I handle video buffering in React Native Video?

You can handle video buffering by using the onBuffer prop, which is an event handler that gets triggered when the video is buffering. You can show a loading spinner or a similar UI element while the video is buffering and hide it once buffering is complete.

Can I stream videos using React Native Video?

Yes, React Native Video supports video streaming. You can stream videos by providing a URL to a video stream (e.g., an HLS or DASH stream) as the source to the video component.

How do I implement fullscreen mode in React Native Video?

Fullscreen mode can be implemented using the fullscreen prop on the video component. Additionally, you can use the onFullscreenPlayerWillPresent and onFullscreenPlayerWillDismiss events to handle UI changes when entering or exiting fullscreen mode.

Is it possible to add subtitles or captions to React Native Video?

Yes, you can add subtitles or captions by providing a textTracks prop to the video component. This prop takes an array of objects, each specifying the title, language, and url of the subtitles.

How do I loop a video in React Native Video?

You can loop a video by setting the repeat prop to true. This will make the video automatically start over each time it reaches the end.

What are some common performance issues with React Native Video and how can they be mitigated?

Common performance issues include high memory usage, slow buffering, and frame drops. These can be mitigated by optimizing video resolution and bitrate, preloading videos, using proper video formats, and avoiding unnecessary re-renders of the video component.