<ix-video/>

Introduction

is a imgix-flavored React video component.

If you are familiar with using + Hls.js in your application, then you'll feel right at home with this React component.

Installation

If you're using npm or yarn, install that way:

Package manager

``yarn add @imgix/ix-video-react`

or

`npm i @imgix/ix-video-react`

Then, import the library into your application with either import or require:

`js import IxVideo from '@imgix/ix-video-react';`

or

`js const IxVideo = require('@imgix/ix-video-react');`

`Features and benefits`

Without , if you want to use the browser built-in HTML5 video element for playback you would have to wire up Hls.js yourself.

will automatically handle recoverable errors that happen during video playback. This is particularly handy for live streams that may experience disconnects.

will use the optimal Hls.js settings for Mux Video so you don't have to worry about that. will also periodically test new versions of Hls.js and upgrade to known stable versions so you don't have to worry about upgrading to a new version of Hls.js yourself.

`Usage`

Loading this library in the browser will register a custom web component for .

Now you are free to use this web component in your HTML, just as you would with the HTML5

`jsx const IxVideoExample = () => { return (


      Simple IxVideo Example

              style={{ height: '100%', maxWidth: '100%' }}
        src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4"
        controls
        autoPlay
        muted
      />


  );
};


$3

  -

video_title: string

: Title of the video player (e.g.: 'Awesome Show: Pilot')

 can make optimizations based on the type of stream.
-

startTime: number (seconds)

: Set this to start playback of your media at some time other than 0.
-

gif-preview: boolean: Set this to show a GIF whenever the mouse hovers over the player.

In addition, any props that you would use on a

`$3`

By default will try to use native playback via the underlying

If you prefer to use the in-code MSE-based engine (currently hls.js) whenever possible, then simply set the preferPlayback prop to mse.

`jsx style={{ height: '100%', maxWidth: '100%' }} src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4" preferPlayback="mse" controls />`

`$3`

By default will try to figure out the type of media you're trying to play (for example, an HLS/m3u8 media source, an mp4, etc.) based the extension of the file from the src attribute's url. This allows to determine whether it can/should use an in-code player or native playback. By way of example, the code below has an identifiable "mp4" extension, so will rely on native playback via the underlying

`jsx src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.mp4" controls />`

Sometimes, however, your src URL may not have an identifiable extension. In these cases, we recommend relying on the type attribute, similar to the tag's type attribute. Below is an example of explicitly declaring the MIME type for an HLS/m3u8 media source:

`jsx style={{ height: '100%', maxWidth: '100%' }} src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=hls" type="hls" controls />`

Or, for convenience, we also support the shorthand type="hls:

`jsx src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4" type="hls" controls />`

`FAQ`

`$3`

Yes! In fact, @imgix-element/ix-video-react is written entirely in TypeScript and provides a definitions file automatically (no additional installs needed).

`$3`

No, you do not. The way imgix delivers HLS video is compliant with the HLS spec. Any video player that supports HLS will work with IxVideo.

`$3`

You sure can! Pass in src=""` with an HLS url.

<ix-video/>

Introduction

is a imgix-flavored React video component.

If you are familiar with using + Hls.js in your application, then you'll feel right at home with this React component.

Installation

If you're using npm or yarn, install that way:

Package manager

``yarn add @imgix/ix-video-react`

or

`npm i @imgix/ix-video-react`

Then, import the library into your application with either import or require:

`js import IxVideo from '@imgix/ix-video-react';`

or

`js const IxVideo = require('@imgix/ix-video-react');`

`Features and benefits`

Without , if you want to use the browser built-in HTML5 video element for playback you would have to wire up Hls.js yourself.

will automatically handle recoverable errors that happen during video playback. This is particularly handy for live streams that may experience disconnects.

`Usage`

Loading this library in the browser will register a custom web component for .

Now you are free to use this web component in your HTML, just as you would with the HTML5

`jsx const IxVideoExample = () => { return (


      Simple IxVideo Example

              style={{ height: '100%', maxWidth: '100%' }}
        src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4"
        controls
        autoPlay
        muted
      />


  );
};


$3

  -

video_title: string

: Title of the video player (e.g.: 'Awesome Show: Pilot')

 can make optimizations based on the type of stream.
-

startTime: number (seconds)

: Set this to start playback of your media at some time other than 0.
-

gif-preview: boolean: Set this to show a GIF whenever the mouse hovers over the player.

In addition, any props that you would use on a

`$3`

By default will try to use native playback via the underlying

If you prefer to use the in-code MSE-based engine (currently hls.js) whenever possible, then simply set the preferPlayback prop to mse.

`jsx style={{ height: '100%', maxWidth: '100%' }} src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4" preferPlayback="mse" controls />`

`$3`

`jsx src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.mp4" controls />`

`jsx style={{ height: '100%', maxWidth: '100%' }} src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=hls" type="hls" controls />`

Or, for convenience, we also support the shorthand type="hls:

`jsx src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4" type="hls" controls />`

`FAQ`

`$3`

Yes! In fact, @imgix-element/ix-video-react is written entirely in TypeScript and provides a definitions file automatically (no additional installs needed).

`$3`

No, you do not. The way imgix delivers HLS video is compliant with the HLS spec. Any video player that supports HLS will work with IxVideo.

`$3`

You sure can! Pass in src=""` with an HLS url.