Introduction

<IxPlayer /> is the official imgix React video player component, built on top of our ix-player web component and Media Chrome.

Installation

npm install @imgix/ix-player-react

or

yarn add @imgix/ix-player-react

Usage

import IxPlayer from '@imgix/ix-player-react';

<IxPlayer
  src="my.domain.imgix.video/my-video.mp4?fm=hls"
  type="hls"
/>;

Lazy-loading

Defer loading of IxPlayer by importing from @imgix/ix-player-react/lazy.

import IxPlayer from '@imgix/ix-player-react/lazy';

<IxPlayer
  loading="viewport"
  src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=hls"
  type="hls"
  gifPreview
  posterParams="video-thumbnail-time=2"
/>;

If you are generating your pages with a Node.js server (for example, Next.js), consider using @imgix/ix-player-react/lazy with a blurhash library and imgix Video API's video-generate parameter to generate a placeholder to display during loading.

Docs

API reference lives on Github.