bighamD/videojs-player

@videojs player component for @vuejs(3) and React.

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 vue-video-player@5.x

---

Component Documentation

• Examples
• Usage in Vue
• Usage in 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'
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

• @videojs-player/vue
• @videojs-player/react
• vue-video-player

License

Licensed under the MIT License.