Skip to content

surmon-china/videojs-player

main
Switch branches/tags
Code


videojs-player

GitHub stars   GitHub issues   GitHub forks   Test Codecov   license

@videojs-player/vue   @videojs-player/react   vue-video-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

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.