open-index/open-npm huggingface dataset:
npm package: @mobile-canvas-video-player/core
Description: Mobile Canvas Video Player Core Library
Latest version: 1.1.4

# @mobile-canvas-video-player/core

基于 Canvas 的移动端视频播放器核心库，支持 HLS 流媒体播放。用于解决移动端浏览器视频播放厂商自定义控制器的问题。

## 安装

```bash
npm install @mobile-canvas-video-player/core
# 或
pnpm add @mobile-canvas-video-player/core
# 或
yarn add @mobile-canvas-video-player/core
```

## 基础用法

```typescript
import { VideoPlayer } from '@mobile-canvas-video-player/core'

const canvas = document.getElementById('canvas') as HTMLCanvasElement
const player = new VideoPlayer({
  loop: false,
  preload: 'auto'
})

player.init(canvas, 'https://example.com/video.m3u8')

// 播放控制
player.play()
player.pause()
player.seek(10) // 跳转到 10 秒

// 音量控制
player.mute()
player.unmute()
player.setVolume(0.5)

// 事件监听
player.on('play', () => console.log('播放'))
player.on('pause', () => console.log('暂停'))
player.on('timeupdate', () => {
  console.log('当前时间:', player.state.currentTime)
})
```

## API

### 配置选项

| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| loop | boolean | false | 循环播放 |
| preload | string | 'auto' | 预加载策略 |

### 方法

- `init(canvas, src)` - 初始化播放器
- `play()` - 播放
- `pause()` - 暂停
- `seek(time)` - 跳转到指定时间
- `mute()` - 静音
- `unmute()` - 取消静音
- `setVolume(volume)` - 设置音量 (0-1)

### 事件

- `play` - 开始播放
- `pause` - 暂停
- `timeupdate` - 时间更新
- `ended` - 播放结束
- `canplay` - 可以播放
- `error` - 播放错误

## 源码仓库

[GitHub - mobile-canvas-video-player](https://github.com/EarhartZhao/mobile-canvas-video-player)

## License

MIT
npm package: @mobile-canvas-video-player/react
Description: Mobile Canvas Video Player React Component
Latest version: 1.1.4

# @mobile-canvas-video-player/react

基于 Canvas 的移动端视频播放器 React 组件。用于解决移动端浏览器视频播放厂商自定义控制器的问题。

## 安装

```bash
npm install @mobile-canvas-video-player/react
# 或
pnpm add @mobile-canvas-video-player/react
# 或
yarn add @mobile-canvas-video-player/react
```

## 基础用法

```jsx
import { useRef } from 'react'
import { MobileVideoPlayer } from '@mobile-canvas-video-player/react'
import '@mobile-canvas-video-player/react/style.css'

function App() {
  const playerRef = useRef(null)

  return (
    <MobileVideoPlayer
      ref={playerRef}
      src="https://example.com/video.m3u8"
      width={375}
      height={375}
      loop={false}
      controls={{
        playPause: true,
        mute: true,
        fullscreen: true,
        progressBar: true,
        timeDisplay: true
      }}
      onPlay={() => console.log('播放')}
      onPause={() => console.log('暂停')}
      onCanPlay={() => playerRef.current?.play()}
    />
  )
}
```

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| src | string | - | 视频源（支持 HLS） |
| width | number | 375 | Canvas 宽度 |
| height | number | 375 | Canvas 高度 |
| loop | boolean | false | 循环播放 |
| controls | object | 全部启用 | 控制条配置 |

### Controls 配置

```js
{
  playPause: true,    // 播放/暂停按钮
  mute: true,         // 静音按钮
  fullscreen: true,   // 全屏按钮
  progressBar: true,  // 进度条
  timeDisplay: true   // 时间显示
}
```

## 事件

- `onPlay` - 开始播放
- `onPause` - 暂停
- `onTimeUpdate` - 时间更新
- `onEnded` - 播放结束
- `onCanPlay` - 可以播放
- `onError` - 播放错误

## Ref 方法

```jsx
playerRef.current.play()
playerRef.current.pause()
playerRef.current.seek(10)
playerRef.current.mute()
playerRef.current.unmute()
```

## 源码仓库

[GitHub - mobile-canvas-video-player](https://github.com/EarhartZhao/mobile-canvas-video-player)

## License

MIT
npm package: @mobile-canvas-video-player/vue
Description: Mobile Canvas Video Player Vue Component
Latest version: 1.1.4

# @mobile-canvas-video-player/vue

基于 Canvas 的移动端视频播放器 Vue 3 组件。用于解决移动端浏览器视频播放厂商自定义控制器的问题。

## 安装

```bash
npm install @mobile-canvas-video-player/vue
# 或
pnpm add @mobile-canvas-video-player/vue
# 或
yarn add @mobile-canvas-video-player/vue
```

## 基础用法

```vue
<template>
  <MobileVideoPlayer
    ref="playerRef"
    :src="videoSrc"
    :width="375"
    :height="375"
    :loop="false"
    :controls="{
      playPause: true,
      mute: true,
      fullscreen: true,
      progressBar: true,
      timeDisplay: true
    }"
    @play="onPlay"
    @pause="onPause"
    @canplay="onCanPlay"
  />
</template>

<script setup>
import { ref } from 'vue'
import { MobileVideoPlayer } from '@mobile-canvas-video-player/vue'
import '@mobile-canvas-video-player/vue/style.css'

const playerRef = ref(null)
const videoSrc = 'https://example.com/video.m3u8'

const onPlay = () => console.log('播放')
const onPause = () => console.log('暂停')
const onCanPlay = () => playerRef.value?.play()
</script>
```

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| src | string | - | 视频源（支持 HLS） |
| width | number | 375 | Canvas 宽度 |
| height | number | 375 | Canvas 高度 |
| loop | boolean | false | 循环播放 |
| controls | object | 全部启用 | 控制条配置 |

### Controls 配置

```js
{
  playPause: true,    // 播放/暂停按钮
  mute: true,         // 静音按钮
  fullscreen: true,   // 全屏按钮
  progressBar: true,  // 进度条
  timeDisplay: true   // 时间显示
}
```

## 事件

- `@play` - 开始播放
- `@pause` - 暂停
- `@timeupdate` - 时间更新
- `@ended` - 播放结束
- `@canplay` - 可以播放
- `@error` - 播放错误

## Ref 方法

```js
playerRef.value.play()
playerRef.value.pause()
playerRef.value.seek(10)
playerRef.value.mute()
playerRef.value.unmute()
```

## 源码仓库

[GitHub - mobile-canvas-video-player](https://github.com/EarhartZhao/mobile-canvas-video-player)

## License

MIT