npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@imgix/ix-video-react

v0.0.1

Published

A custom imgix video element for React that works anywhere

Downloads

945

Readme

Introduction

<IxVideo/> is a imgix-flavored React video component.

If you are familiar with using <video /> + 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:

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

or

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

Features and benefits

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

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

<IxVideo/> will use the optimal Hls.js settings for Mux Video so you don't have to worry about that. <IxVideo/> 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 <mux-video>.

Now you are free to use this web component in your HTML, just as you would with the HTML5 <video> element.

const IxVideoExample = () => {
  return (
    <div>
      <h1>Simple IxVideo Example</h1>
      <IxVideo
        style={{ height: '100%', maxWidth: '100%' }}
        src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4"
        controls
        autoPlay
        muted
      />
    </div>
  );
};

Primary Props:

  • video_title: string: Title of the video player (e.g.: 'Awesome Show: Pilot') <IxVideo/> 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 <video> element like poster, controls, muted and autoPlay are available and should work the same as they do when using a video element in react.

Advanced: preferPlayback

By default <IxVideo/> will try to use native playback via the underlying <video/> tag whenever possible. However, it can also instead use an in-code player as long as the browser supports Media Source Extensions. This includes MSE in Mac OS Safari.

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

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

Advanced: type

By default <IxVideo/> 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 <IxVideo/> 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 <IxVideo/> will rely on native playback via the underlying <video/> tag.

<IxVideo
  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 <source/> tag's type attribute. Below is an example of explicitly declaring the MIME type for an HLS/m3u8 media source:

<IxVideo
  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:

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

FAQ

Can I use <IxVideo/> with TypeScript?

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

If I'm using imgix, do I have to use this library?

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.

If I'm not using IxVideo, can I still use this library?

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