Libraries
@imgix/ix-video build
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 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.
Installation
Install this package in your project:
npm i @imgix/ix-video
Or add it from a CDN:
<script
type="module"
src="https://unpkg.com/@imgix/ix-video@latest/dist/index.bundled.js"
></script>
Usage
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.
Using <ix-video>
on a static HTML static page
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://unpkg.com/@imgix/ix-video@latest/dist/index.bundled.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>
Attributes
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.
More Framework Libraries
- @imgix/angularbuildA library for integrating imgix into Angular applicationsTypeScript 4 12 days ago
- ember-cli-imgixbuildEasily add imgix functionality to your Ember applicationJavaScript 25 3 months ago
- @imgix/gatsbybuildA simple yet powerful integration between Gatsby and ImgixTypeScript 29 a day ago
- imgix.jsbuildResponsive images in the browser, simplifiedJavaScript 942 4 days ago
- imgix-railsbuildA gem for integrating imgix into Rails projectsRuby 104 3 months ago
- jekyll-imgixbuildA plugin for integrating imgix into Jekyll sitesRuby 48 a year ago
- react-imgixbuildReact component to display imgix imagesJavaScript 317 < 1 day ago
- @imgix/vuebuildA simple yet powerful integration between Vue and imgixTypeScript 30 a day ago