react-video-looper

v1.0.18

Published

10 months ago

A react component that provides non-destructive inner looping of a video source

Downloads

576

0High
0Medium
0Low

lewhunt

web front-end react video loop fullscreen player

React Video Looper

A React video player for looping inner sections of a video file. Packaged as an npm component library and CDN script.

Example

<VideoLooper source='sample.mp4' start={4.31} end={9.48} loopCount={2} isDebugMode />

See it in use here - React Fitness App

Demo Editor (with debug mode)

CodePen Demo (bare-bones sample)

Intro

What is it?

This react component provides non-destructive inner looping on video files. By specifying start and end trim points it begins playback at zero and then repeats an infinite (or finite) loop on the trimmed portion of the video. Fullscreen by default.

Why do it?

Initially built to assist in the development of an interactive fitness app, it offers an interesting alternative to the default HTML5 video loop attribute because it can play the original source file from the start but then repeat loop the trimmed portion of the video. In many cases it provides a more seamless loop compared to the default loop attribute or media fragment parameters.

How is it done?

Under the hood this component utilises two overlapping video elements that playback in turn. Running the demo in debug mode (with split view enabled) further illustrates this technique with debug text and the cloned video is set to greyscale. See the end of this readme for more info on the editor.

Install

npm package (recommended)

npm i react-video-looper

CDN script (for prototyping only)

<script
  type="text/javascript"
  src="https://unpkg.com/react-video-looper/umd/react-video-looper.min.js"
></script>

Usage

Node.js development setup (recommended)

import React from "react";
import VideoLooper from "react-video-looper";
import sampleVideo from "../assets/sample.mp4";

export default function Demo() {
  return (
    <div>
      <VideoLooper source="{sampleVideo}" start={4.31} end={9.48} />
    </div>
  );
}

Browser script setup (for prototyping only)

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script
    src="https://unpkg.com/react@16/umd/react.production.min.js"
    crossorigin
  ></script>
  <script
    src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    crossorigin
  ></script>
  <script src="https://unpkg.com/react-video-looper/umd/react-video-looper.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(
    <VideoLooper source="sample.mp4" start={4.31} end={9.48} />, document.getElementById('app'))
  </script>
</body>

Options / Props

| Name | Type | Required | Default | Description | | ---------------- | ------ | -------- | ------------ | ----------------------------------------------------------------------- | | source | string | required | 'sample.mp4' | Name of the video source file | | start | number | required | 4.31 | starting point of loop in seconds | | end | number | required | 9.48 | ending point of loop in seconds | | speed | number | optional | 1 | video playback rate | | loopCount | number | optional | null | optional amount of loops to run before playing to end of video | | autoPlay | bool | optional | true | automatically start video playback | | muted | bool | optional | true | disable audio of video loop | | playsInline | bool | optional | true | prevent automatic fullscreen mode in mobile browsers | | isDebugMode | bool | optional | false | debug mode titles the active video instance and current playback time | | isSplitView | bool | optional | false | illustrative split-view of the two video instances playing side by side | | width | string | optional | '100%' | css width of the component (default is full width) | | height | string | optional | '100vh' | css height of the component (default is full height) | | objectFit | string | optional | 'cover' | css object-fit size of the video (default is clipped to fit) | | objectPosition | string | optional | '40%' | css object-position alignment of the video |

Demo Editor

The demo includes a simple editor that allows you to change some of the options. The react-use-form-data hook is used to manage the demo editor's data state:

Demo Editor Example

Example In Use

The component is currently used in the React Fitness App:

React Fitness App Example