ix-video v1.x

# Advanced Usage

# Restricting the player's size

You can restrict the video player's dimensions to a specific size one of two ways:

  1. by styling its container.
  2. by specifying the width and height attributes and
  3. by adding the fixed attribute









 






 






 






<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      max-width: 200px;
      border: 2px solid orange;
    "
  >
    <div style="width: 200px">
      <ix-video
        controls
        source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
      ></ix-video>
    </div>
    <ix-video
      width="200"
      controls
      source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
    ></ix-video>
    <ix-video
      width="300"
      height="160"
      fixed
      controls
      source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
    ></ix-video>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Without the fixed attribute, the player will be responsive to the size of the container it is placed in.

The fixed attribute 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 width.

# Player configuration

ix-video accepts most of the data-setup options (opens new window) supported by video.js. This allows you to customize the player's capabilities and behavior beyond what's available to native <video> element.

For example, you can add playback speed support to the player by adding the following data-setup option:

<ix-video
  controls
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
  data-setup='{"playbackRates": [0.5, 1, 1.5, 2]}'
></ix-video>
1
2
3
4
5

Your video will now display the defined playback rate options on the bottom right-hand side of the playback controls.

# video.js plugins

WARNING

video.js plugins support is experimental and could change at any time

Register the plugin as you would any other video.js plugin.

For example, to register the videojs-seek-buttons plugin, import the module somewhere in your app where you have access to the window and get a reference to the window.videojs object. Then, register the plugin as is suggested in their documentation (opens new window).

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.css"
/>
<!-- HLS video that fills container -->
<div style="display: flex; width: 480px; height: 255px">
  <ix-video
    id="video-with-skip-plugin"
    source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
    controls
  ></ix-video>
</div>
<script type="module">
  await import(
    'https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.js'
  );
  const videoElement = document.getElementById('video-with-skip-plugin');
  const videojsPlayer = window.videojs(videoElement);
  videojsPlayer.seekButtons({
    forward: 5,
    back: 5,
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Press play to see the skip buttons added by the plugin

← Attributes →