Nerfing Powerful Megalomaniacs

    @imgix/ix-video
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    imgix logo

    ix-video is an imgix video custom element that works anywhere.

    npm version circleci


    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.

    Install

    npm i @imgix/ix-video

    DownloadsWeekly Downloads

    975

    Version

    1.1.0

    License

    BSD-3-Clause

    Unpacked Size

    5.75 MB

    Total Files

    20

    Last publish

    Collaborators

    • atlawrie
    • imgix-company
    • czacharias
    • sherwinski
    • cnoble
    • matt-imgix
    • heyitsbryanm
    • ultimatealf
    • edsz
    • lball
    • vuryanh