Advanced Usage Restricting the player's size You can restrict the video player's dimensions to a specific size one of two ways:
by styling its container. by specifying the width
and height
attributes and 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.
Video Player is loading.
Play Video Play Current Time 0:00
Duration 0:00
Seek to live, currently behind live LIVE Remaining Time - 0:00
Picture-in-Picture Fullscreen This is a modal window.
HLS playlist request error at URL: https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?ixlib=video-1.2.1.
Beginning of dialog window. Escape will cancel and close the window.
Text Color White Black Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Background Color Black White Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Transparent Window Color Black White Red Green Blue Yellow Magenta Cyan Transparency Transparent Semi-Transparent Opaque
Font Size 50% 75% 100% 125% 150% 175% 200% 300% 400% Text Edge Style None Raised Depressed Uniform Dropshadow Font Family Proportional Sans-Serif Monospace Sans-Serif Proportional Serif Monospace Serif Casual Script Small Caps Reset restore all settings to the default values Done
Close Modal Dialog End of dialog window.
Video Player is loading.
Play Video Play Current Time 0:00
Duration 0:00
Seek to live, currently behind live LIVE Remaining Time - 0:00
Picture-in-Picture Fullscreen This is a modal window.
HLS playlist request error at URL: https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?ixlib=video-1.2.1.
Beginning of dialog window. Escape will cancel and close the window.
Text Color White Black Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Background Color Black White Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Transparent Window Color Black White Red Green Blue Yellow Magenta Cyan Transparency Transparent Semi-Transparent Opaque
Font Size 50% 75% 100% 125% 150% 175% 200% 300% 400% Text Edge Style None Raised Depressed Uniform Dropshadow Font Family Proportional Sans-Serif Monospace Sans-Serif Proportional Serif Monospace Serif Casual Script Small Caps Reset restore all settings to the default values Done
Close Modal Dialog End of dialog window.
Video Player is loading.
Play Video Play Current Time 0:00
Duration 0:00
Seek to live, currently behind live LIVE Remaining Time - 0:00
Picture-in-Picture Fullscreen This is a modal window.
HLS playlist request error at URL: https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?ixlib=video-1.2.1.
Beginning of dialog window. Escape will cancel and close the window.
Text Color White Black Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Background Color Black White Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Transparent Window Color Black White Red Green Blue Yellow Magenta Cyan Transparency Transparent Semi-Transparent Opaque
Font Size 50% 75% 100% 125% 150% 175% 200% 300% 400% Text Edge Style None Raised Depressed Uniform Dropshadow Font Family Proportional Sans-Serif Monospace Sans-Serif Proportional Serif Monospace Serif Casual Script Small Caps Reset restore all settings to the default values Done
Close Modal Dialog End of dialog window.
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 Player is loading.
Play Video Play Current Time 0:00
Duration 0:00
Seek to live, currently behind live LIVE Remaining Time - 0:00
Picture-in-Picture Fullscreen This is a modal window.
HLS playlist request error at URL: https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?ixlib=video-1.2.1.
Beginning of dialog window. Escape will cancel and close the window.
Text Color White Black Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Background Color Black White Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Transparent Window Color Black White Red Green Blue Yellow Magenta Cyan Transparency Transparent Semi-Transparent Opaque
Font Size 50% 75% 100% 125% 150% 175% 200% 300% 400% Text Edge Style None Raised Depressed Uniform Dropshadow Font Family Proportional Sans-Serif Monospace Sans-Serif Proportional Serif Monospace Serif Casual Script Small Caps Reset restore all settings to the default values Done
Close Modal Dialog End of dialog window.
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"
/>
< 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
Video Player is loading.
Play Video Play Current Time 0:00
Duration 0:00
Seek to live, currently behind live LIVE Remaining Time - 0:00
Picture-in-Picture Fullscreen Beginning of dialog window. Escape will cancel and close the window.
Text Color White Black Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Background Color Black White Red Green Blue Yellow Magenta Cyan Transparency Opaque Semi-Transparent Transparent Window Color Black White Red Green Blue Yellow Magenta Cyan Transparency Transparent Semi-Transparent Opaque
Font Size 50% 75% 100% 125% 150% 175% 200% 300% 400% Text Edge Style None Raised Depressed Uniform Dropshadow Font Family Proportional Sans-Serif Monospace Sans-Serif Proportional Serif Monospace Serif Casual Script Small Caps Reset restore all settings to the default values Done
Close Modal Dialog End of dialog window.