videojs-player
Video.js player component for Vue(3) and React.
⚠️
BREAKING CHANGE The vue-video-player
package has now been renamed to @videojs-player/vue
due to the addition of support for React. Also, support for Vue has undergone a Breaking change, with the latest version of the component only supporting Vue3.
The last version of the vue-video-player
package will be released in v6.0, which will just re-export everything from @videojs-player/vue
, so if you're ready to use the new version of vue-video-player
, please import @videojs-player/vue
directly.
The latest version of videojs-player supports responsiveness for the vast majority of Video.js configuration options and allows you to fully customize the player's control panel and interaction details, thanks to the fact that the component does enough processing internally for different frameworks.
Legacy Version
If you are looking for a legacy version of the component for Vue2, use the [email protected]
Component Documentation
Video.js Documentation
Usage (Vue)
Install
npm install video.js @videojs-player/vue --save
yarn add video.js @videojs-player/vue
Global component
import { createApp } from 'vue'
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const app = createApp()
app.use(VueVideoPlayer)
Local component
<template>
<video-player
src="/your-path/video.mp4"
poster="/your-path/poster.jpg"
controls
:loop="true"
:volume="0.6"
...
@mounted="..."
@ready="..."
@play="..."
@pause="..."
@ended="..."
@seeking="..."
...
/>
</template>
<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
export default defineComponent({
components: {
VideoPlayer
}
})
</script>
Custom player controls
<template>
<video-player :children="[]" ...>
<template v-slot="{ player, state }">
<div class="custom-player-controls">
<button @click="state.playing ? player.pause() : player.play()">
{{ state.playing ? 'Pause' : 'Play' }}
</button>
<button @click="player.muted(!state.muted)">
{{ state.muted ? 'UnMute' : 'Mute' }}
</button>
<!-- more custom controls elements ... -->
</div>
</template>
</video-player>
</template>
Usage (React)
Install
npm install video.js @videojs-player/react --save
yarn add video.js @videojs-player/react
Component
import React from 'react'
import { VideoPlayer } from '@videojs-player/react'
import 'video.js/dist/video-js.css'
export const Component: React.FC = () => {
return (
<VideoPlayer
src="/your-path/video.mp4"
poster="/your-path/poster.jpg"
controls
loop={true}
volume={0.6}
// more props...
onMounted={/*...*/}
onReady={/*...*/}
onPlay={/*...*/}
onPause={/*...*/}
onEnded={/*...*/}
onSeeking={/*...*/}
// more events...
/>
)
}
Custom player controls
import React from 'react'
import { VideoPlayer } from '@videojs-player/react'
export const Component: React.FC = () => {
return (
<VideoPlayer videoJsChildren={[]} /* props... */>
{({ player, state }) => (
<div class="custom-player-controls">
<button onClick={() => state.playing ? player.pause() : player.play()}>
{{ state.playing ? 'Pause' : 'Play' }}
</button>
<button onClick={() => player.muted(!state.muted)}>
{{ state.muted ? 'UnMute' : 'Mute' }}
</button>
{/* more custom controls elements ... */}
</div>
)}
</VideoPlayer>
)
}
Component Props
All parameters are optional and Video.js determines the default value of each prop.
"responsive"
means that if the prop value you pass in the component changes,
Video.js will automatically respond to the corresponding update,
e.g. a change in volume
will cause the player to change the volume.
Prop Name | Video.js API Doc & Description | Type | Responsive |
---|---|---|---|
id | options.id | String |
|
src | options.src | String |
✓ |
sources | options.sources | Array |
✓ |
width | options.width | Number |
✓ |
height | options.height | Number |
✓ |
preload | options.preload | String |
✓ |
loop | options.loop | Boolean |
✓ |
muted | options.muted | Boolean |
✓ |
poster | options.poster | String |
✓ |
controls | options.controls | Boolean |
✓ |
autoplay | options.autoplay | Boolean | String |
✓ |
playsinline | options.playsinline | Boolean |
✓ |
crossorigin | options.crossOrigin | String |
✓ |
volume | A number, between 0 and 1, control the volume of the player. | Number |
✓ |
playbackRate | Control the playback rate of the player. | Number |
✓ |
playbackRates | options.playbackRates | Array<Number> |
✓ |
fluid | options.fluid | Boolean |
✓ |
fill | options.fill | Boolean |
✓ |
language | options.language | String |
✓ |
languages | options.languages | Object |
|
tracks | options.tracks | Array |
✓ |
textTrackSettings | options.textTrackSettings | Object |
✓ |
responsive | options.responsive | Boolean |
✓ |
breakpoints | options.breakpoints | Object |
✓ |
fullscreen | options.fullscreen | FullscreenOptions |
|
aspectRatio | options.aspectRatio | Boolean |
✓ |
liveui | options.liveui | Boolean |
|
liveTracker | options.liveTracker | Object |
|
disablePictureInPicture | options.disablePictureInPicture | Boolean |
✓ |
notSupportedMessage | options.notSupportedMessage | String |
✓ |
normalizeAutoplay | options.normalizeAutoplay | Boolean |
✓ |
audioPosterMode | options.audioPosterMode | Boolean |
✓ |
audioOnlyMode | options.audioOnlyMode | Boolean |
✓ |
noUITitleAttributes | options.noUITitleAttributes | Boolean |
|
preferFullWindow | options.preferFullWindow | Boolean |
|
suppressNotSupportedError | options.suppressNotSupportedError | Boolean |
|
techCanOverridePoster | options.techCanOverridePoster | Boolean |
|
techOrder | options.techOrder | Array |
|
inactivityTimeout | options.inactivityTimeout | Number |
|
userActions | options.userActions | Object |
|
restoreEl | options.restoreEl | Boolean | Element |
|
vtt.js | options['vtt.js'] | String |
|
children (Vue) videoJsChildren (React) |
options.children | Array | Object |
|
html5 | options.html5 | Object |
|
plugins | options.plugins | Object |
|
options | A fallback scheme, if you need to use options that don't exist in props, pass them to options . |
VideoJsPlayerOptions |
Component Events
Events emitted by Video.js, the argument type is always EventTarget
.
Video.js Event | 🫥 🫥 🫥 🫥 🫥 🫥 | Vue | React |
---|---|---|---|
event.loadstart | - | @loadstart |
onLoadStart |
event.suspend | - | @suspend |
onSuspend |
event.abort | - | @abort |
onAbort |
event.error | - | @error |
onError |
event.emptied | - | @emptied |
onEmptied |
event.stalled | - | @stalled |
onStalled |
event.loadedmetadata | - | @loadedmetadata |
onLoadedMetadata |
event.loadeddata | - | @loadeddata |
onLoadedData |
event.canplay | - | @canplay |
onCanPlay |
event.canplaythrough | - | @canplaythrough |
onCanPlayThrough |
event.playing | - | @playing |
onPlaying |
event.waiting | - | @waiting |
onWaiting |
event.seeking | - | @seeking |
onSeeking |
event.seeked | - | @seeked |
onSeeked |
event.ended | - | @ended |
onEnded |
event.durationchange | - | @durationchange |
onDurationChange |
event.timeupdate | - | @timeupdate |
onTimeUpdate |
event.progress | - | @progress |
onProgress |
event.play | - | @play |
onPlay |
event.pause | - | @pause |
onpause |
event.ratechange | - | @ratechange |
onRateChange |
event.resize | - | @resize |
onResize |
event.volumechange | - | @volumechange |
onVolumeChange |
event.posterchange | - | @posterchange |
onPosterChange |
event.languagechange | - | @languagechange |
onLanguageChange |
event.fullscreenchange | - | @fullscreenchange |
onFullscreenChange |
event.playbackrateschange | - | @playbackrateschange |
onPlaybackRatesChange |
event.controlsdisabled | - | @controlsdisabled |
onControlsDisabled |
event.controlsenabled | - | @controlsenabled |
onControlsEnabled |
event.enterFullWindow | - | @enterFullWindow |
onEnterFullWindow |
event.exitFullWindow | - | @exitFullWindow |
onExitFullWindow |
event.enterpictureinpicture | - | @enterpictureinpicture |
onEnterPictureInPicture |
event.leavepictureinpicture | - | @leavepictureinpicture |
onLeavePictureInPicture |
event.sourceset | - | @sourceset |
onSourceSet |
event.texttrackchange | - | @texttrackchange |
onTextTrackChange |
event.textdata | - | @textdata |
onTextData |
event.useractive | - | @useractive |
onUserActive |
event.userinactive | - | @userinactive |
onUserInactive |
event.usingcustomcontrols | - | @usingcustomcontrols |
onUsingCustomControls |
event.usingnativecontrols | - | @usingnativecontrols |
onUsingNativeControls |
event.dispose | - | @dispose |
onDispose |
event.beforepluginsetup | - | @beforepluginsetup |
onBeforePluginSetup |
event.pluginsetup | - | @pluginsetup |
onPluginSetup |
event.componentresize | - | @componentresize |
onComponentResize |
event.playerresize | - | @playerresize |
onPlayerResize |
event.tap | - | @tap |
onTap |
event.ready | - | @ready |
onReady |
The events emitted by videojs-player component.
Component Event | Description | Vue | React |
---|---|---|---|
mounted | Fires when player component mounted. ({ video: HTMLVideoElement, player: VideoJsPlayer, state: VideoPlayerState }) |
@mounted |
onMounted |
unmounted | Fires when player component unmounted. | @unmounted |
onUnmounted |
stateChange | Fires when player state changed (React only). (state: VideoPlayerState) |
- | onStateChange |
Player State
The component maintains a fully responsive state object internally with the player so that you can consume the player state out-of-the-box outside the player,
you can get this object via the mounted
event or stateChange
(React Only).
Key | Description | Value type |
---|---|---|
src | The URL of the currently playing video. | String |
currentSrc | ditto | String |
currentSource | The currently playing video source object. | videojs.Tech.SourceObject |
width | Player's width. | Number |
height | Player's height. | Number |
currentWidth | ditto | Number |
currentHeight | ditto | Number |
videoWidth | Video element's width. | Number |
videoHeight | Video element's height. | Number |
controls | Whether player controls are enabled or not. | Boolean |
volume | Player's volume. | Number |
muted | Is the player muted. | Boolean |
poster | Player poster image URL. | String |
playing | Is it playing now. | Boolean |
waiting | Is it waiting now. | Boolean |
seeking | A seek operation began. | Boolean |
paused | Playback has been paused. | Boolean |
ended | Playback has stopped because the end of the media was reached. | Boolean |
currentTime | - | Number |
duration | - | Number |
playbackRate | - | Number |
playbackRates | - | Array<Number> |
isFullscreen | - | Boolean |
isInPictureInPicture | Whether it is picture-in-picture mode. | Boolean |
isLive | Is the currently playing live video. | Boolean |
language | Video.js current language. | String |
userActive | - | Boolean |
readyState | - | videojs.ReadyState |
networkState | - | videojs.NetworkState |
error | A Custom MediaError of Video.js. | MediaError | Null |
buffered | An object that contains ranges of time. | videojs.TimeRange |
bufferedPercent | - | Number |
played | - | TimeRanges |
seekable | - | TimeRanges |
textTracks | - | videojs.TextTrackList |
audioTracks | - | videojs.AudioTrackList |
videoTracks | - | videojs.VidioTrackList |
Video.js extension
import videojs from 'video.js'
// Video.js plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
// do something...
}
videojs.registerPlugin('examplePlugin', ExamplePlugin)
// more Video.js operation...
Development
pnpm install
pnpm dev
pnpm dev:vue
pnpm dev:react
pnpm build
pnpm build:vue
pnpm build:react
pnpm lint
pnpm test
pnpm rebirth
pnpm release
Changelog
License
Licensed under the MIT License.