⚠️ NoteThis package has moved to the imgix/ix-elements/packages/ix-video repository. For updates, issues, and bug reports please see ix-elements.
The README and Documentation here reference
@imgix/ix-videoversions up to1.x.
ix-video is an imgix video custom element that works anywhere.
-
Node v12+
-
Browsers with Custom Elements V1 and Shadow DOM support, e.g. Chrome, Firefox, Safari, Edge (79+)
Browsers without native custom element support require a polyfill.
For Node/browser versions without es6 module support, you'll need to use a bundler like webpack or parcel to bundle the custom element.
Install this package in your project:
npm i @imgix/ix-videoOr add it from a CDN:
<script
type="module"
src="https://static.imgix.net/ix-video/@latest-v1/umd/ix-video.min.js"
></script>For advanced usage instructions, customizations, and more, please see this project's complete documentation site.
These docs also host examples of how to use this component inside your React, Vue, or other web apps.
Below is an example of how to import and use the ix-video custom element from a direct import or CDN on a static HTML page.
<html lang="en">
<head>
<title>ix-video in a static HTML file</title>
<!-- Note: type 'module' here is important -->
<script type="module">
import {IxVideo} from './node_modules/@imgix/ix-video/dist/index.bundled.js';
</script>
<!-- Alternatively, the component can be loaded via a CDN -->
<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>source: string, required
The video's source URL. Should be used in combination with type attribute when the source is not an HLS source.
type: string, optional (defaults to 'application/x-mpegURL')
The media type of the video. Supports standard video media types and HLS media types.
data-setup: string, optional (defaults to '{}')
Sets Video.js specific options. See video.js documentation for examples.
fixed: boolean, optional (defaults to false)
Will force the player to be a fixed size. This is useful if you want to use the player in a layout that has a fixed dimension.
Without the fixed attribute, the player will be responsive to the size of the container it is placed in.
controls: boolean, optional (defaults to false)
Show/hide the player controls.
width: string, optional
The width of the video player. When fixed is set to true, the player will not automatically resize to fit inside the container's dimensions.
height: string, optional
Sets the video player's height. If fixed is set to true, the player will not automatically resize to fit inside the container's dimensions.
poster: string, optional
The video's poster image URL. The poster attribute will automatically try to resize the poster image to fit the video player's dimensions, assuming the attribute is given an imgix image URL.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent