ix-video v1.x

# Installation

# Requirements

  • Node v12+

  • Browsers with Custom Elements V1 and Shadow DOM support, e.g. Chrome, Firefox, Safari, Edge (79+)

Browsers without native custom element support (opens new window) require a polyfill (opens new window).

For Node/browser versions without es6 module support (opens new window), you'll need to use a bundler like webpack (opens new window) or parcel (opens new window) to bundle the custom element.

# Local

To install the library inside your project, run the following command:

npm i @imgix/ix-video
1

Now you can use the library in your project.

We recommend that you import the library in your application's main file so that the custom elements are registered for the entire application.

import {IxVideo} from '@imgix/ix-video';
1

Look at our usage guide to for examples on how to us this inside your React, Vue, or other web-apps.

# Without build tools

To get started with @imgix/ix-video without a build step, copy the following code into you application's HTML file and open it in your browser. This will register the web components and make them available to your application.

Below is an example of how to import and use the ix-video custom element from a CDN on a static HTML page.

a note on CDN usage

We highly recommend self-hosting the library if you are using it in a production environment.

<html lang="en">
  <head>
    <title>ix-video in a static HTML file</title>
    <!-- Note: type 'module' here is important -->
    <script type="module" src="https://static.imgix.net/ix-video/@latest-v1/umd/ix-video.min.js"></script>
  </head>
  <body>
    <h1>There is no bundler or bundling involved!</h1>
    <ix-video
      controls
      source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
    >
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

← Basic Usage →