• Stars
    star
    5,203
  • Rank 7,967 (Top 0.2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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


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 [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.

More Repositories

1

vue-awesome-swiper

🏆 Swiper component for @vuejs
JavaScript
12,800
star
2

vue-quill-editor

@quilljs editor component for @vuejs(2)
JavaScript
7,368
star
3

vue-codemirror

@codemirror code editor component for @vuejs
TypeScript
3,217
star
4

surmon.me

🌱 My digital garden, powered by myself.
Vue
2,091
star
5

nodepress

🟢 RESTful API service for https://surmon.me blog, powered by @nestjs
TypeScript
1,422
star
6

surmon.me.native

📱 My blog app, powered by react-native
TypeScript
620
star
7

vue-touch-ripple

A ink-ripple effect component for @vuejs
TypeScript
480
star
8

angular-admin

🔏 Admin client for surmon.me blog powered by @angular and Bootstrap4
TypeScript
354
star
9

simple-netease-cloud-music

🎵 A simple netease music api lib. 简单、统一、轻巧的 Node.js 版网易云音乐 API
TypeScript
272
star
10

ngx-quill-editor

🍡@quilljs editor component for @angular
TypeScript
232
star
11

surmon-china.github.io

My GitHub repositories homepage.
Vue
221
star
12

naivebayes

NaiveBayes classifier for JavaScript
JavaScript
142
star
13

vue-drag-zone

Drag Zone component for @vuejs
JavaScript
129
star
14

surmon.admin

🔏 Admin client for surmon.me blog, powered by React & @veactjs
TypeScript
61
star
15

mongodb-data-api

MongoDB Atlas Data API SDK for @nodejs
TypeScript
40
star
16

emoji-233333

😂 2333333
JavaScript
38
star
17

sre.surmon.me

💻 SRE service for Surmon.me blog.
HTML
34
star
18

vue2any

把 vue 组件转换为任何 web 类模板
JavaScript
33
star
19

wonderful-bing-wallpaper

🌅 Simple bing daily wallpaper API lib for Node.js.
TypeScript
31
star
20

vuniversal

[WIP] Create vue (3) universal web applications quickly by @vitejs.
TypeScript
19
star
21

surmon-china

About me
JavaScript
16
star
22

wordpress-theme-one

🎨 A blog theme for @wordpress
CSS
16
star
23

libundler

📦 Universal JavaScript library bundler, powered by @rollup.
TypeScript
14
star
24

developer-code-guide

🗒Developer code guide.
12
star
25

README.vue

Design your README.md by @vuejs component.
Vue
11
star
26

wordpress-theme-surmon

🎨 A blog theme for @wordpress
PHP
10
star
27

surmon.me.flutter

📱 My blog app powered by @flutter (The repositorie has been deprecated)
Dart
9
star
28

wordpress-theme-metro

🎨 A blog theme for @wordpress
PHP
9
star
29

javascript-gobang

⚫Javascript gobang game
HTML
9
star
30

nurse.js

My lib.
JavaScript
9
star
31

jquery-dragZone

jQuery 拖拽改变div大小效果
HTML
7
star
32

better-itg-flat-dark-vscode-theme

Better itg.flat.dark theme for vscode. Base on Sublime Text
7
star
33

wordpress-theme-think

🎨 A cms theme for @wordpress
PHP
7
star
34

coolcut

cool cut psd file
JavaScript
5
star
35

chrome-tmall-rate-thumb-extend

⚾️ 增加在天猫商品评价页显示原图及图片旋转操作功能
JavaScript
5
star
36

action-ssl-cert-expiry-checker

Check SSL certificate expiry time for your domains
JavaScript
3
star
37

ifttt

IFTTT SPACE
1
star
38

.github

GitHub
1
star