@imgix/ix-video
Advanced tools
<ix-video></ix-video> is a imgix-flavored HTML5 video element.
If you are familiar with using <video /> + Hls.js in your application, then you'll feel right at home with this web component.
If you're using npm or yarn, install that way:
yarn add @imgix/ix-video
or
npm i @imgix/ix-video
Then, import the library into your application with either import or require:
import '@imgix/ix-video';
or
require('@imgix/ix-video');
Alternatively, use the CDN hosted version of this package:
<script src="https://cdn.jsdelivr.net/npm/@imgix/ix-video@0"></script>
If you are using ECMAScript modules, you can also load the ix-video.mjs file with type=module:
<script type="module" src="https://cdn.jsdelivr.net/npm/@imgix/ix-video@0/dist/ix-video.mjs"></script>
Without <ix-video> if you want to use the browser built-in HTML5 video element for playback you would have to wire up Hls.js yourself.
<ix-video> will automatically handle recoverable errors that happen during video playback. This is particularly handy for live streams that may experience disconnects.
<ix-video> will use the optimal Hls.js settings for imgix Video so you don't have to worry about that. <ix-video> 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.
Loading this library in the browser will register a custom web component for <ix-video>.
Now you are free to use this web component in your HTML, just as you would with the HTML5 <video> element.
<body>
<ix-video
src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4"
controls
muted
></ix-video>
</body>
Attributes:
start-time: number (seconds): Set this to start playback of your media at some time other than 0.All the other attributes that you would use on a <video> element like poster, controls, muted and autoplay are available and will work the same as they do with the HTML5 video element.
By default <ix-video> will try to use native playback via the underlying <video> tag whenever possible.
However, it can also instead use an in-code player when the browser browser supports Media Source Extension.
This includes MSE in Mac OS Safari.
If you prefer to use the in-code MSE-based engine (currently hls.js) whenever possible, then set the prefer-playback attribute to mse.
<ix-video
src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=mp4"
prefer-playback="mse"
muted
controls
>
</ix-video>
By default <ix-video> 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 <ix-video> 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 <ix-video> will rely on native plyaback via the underlying <video/> tag.
<ix-video
src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.mp4"
prefer-playback="mse"
controls
>
</ix-video>
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:
<ix-video
src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=hls"
type="application/vnd.apple.mpegurl"
prefer-playback="mse"
controls
>
</ix-video>
Or, for convenience, we also support the shorthand type="hls:
<ix-video
src="https://assets.imgix.video/videos/alexa_ski_big_bear_mountain.MOV?fm=hls"
type="hls"
prefer-playback="mse"
controls
>
</ix-video>
Take a look at our ix-video-react (beta) package to use <ix-video /> in React.
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 imgix Video.
You sure can! Pass in src="" with an HLS url.
FAQs
A custom imgix video element for the browser that works anywhere
The npm package @imgix/ix-video receives a total of 170 weekly downloads. As such, @imgix/ix-video popularity was classified as not popular.
We found that @imgix/ix-video demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket found 37 malicious PyPI wheels that abuse Python startup hooks to launch a Bun-powered credential stealer tied to Mini Shai-Hulud/Miasma.
Security News
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.
Security News
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.