@ctd1500/vue-videojs-player
v0.2.0
Published
Video.js player component for Vue 3.
Readme
@ctd1500/vue-videojs-player
Video.js 8 player component for Vue 3.
This is a fork of surmon-china/videojs-player.
About this fork
- React support has been removed, this package is Vue 3 only
- Upgraded from Video.js 7 to Video.js 8
Component Documentation
Video.js Documentation
Usage
Install
pnpm add video.js @ctd1500/vue-videojs-playerVideo.js's default styles are not bundled with the component, so import them yourself once, e.g. in your app's entry point:
import 'video.js/dist/video-js.css'Global component
import { createApp } from 'vue'
import VueVideoPlayer from '@ctd1500/vue-videojs-player'
const app = createApp()
app.use(VueVideoPlayer)Local component
The component registers under both <video-player> and <vue-video-player>.
<template>
<video-player
src="/your-path/video.mp4"
poster="/your-path/poster.jpg"
:loop="true"
:volume="0.6"
...
@mounted="..."
@ready="..."
@play="..."
@pause="..."
@ended="..."
@seeking="..."
...
/>
</template>
<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@ctd1500/vue-videojs-player'
export default defineComponent({
components: {
VideoPlayer
}
})
</script>Custom player controls
<template>
<video-player :children="[]" ...>
<template v-slot="{ video, player, state }">
<div class="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>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 / playsinline | options.playsInline | Boolean | ✓ |
| crossOrigin / 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 | String | ✓ |
| 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 | |
| reportTouchActivity | options.reportTouchActivity | Boolean | |
| techOrder | options.techOrder | Array | |
| inactivityTimeout | options.inactivityTimeout | Number | |
| userActions | options.userActions | Object | |
| controlBar | options.controlBar | Object | ✓ |
| restoreEl | options.restoreEl | Boolean \| Element | |
| vtt.js | options['vtt.js'] | String | |
| children | 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 |
| :----------------------------------------------------------------------------------------- | :----------------------- |
| event.loadstart | @loadstart |
| event.suspend | @suspend |
| event.abort | @abort |
| event.error | @error |
| event.emptied | @emptied |
| event.stalled | @stalled |
| event.loadedmetadata | @loadedmetadata |
| event.loadeddata | @loadeddata |
| event.canplay | @canplay |
| event.canplaythrough | @canplaythrough |
| event.playing | @playing |
| event.waiting | @waiting |
| event.seeking | @seeking |
| event.seeked | @seeked |
| event.ended | @ended |
| event.durationchange | @durationchange |
| event.timeupdate | @timeupdate |
| event.progress | @progress |
| event.play | @play |
| event.pause | @pause |
| event.ratechange | @ratechange |
| event.resize | @resize |
| event.volumechange | @volumechange |
| event.posterchange | @posterchange |
| event.languagechange | @languagechange |
| event.fullscreenchange | @fullscreenchange |
| event.playbackrateschange | @playbackrateschange |
| event.controlsdisabled | @controlsdisabled |
| event.controlsenabled | @controlsenabled |
| event.enterFullWindow | @enterFullWindow |
| event.exitFullWindow | @exitFullWindow |
| event.enterpictureinpicture | @enterpictureinpicture |
| event.leavepictureinpicture | @leavepictureinpicture |
| event.sourceset | @sourceset |
| event.texttrackchange | @texttrackchange |
| event.textdata | @textdata |
| event.useractive | @useractive |
| event.userinactive | @userinactive |
| event.usingcustomcontrols | @usingcustomcontrols |
| event.usingnativecontrols | @usingnativecontrols |
| event.dispose | @dispose |
| event.beforepluginsetup | @beforepluginsetup |
| event.pluginsetup | @pluginsetup |
| event.componentresize | @componentresize |
| event.playerresize | @playerresize |
| event.tap | @tap |
| event.ready | @ready |
The events emitted by the component itself.
| Component Event | Description | Vue |
| :-------------- | :------------------------------------------------------------------------------------------------------------------------ | :----------- |
| mounted | Fires when player component mounted. ({ video: HTMLVideoElement, player: VideoJsPlayer, state: VideoPlayerState }) | @mounted |
| unmounted | Fires when player component unmounted. | @unmounted |
Two-way Binding
The component emits an update:<prop> event whenever Video.js changes the underlying value for a subset of responsive props, so those props support v-model:
width, height, muted, poster, controls, language, volume, playbackRate, playbackRates
<template>
<video-player v-model:volume="volume" v-model:muted="muted" ... />
</template>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.
| 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
Project layout:
player/ framework-agnostic Video.js glue (props, events, state, player factory)
src/ Vue component built on top of player/
dev/ Vite playground app for manual testing
test/ Vitest testspnpm install
pnpm dev
pnpm build
pnpm lint
pnpm typecheck
pnpm test
pnpm rebirth