Player.ts

       

Video.js player component for Vue 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 just improt @videojs-player/vue.

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.

Related parsers:

• HLS.js
• DASH.js
• flv.js

---

Component Documentation

• Examples
• Usage of Vue
• Usage of React
• Component Props
• Component Events
• Player State

Video.js Documentation

• Video.js Guides
• Video.js API Documentation
• Video.js Options Reference
• Video.js Plugins and Skins

---

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'

const app = createApp()

app.use(VueVideoPlayer)

Local component

<template>
  <video-player
    src="/yout-xxx-path/video.mp4"
    autoplay="muted"
    :loop="true"
    :volume="true"
    ...
    @mounted="..."
    @play="..."
    @pause="..."
    @ended="..."
    @seeking="..."
    ...
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'

  export default defineComponent({
    components: {
      VideoPlayer
    }
  })
</script>

Custom player controls

<template>
  <video-player :children="[]" ...>
    <template v-slot="{ player, state }">
      <div class="player-controls">
        <button class="item" @click="state.playing ? player.pause() : player.play()">
          {{ state.playing ? 'Pause' : 'Play' }}
        </button>
        <button class="item" @click="player.muted(!state.muted)">
          {{ state.muted ? 'unmuted' : 'mute' }}
        </button>
        <!-- your custom controls element... -->
      </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'

export const Component: React.FC = () => {
  return (
    <VideoPlayer
      src="/yout-xxx-path/video.mp4"
      autoplay="muted"
      loop={true}
      volume={true}
      // props...
      onMounted={/*...*/}
      onPlay={/*...*/}
      onPause={/*...*/}
      onEnded={/*...*/}
      onSeeking={/*...*/}
      // 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="player-controls">
          <button class="item" onClick={() => state.playing ? player.pause() : player.play()}>
            {{ state.playing ? 'Pause' : 'Play' }}
          </button>
          <button class="item" onClick={() => player.muted(!state.muted)}>
            {{ state.muted ? 'unmuted' : 'mute' }}
          </button>
          {/* your custom controls element... */}
        </div>
      )}
    </VideoPlayer>
  )
}

Component Props

All parameters are optional and Video.js determines the default value of each prop.

prop	Video.js API Documentation	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	Used to control the volume of the player, when volume changes, the player will adjust the volume in real time.	Number	✅
playbackRate	Used to control the playbackRate 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.	Object

Component Events

For events emitted by Video.js, the parameters are fixed Event types, and for events emitted by components, the types are indicated in the table.

event	Video.js API Documentation	Vue	React
loadstart	event.loadstart	@loadstart	onLoadStart
suspend	event.suspend	@suspend	onSuspend
abort	event.abort	@abort	onAbort
error	event.error	@error	onError
emptied	event.emptied	@emptied	onEmptied
stalled	event.stalled	@stalled	onStalled
loadedmetadata	event.loadedmetadata	@loadedmetadata	onLoadedMetadata
loadeddata	event.loadeddata	@loadeddata	onLoadedData
canplay	event.canplay	@canplay	onCanPlay
canplaythrough	event.canplaythrough	@canplaythrough	onCanPlayThrough
playing	event.playing	@playing	onPlaying
waiting	event.waiting	@waiting	onWaiting
seeking	event.seeking	@seeking	onSeeking
seeked	event.seeked	@seeked	onSeeked
ended	event.ended	@ended	onEnded
durationchange	event.durationchange	@durationchange	onDurationChange
timeupdate	event.timeupdate	@timeupdate	onTimeUpdate
progress	event.progress	@progress	onProgress
play	event.play	@play	onPlay
pause	event.pause	@pause	onpause
ratechange	event.ratechange	@ratechange	onRateChange
resize	event.resize	@resize	onResize
volumechange	event.volumechange	@volumechange	onVolumeChange
posterchange	event.posterchange	@posterchange	onPosterChange
languagechange	event.languagechange	@languagechange	onLanguageChange
fullscreenchange	event.fullscreenchange	@fullscreenchange	onFullscreenChange
playbackrateschange	event.playbackrateschange	@playbackrateschange	onPlaybackRatesChange
controlsdisabled	event.controlsdisabled	@controlsdisabled	onControlsDisabled
controlsenabled	event.controlsenabled	@controlsenabled	onControlsEnabled
enterFullWindow	event.enterFullWindow	@enterFullWindow	onEnterFullWindow
exitFullWindow	event.exitFullWindow	@exitFullWindow	onExitFullWindow
enterpictureinpicture	event.enterpictureinpicture	@enterpictureinpicture	onEnterPictureInPicture
leavepictureinpicture	event.leavepictureinpicture	@leavepictureinpicture	onLeavePictureInPicture
sourceset	event.sourceset	@sourceset	onSourceSet
texttrackchange	event.texttrackchange	@texttrackchange	onTextTrackChange
textdata	event.textdata	@textdata	onTextData
useractive	event.useractive	@useractive	onUserActive
userinactive	event.userinactive	@userinactive	onUserInactive
usingcustomcontrols	event.usingcustomcontrols	@usingcustomcontrols	onUsingCustomControls
usingnativecontrols	event.usingnativecontrols	@usingnativecontrols	onUsingNativeControls
dispose	event.dispose	@dispose	onDispose
beforepluginsetup	event.beforepluginsetup	@beforepluginsetup	onBeforePluginSetup
pluginsetup	event.pluginsetup	@pluginsetup	onPluginSetup
componentresize	event.componentresize	@componentresize	onComponentResize
playerresize	event.playerresize	@playerresize	onPlayerResize
tap	event.tap	@tap	onTap
ready	event.ready	@ready	onReady
mounted	When player component mounted. ({ video: HTMLVideoElement, player: VideoJsPlayer, state: VideoPlayerState })	@mounted	onMounted
stateChange	When player state changed (React only). (state: VideoPlayerState)	-	onStateChange

Player State

The component maintains fully responsive state objects internally so that you can read the player state out of the box outside of the player.

key	description	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	-	Boolean
volume	-	Number
muted	-	Boolean
poster	-	String
playing	-	Boolean
waiting	-	Boolean
seeking	-	Boolean
paused	-	Boolean
ended	-	Boolean
currentTime	-	Number
duration	-	Number
playbackRate	-	Number
playbackRates	-	Array<Number>
fullscreen	-	Boolean
language	-	String
userActive	-	Boolean
readyState	-	videojs.ReadyState
networkState	-	videojs.NetworkState
error	-	MediaError | Null
buffered	-	videojs.TimeRange
bufferedPercent	-	Number
played	-	TimeRanges
seekable	-	TimeRanges
audioTracks	-	videojs.AudioTrackList
videoTracks	-	videojs.VidioTrackList
textTracks	-	TextTrackList

Video.js extension

import videojs from 'video.js'

// videojs plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
  // 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

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.