{"id":13561765,"url":"https://github.com/surmon-china/videojs-player","last_synced_at":"2025-05-13T19:03:01.197Z","repository":{"id":38185090,"uuid":"69470049","full_name":"surmon-china/videojs-player","owner":"surmon-china","description":"@videojs player component for @vuejs(3) and React.","archived":false,"fork":false,"pushed_at":"2022-08-23T11:04:12.000Z","size":1787,"stargazers_count":5357,"open_issues_count":202,"forks_count":1137,"subscribers_count":76,"default_branch":"main","last_synced_at":"2025-05-05T22:43:17.842Z","etag":null,"topics":["dash-player","flv-player","hls-player","player","player-video","react-player","react-video-player","react-videojs","video-player","videojs","videojs-flv","videojs-player","vue","vue-component","vue-hls","vue-player","vue-video-player","vue-videojs","web-media-player"],"latest_commit_sha":null,"homepage":"https://github.surmon.me/videojs-player","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surmon-china.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-28T14:11:18.000Z","updated_at":"2025-05-05T02:44:30.000Z","dependencies_parsed_at":"2022-07-14T03:50:39.515Z","dependency_job_id":null,"html_url":"https://github.com/surmon-china/videojs-player","commit_stats":null,"previous_names":["surmon-china/vue-video-player"],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvideojs-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvideojs-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvideojs-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvideojs-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surmon-china","download_url":"https://codeload.github.com/surmon-china/videojs-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010792,"owners_count":21998993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dash-player","flv-player","hls-player","player","player-video","react-player","react-video-player","react-videojs","video-player","videojs","videojs-flv","videojs-player","vue","vue-component","vue-hls","vue-player","vue-video-player","vue-videojs","web-media-player"],"created_at":"2024-08-01T13:01:00.881Z","updated_at":"2025-05-13T19:03:01.164Z","avatar_url":"https://github.com/surmon-china.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003ca href=\"https://videojs.com#gh-dark-mode-only\" target=\"_blank\"\u003e\n \u003cbr /\u003e\n \u003cimg height=\"52px\" src=\"/videojs-logo.png\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n# videojs-player\n\n[![GitHub stars](https://img.shields.io/github/stars/surmon-china/videojs-player.svg?style=for-the-badge)](https://github.com/surmon-china/videojs-player/stargazers)\n\u0026nbsp;\n[![GitHub issues](https://img.shields.io/github/issues/surmon-china/videojs-player.svg?style=for-the-badge)](https://github.com/surmon-china/videojs-player/issues)\n\u0026nbsp;\n[![GitHub forks](https://img.shields.io/github/forks/surmon-china/videojs-player.svg?style=for-the-badge)](https://github.com/surmon-china/videojs-player/network)\n\u0026nbsp;\n[![Test Codecov](https://img.shields.io/codecov/c/github/surmon-china/videojs-player?style=for-the-badge)](https://codecov.io/gh/surmon-china/videojs-player)\n\u0026nbsp;\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](/LICENSE)\n\n[![@videojs-player/vue](https://img.shields.io/npm/v/@videojs-player/vue?color=c7343a\u0026label=@videojs-player/vue\u0026style=for-the-badge)](https://www.npmjs.com/package/@videojs-player/vue)\n\u0026nbsp;\n[![@videojs-player/react](https://img.shields.io/npm/v/@videojs-player/react?color=c7343a\u0026label=@videojs-player/react\u0026style=for-the-badge)](https://www.npmjs.com/package/@videojs-player/react)\n\u0026nbsp;\n[![vue-video-player](https://img.shields.io/npm/v/vue-video-player?color=c7343a\u0026label=legacy\u0026style=for-the-badge)](https://www.npmjs.com/package/vue-video-player)\n\n[**Video.js**](https://github.com/videojs/video.js) player component for **Vue(3)** and **React**.\n\n---\n\n### BREAKING CHANGE ⚠️\n\nThe `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**.\n\nThe 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.\n\nThe 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.\n\n### Legacy Version\n\nIf you are looking for a legacy version of the component for **Vue2**, use the [vue-video-player@5.x](https://github.com/surmon-china/videojs-player/tree/vue-video-player)\n\n---\n\n### Component Documentation\n\n- [Examples](https://github.surmon.me/videojs-player)\n- [Usage in Vue](#usage-vue)\n- [Usage in React](#usage-react)\n- [Component Props](#component-props)\n- [Component Events](#component-events)\n- [Player State](#player-state)\n\n### Video.js Documentation\n\n- [Video.js Guides](https://videojs.com/guides)\n- [Video.js API Documentation](https://docs.videojs.com/)\n- [Video.js Options Reference](https://videojs.com/guides/options/)\n- [Video.js Plugins and Skins](https://videojs.com/plugins/)\n\n---\n\n### Usage (Vue)\n\n#### Install\n\n```bash\nnpm install video.js @videojs-player/vue --save\n```\n\n```\nyarn add video.js @videojs-player/vue\n```\n\n#### Global component\n\n```javascript\nimport { createApp } from 'vue'\nimport VueVideoPlayer from '@videojs-player/vue'\nimport 'video.js/dist/video-js.css'\n\nconst app = createApp()\n\napp.use(VueVideoPlayer)\n```\n\n#### Local component\n\n```vue\n\u003ctemplate\u003e\n \u003cvideo-player\n src=\"/your-path/video.mp4\"\n poster=\"/your-path/poster.jpg\"\n controls\n :loop=\"true\"\n :volume=\"0.6\"\n ...\n @mounted=\"...\"\n @ready=\"...\"\n @play=\"...\"\n @pause=\"...\"\n @ended=\"...\"\n @seeking=\"...\"\n ...\n /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { defineComponent } from 'vue'\n import { VideoPlayer } from '@videojs-player/vue'\n import 'video.js/dist/video-js.css'\n\n export default defineComponent({\n components: {\n VideoPlayer\n }\n })\n\u003c/script\u003e\n```\n\n#### Custom player controls\n\n```vue\n\u003ctemplate\u003e\n \u003cvideo-player :children=\"[]\" ...\u003e\n \u003ctemplate v-slot=\"{ player, state }\"\u003e\n \u003cdiv class=\"custom-player-controls\"\u003e\n \u003cbutton @click=\"state.playing ? player.pause() : player.play()\"\u003e\n {{ state.playing ? 'Pause' : 'Play' }}\n \u003c/button\u003e\n \u003cbutton @click=\"player.muted(!state.muted)\"\u003e\n {{ state.muted ? 'UnMute' : 'Mute' }}\n \u003c/button\u003e\n \u003c!-- more custom controls elements ... --\u003e\n \u003c/div\u003e\n \u003c/template\u003e\n \u003c/video-player\u003e\n\u003c/template\u003e\n```\n\n### Usage (React)\n\n#### Install\n\n```bash\nnpm install video.js @videojs-player/react --save\n```\n\n```\nyarn add video.js @videojs-player/react\n```\n\n#### Component\n\n```tsx\nimport React from 'react'\nimport { VideoPlayer } from '@videojs-player/react'\nimport 'video.js/dist/video-js.css'\n\nexport const Component: React.FC = () =\u003e {\n return (\n \u003cVideoPlayer\n src=\"/your-path/video.mp4\"\n poster=\"/your-path/poster.jpg\"\n controls\n loop={true}\n volume={0.6}\n // more props...\n onMounted={/*...*/}\n onReady={/*...*/}\n onPlay={/*...*/}\n onPause={/*...*/}\n onEnded={/*...*/}\n onSeeking={/*...*/}\n // more events...\n /\u003e\n )\n}\n```\n\n#### Custom player controls\n\n```tsx\nimport React from 'react'\nimport { VideoPlayer } from '@videojs-player/react'\n\nexport const Component: React.FC = () =\u003e {\n return (\n \u003cVideoPlayer videoJsChildren={[]} /* props... */\u003e\n {({ player, state }) =\u003e (\n \u003cdiv class=\"custom-player-controls\"\u003e\n \u003cbutton onClick={() =\u003e state.playing ? player.pause() : player.play()}\u003e\n {{ state.playing ? 'Pause' : 'Play' }}\n \u003c/button\u003e\n \u003cbutton onClick={() =\u003e player.muted(!state.muted)}\u003e\n {{ state.muted ? 'UnMute' : 'Mute' }}\n \u003c/button\u003e\n {/* more custom controls elements ... */}\n \u003c/div\u003e\n )}\n \u003c/VideoPlayer\u003e\n )\n}\n```\n\n### Component Props\n\nAll parameters are optional and Video.js determines the default value of each prop.\n\n`\"responsive\"` means that if the prop value you pass in the component changes,\nVideo.js will automatically respond to the corresponding update,\ne.g. a change in `volume` will cause the player to change the volume.\n\n| Prop Name | Video.js API Doc \u0026 Description | Type | Responsive |\n| :---------------------------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------- | :--------- |\n| id | [options.id](https://videojs.com/guides/options/#id) | `String` | |\n| src | [options.src](https://videojs.com/guides/options/#src) | `String` | ✓ |\n| sources | [options.sources](https://videojs.com/guides/options/#sources) | `Array` | ✓ |\n| width | [options.width](https://videojs.com/guides/options/#width) | `Number` | ✓ |\n| height | [options.height](https://videojs.com/guides/options/#height) | `Number` | ✓ |\n| preload | [options.preload](https://videojs.com/guides/options/#preload) | `String` | ✓ |\n| loop | [options.loop](https://videojs.com/guides/options/#loop) | `Boolean` | ✓ |\n| muted | [options.muted](https://videojs.com/guides/options/#muted) | `Boolean` | ✓ |\n| poster | [options.poster](https://videojs.com/guides/options/#poster) | `String` | ✓ |\n| controls | [options.controls](https://videojs.com/guides/options/#controls) | `Boolean` | ✓ |\n| autoplay | [options.autoplay](https://videojs.com/guides/options/#autoplay) | `Boolean \\| String` | ✓ |\n| playsinline | [options.playsinline](https://docs.videojs.com/player#playsinline) | `Boolean` | ✓ |\n| crossorigin | [options.crossOrigin](https://docs.videojs.com/player#crossorigin) | `String` | ✓ |\n| volume | A number, between 0 and 1, control the volume of the player. | `Number` | ✓ |\n| playbackRate | Control the playback rate of the player. | `Number` | ✓ |\n| playbackRates | [options.playbackRates](https://videojs.com/guides/options/#playbackrates) | `Array\u003cNumber\u003e` | ✓ |\n| fluid | [options.fluid](https://videojs.com/guides/options/#fluid) | `Boolean` | ✓ |\n| fill | [options.fill](https://videojs.com/guides/options/#fill) | `Boolean` | ✓ |\n| language | [options.language](https://videojs.com/guides/options/#language) | `String` | ✓ |\n| languages | [options.languages](https://videojs.com/guides/options/#languages) | `Object` | |\n| tracks | [options.tracks](https://videojs.com/guides/text-tracks/) | `Array` | ✓ |\n| textTrackSettings | [options.textTrackSettings](https://docs.videojs.com/texttracksettings) | `Object` | ✓ |\n| responsive | [options.responsive](https://videojs.com/guides/options/#responsive) | `Boolean` | ✓ |\n| breakpoints | [options.breakpoints](https://videojs.com/guides/options/#breakpoints) | `Object` | ✓ |\n| fullscreen | [options.fullscreen](https://videojs.com/guides/options/#fullscreen) | `FullscreenOptions` | |\n| aspectRatio | [options.aspectRatio](https://videojs.com/guides/options/#aspectratio) | `Boolean` | ✓ |\n| liveui | [options.liveui](https://videojs.com/guides/options/#liveui) | `Boolean` | |\n| liveTracker | [options.liveTracker](https://videojs.com/guides/options/#livetrackertrackingthreshold) | `Object` | |\n| disablePictureInPicture | [options.disablePictureInPicture](https://docs.videojs.com/html5#disablePictureInPicture) | `Boolean` | ✓ |\n| notSupportedMessage | [options.notSupportedMessage](https://videojs.com/guides/options/#notsupportedmessage) | `String` | ✓ |\n| normalizeAutoplay | [options.normalizeAutoplay](https://videojs.com/guides/options/#normalizeautoplay) | `Boolean` | ✓ |\n| audioPosterMode | [options.audioPosterMode](https://videojs.com/guides/options/#audiopostermode) | `Boolean` | ✓ |\n| audioOnlyMode | [options.audioOnlyMode](https://videojs.com/guides/options/#audioonlymode) | `Boolean` | ✓ |\n| noUITitleAttributes | [options.noUITitleAttributes](https://videojs.com/guides/options/#nouititleattributes) | `Boolean` | |\n| preferFullWindow | [options.preferFullWindow](https://videojs.com/guides/options/#preferfullwindow) | `Boolean` | |\n| suppressNotSupportedError | [options.suppressNotSupportedError](https://videojs.com/guides/options/#suppressnotsupportederror) | `Boolean` | |\n| techCanOverridePoster | [options.techCanOverridePoster](https://videojs.com/guides/options/#techcanoverrideposter) | `Boolean` | |\n| techOrder | [options.techOrder](https://videojs.com/guides/options/#techorder) | `Array` | |\n| inactivityTimeout | [options.inactivityTimeout](https://videojs.com/guides/options/#inactivitytimeout) | `Number` | |\n| userActions | [options.userActions](https://videojs.com/guides/options/#useractions) | `Object` | |\n| restoreEl | [options.restoreEl](https://videojs.com/guides/options/#restoreel) | `Boolean \\| Element` | |\n| vtt.js | [options['vtt.js']](https://videojs.com/guides/options/#vttjs) | `String` | |\n| `children` (Vue) \u003cbr\u003e `videoJsChildren` (React) | [options.children](https://videojs.com/guides/options/#children) | `Array \\| Object` | |\n| html5 | [options.html5](https://videojs.com/guides/options/#html5) | `Object` | |\n| plugins | [options.plugins](https://videojs.com/guides/options/#plugins) | `Object` | |\n| options | A fallback scheme, if you need to use options that don't exist in props, pass them to `options`. | `VideoJsPlayerOptions` | |\n\n### Component Events\n\nEvents emitted by Video.js, the argument type is always [`EventTarget`](https://docs.videojs.com/eventtarget).\n\n| Video.js Event | 🫥 🫥 🫥 🫥 🫥 🫥 | Vue | React |\n| :----------------------------------------------------------------------------------------- | :---------- | :----------------------- | :------------------------ |\n| [event.loadstart](https://docs.videojs.com/player#event:loadstart) | - | `@loadstart` | `onLoadStart` |\n| [event.suspend](https://docs.videojs.com/player#event:suspend) | - | `@suspend` | `onSuspend` |\n| [event.abort](https://docs.videojs.com/player#event:abort) | - | `@abort` | `onAbort` |\n| [event.error](https://docs.videojs.com/player#event:error) | - | `@error` | `onError` |\n| [event.emptied](https://docs.videojs.com/player#event:emptied) | - | `@emptied` | `onEmptied` |\n| [event.stalled](https://docs.videojs.com/player#event:stalled) | - | `@stalled` | `onStalled` |\n| [event.loadedmetadata](https://docs.videojs.com/player#event:loadedmetadata) | - | `@loadedmetadata` | `onLoadedMetadata` |\n| [event.loadeddata](https://docs.videojs.com/player#event:loadeddata) | - | `@loadeddata` | `onLoadedData` |\n| [event.canplay](https://docs.videojs.com/player#event:canplay) | - | `@canplay` | `onCanPlay` |\n| [event.canplaythrough](https://docs.videojs.com/player#event:canplaythrough) | - | `@canplaythrough` | `onCanPlayThrough` |\n| [event.playing](https://docs.videojs.com/player#event:playing) | - | `@playing` | `onPlaying` |\n| [event.waiting](https://docs.videojs.com/player#event:waiting) | - | `@waiting` | `onWaiting` |\n| [event.seeking](https://docs.videojs.com/player#event:seeking) | - | `@seeking` | `onSeeking` |\n| [event.seeked](https://docs.videojs.com/player#event:seeked) | - | `@seeked` | `onSeeked` |\n| [event.ended](https://docs.videojs.com/player#event:ended) | - | `@ended` | `onEnded` |\n| [event.durationchange](https://docs.videojs.com/player#event:durationchange) | - | `@durationchange` | `onDurationChange` |\n| [event.timeupdate](https://docs.videojs.com/player#event:timeupdate) | - | `@timeupdate` | `onTimeUpdate` |\n| [event.progress](https://docs.videojs.com/player#event:progress) | - | `@progress` | `onProgress` |\n| [event.play](https://docs.videojs.com/player#event:play) | - | `@play` | `onPlay` |\n| [event.pause](https://docs.videojs.com/player#event:pause) | - | `@pause` | `onpause` |\n| [event.ratechange](https://docs.videojs.com/player#event:ratechange) | - | `@ratechange` | `onRateChange` |\n| [event.resize](https://docs.videojs.com/player#event:resize) | - | `@resize` | `onResize` |\n| [event.volumechange](https://docs.videojs.com/player#event:volumechange) | - | `@volumechange` | `onVolumeChange` |\n| [event.posterchange](https://docs.videojs.com/player#event:posterchange) | - | `@posterchange` | `onPosterChange` |\n| [event.languagechange](https://docs.videojs.com/player#event:languagechange) | - | `@languagechange` | `onLanguageChange` |\n| [event.fullscreenchange](https://docs.videojs.com/player#event:fullscreenchange) | - | `@fullscreenchange` | `onFullscreenChange` |\n| [event.playbackrateschange](https://docs.videojs.com/player#event:playbackrateschange) | - | `@playbackrateschange` | `onPlaybackRatesChange` |\n| [event.controlsdisabled](https://docs.videojs.com/player#event:controlsdisabled) | - | `@controlsdisabled` | `onControlsDisabled` |\n| [event.controlsenabled](https://docs.videojs.com/player#event:controlsenabled) | - | `@controlsenabled` | `onControlsEnabled` |\n| [event.enterFullWindow](https://docs.videojs.com/player#event:enterFullWindow) | - | `@enterFullWindow` | `onEnterFullWindow` |\n| [event.exitFullWindow](https://docs.videojs.com/player#event:exitFullWindow) | - | `@exitFullWindow` | `onExitFullWindow` |\n| [event.enterpictureinpicture](https://docs.videojs.com/player#event:enterpictureinpicture) | - | `@enterpictureinpicture` | `onEnterPictureInPicture` |\n| [event.leavepictureinpicture](https://docs.videojs.com/player#event:leavepictureinpicture) | - | `@leavepictureinpicture` | `onLeavePictureInPicture` |\n| [event.sourceset](https://docs.videojs.com/player#event:sourceset) | - | `@sourceset` | `onSourceSet` |\n| [event.texttrackchange](https://docs.videojs.com/player#event:texttrackchange) | - | `@texttrackchange` | `onTextTrackChange` |\n| [event.textdata](https://docs.videojs.com/player#event:textdata) | - | `@textdata` | `onTextData` |\n| [event.useractive](https://docs.videojs.com/player#event:useractive) | - | `@useractive` | `onUserActive` |\n| [event.userinactive](https://docs.videojs.com/player#event:userinactive) | - | `@userinactive` | `onUserInactive` |\n| [event.usingcustomcontrols](https://docs.videojs.com/player#event:usingcustomcontrols) | - | `@usingcustomcontrols` | `onUsingCustomControls` |\n| [event.usingnativecontrols](https://docs.videojs.com/player#event:usingnativecontrols) | - | `@usingnativecontrols` | `onUsingNativeControls` |\n| [event.dispose](https://docs.videojs.com/player#event:dispose) | - | `@dispose` | `onDispose` |\n| [event.beforepluginsetup](https://docs.videojs.com/player#event:beforepluginsetup) | - | `@beforepluginsetup` | `onBeforePluginSetup` |\n| [event.pluginsetup](https://docs.videojs.com/player#event:pluginsetup) | - | `@pluginsetup` | `onPluginSetup` |\n| [event.componentresize](https://docs.videojs.com/player#event:componentresize) | - | `@componentresize` | `onComponentResize` |\n| [event.playerresize](https://docs.videojs.com/player#event:playerresize) | - | `@playerresize` | `onPlayerResize` |\n| [event.tap](https://docs.videojs.com/player#event:tap) | - | `@tap` | `onTap` |\n| [event.ready](https://docs.videojs.com/player#event:ready) | - | `@ready` | `onReady` |\n\nThe events emitted by videojs-player component.\n\n| Component Event | Description | Vue | React |\n| :-------------- | :------------------------------------------------------------------------------------------------------------------------ | :----------- | :-------------- |\n| mounted | Fires when player component mounted. \u003cbr\u003e `({ video: HTMLVideoElement, player: VideoJsPlayer, state: VideoPlayerState })` | `@mounted` | `onMounted` |\n| unmounted | Fires when player component unmounted. | `@unmounted` | `onUnmounted` |\n| stateChange | Fires when player state changed (React only). `(state: VideoPlayerState)` | - | `onStateChange` |\n\n### Player State\n\nThe 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,\nyou can get this object via the `mounted` event or `stateChange` (React Only).\n\n| Key | Description | Value type |\n| :------------------- | :------------------------------------------------------------- | :--------------------------------------------------------------------------------- |\n| src | The URL of the currently playing video. | `String` |\n| currentSrc | ditto | `String` |\n| currentSource | The currently playing video source object. | [`videojs.Tech.SourceObject`](https://docs.videojs.com/tech#~SourceObject) |\n| width | Player's width. | `Number` |\n| height | Player's height. | `Number` |\n| currentWidth | ditto | `Number` |\n| currentHeight | ditto | `Number` |\n| videoWidth | Video element's width. | `Number` |\n| videoHeight | Video element's height. | `Number` |\n| controls | Whether player controls are enabled or not. | `Boolean` |\n| volume | Player's volume. | `Number` |\n| muted | Is the player muted. | `Boolean` |\n| poster | Player poster image URL. | `String` |\n| playing | Is it playing now. | `Boolean` |\n| waiting | Is it waiting now. | `Boolean` |\n| seeking | A seek operation began. | `Boolean` |\n| paused | Playback has been paused. | `Boolean` |\n| ended | Playback has stopped because the end of the media was reached. | `Boolean` |\n| currentTime | - | `Number` |\n| duration | - | `Number` |\n| playbackRate | - | `Number` |\n| playbackRates | - | `Array\u003cNumber\u003e` |\n| isFullscreen | - | `Boolean` |\n| isInPictureInPicture | Whether it is picture-in-picture mode. | `Boolean` |\n| isLive | Is the currently playing live video. | `Boolean` |\n| language | Video.js current language. | `String` |\n| userActive | - | `Boolean` |\n| readyState | - | [`videojs.ReadyState`](https://docs.videojs.com/player#readyState) |\n| networkState | - | [`videojs.NetworkState`](https://docs.videojs.com/player#networkState) |\n| error | A Custom MediaError of Video.js. | [`MediaError \\| Null`](https://docs.videojs.com/mediaerror) |\n| buffered | An object that contains ranges of time. | [`videojs.TimeRange`](https://docs.videojs.com/module-time-ranges.html#~TimeRange) |\n| bufferedPercent | - | `Number` |\n| played | - | `TimeRanges` |\n| seekable | - | `TimeRanges` |\n| textTracks | - | [`videojs.TextTrackList`](https://docs.videojs.com/texttracklist) |\n| audioTracks | - | [`videojs.AudioTrackList`](https://docs.videojs.com/audiotracklist) |\n| videoTracks | - | `videojs.VidioTrackList` |\n\n### Video.js extension\n\n```javascript\nimport videojs from 'video.js'\n\n// Video.js plugin\nconst Plugin = videojs.getPlugin('plugin')\nclass ExamplePlugin extends Plugin {\n // do something...\n}\n\nvideojs.registerPlugin('examplePlugin', ExamplePlugin)\n\n// more Video.js operation...\n```\n\n### Development\n\n```bash\npnpm install\n\npnpm dev\npnpm dev:vue\npnpm dev:react\n\npnpm build\npnpm build:vue\npnpm build:react\n\npnpm lint\npnpm test\npnpm rebirth\npnpm release\n```\n\n### Changelog\n\n- [@videojs-player/vue](./packages/vue/CHANGELOG.md)\n- [@videojs-player/react](./packages/react/CHANGELOG.md)\n- [vue-video-player](./legacy/CHANGELOG.md)\n\n### License\n\nLicensed under the [MIT](/LICENSE) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvideojs-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurmon-china%2Fvideojs-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvideojs-player/lists"}