# @neosjs/videojs-player

> Neosjs Videojs Player

Latest version **2.1.5** (published 2023-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @neosjs/videojs-player
pnpm add @neosjs/videojs-player
yarn add @neosjs/videojs-player
bun add @neosjs/videojs-player
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.5 |
| Published | 2023-05-31 |
| First published | 2022-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 424 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | bobo.xiao |
| Keywords | Neos Player, neosjs player, vue video player, video player, vue player, videojs player |

## Links

- npm: https://www.npmjs.com/package/@neosjs/videojs-player
- npm.io page: https://npm.io/package/@neosjs/videojs-player

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.1.5 (latest) — 2023-05-31
- 2.1.4 — 2023-05-30
- 2.1.3 — 2023-05-30
- 2.1.2 — 2023-05-28
- 2.1.1 — 2023-05-28
- 2.1.0 — 2023-05-28
- 2.0.1 — 2023-05-15
- 2.0.0 — 2023-05-15
- 1.2.1 — 2023-05-12
- 1.1.1 — 2023-05-10
- 1.1.0 — 2023-05-09
- 1.0.2 — 2022-10-24
- 1.0.1 — 2022-10-24
- 1.0.0 — 2022-10-23

## README

# @neosjs/videojs-player

Vue Videojs 播放器

## 示例

```vue
<NeosPlayer
id="VideoPlayer"
:class="['neosjs-player']"
:sources="sources"
:poster="poster"
v-model:volume="1"
v-model:muted="false"
:playbackRates="[0.5, 1, 1.5, 2, 2.5, 3]"
@ready="handlePlayerReady"
@dispose="handlePlayerDispose"
@mounted="handleMounted"
@unmounted="handleUnmounted"
@play="handleEvent($event)"
@pause="handleEvent($event)"
@ended="handleEvent($event)"
@loadeddata="handleEvent($event)"
@waiting="handleEvent($event)"
@playing="handleEvent($event)"
@canplay="handleEvent($event)"
@canplaythrough="handleEvent($event)"
@timeupdate="handleTimeupdateEvent(player?.currentTime())"
>    
</NeosPlayer>
```

```ts
const sources =  [
    // mp4格式
    { src: 'https://xxxxxxx.mp4', type: 'video/mp4' },
    // m3u8格式
    {
      src: 'https:/xxxxxxxx.m3u8',
      type: 'application/x-mpegurl'
    },
    // 音频
    {
      src: 'https:/xxxxxxxx.mp3',
      type: 'audio/mp3'
    }
]

const handleMounted = (payload: any) => {
    console.log('----播放器挂载完成', payload)
    state.value = payload.state // 播放器状态
    player.value = payload.player // 播放器实例
  }

  const handleUnmounted = () => {
    console.log('---播放器卸载')
  }

  const handlePlayerReady = (event: any) => {
    // player.value.currentTime(11) // 设置当前播放时长
    // player.value.poster('xxxxxxx') // 设置封面图
    console.log('---播放器准备完成', event)
  }

  const handlePlayerDispose = (event: any) => {
    console.log('---清除播放器', event)
  }
  const handleEvent = (event: any) => {
    console.log('---执行事件', event)
  }
  const handleTimeupdateEvent = (time?: number) => {
    console.log(`播放时长：${time}`)
  }
```

---
_Source: https://npm.io/package/@neosjs/videojs-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._