tcplayer-plugin/README.md

基于腾讯云播放器的组件库，支持Vue2、Vue3和原生JS

# TcPlayer 播放器组件

基于腾讯云播放器的封装组件，支持Vue2、Vue3和原生JavaScript项目。

## 特性

- 支持Vue 2.x和Vue 3.x框架
- 支持原生JavaScript使用
- 自动按需加载腾讯云播放器资源
- 支持常见视频格式(mp4, flv, m3u8, webrtc等)
- 完整的TypeScript类型支持
- 支持自定义配置

## 安装

```bash
# npm
npm install tcplayer-plugin --save

# yarn
yarn add tcplayer-plugin

# pnpm
pnpm add tcplayer-plugin
```

## 使用方法

### Vue 3.x

```js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import TcPlayer from 'tcplayer-plugin'

const app = createApp(App)
app.use(TcPlayer)
app.mount('#app')
```

```vue
<!-- YourComponent.vue -->
<template>
  <div style="width: 600px; height: 400px;">
    <tc-player :config="playerConfig"></tc-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerConfig: {
        tconfig: {
          m3u8: 'https://你的视频地址.m3u8',
          autoplay: false,
          poster: 'https://你的封面图地址.jpg',
          controls: true
        },
        hearttime: 30000, // 心跳检测时间，单位毫秒
        onready(player) {
          console.log('播放器就绪', player)
        },
        onplay() {
          console.log('开始播放')
        }
      }
    }
  }
}
</script>
```

### Vue 2.x

```js
// main.js
import Vue from 'vue'
import App from './App.vue'
import TcPlayer from 'tcplayer-plugin'

Vue.use(TcPlayer)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

### 原生JavaScript

```html
<div id="player-container" style="width: 600px; height: 400px;"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/tcplayer-plugin/dist/index.umd.min.js"></script>
<script>
  // 需要先引入Vue
  const playerConfig = {
    tconfig: {
      m3u8: 'https://你的视频地址.m3u8',
      autoplay: false,
      poster: 'https://你的封面图地址.jpg'
    },
    onready: function(player) {
      console.log('播放器就绪', player);
    }
  };
  
  // 创建播放器实例
  const player = new TcPlayer.TcPlayerJS('#player-container', playerConfig);
  
  // 销毁播放器
  // player.destroy();
</script>
```

## 配置选项

### 播放器配置 (config.tconfig)

| 参数名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| m3u8 | String | - | m3u8视频地址 |
| mp4 | String | - | mp4视频地址 |
| flv | String | - | flv视频地址 |
| webrtc | String | - | webrtc视频地址 |
| autoplay | Boolean | false | 是否自动播放 |
| width | String/Number | '100%' | 播放器宽度 |
| height | String/Number | '100%' | 播放器高度 |
| controls | Boolean | true | 是否显示控制栏 |
| live | Boolean | false | 是否为直播模式 |
| poster | String | - | 视频封面图 |
| preload | String | 'auto' | 预加载方式 |
| muted | Boolean | false | 是否静音 |

### 事件回调

| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| onready | player | 播放器就绪 |
| onerror | player | 播放错误 |
| ontimeupdate | duration, currentTime, player | 播放进度更新 |
| onpause | player | 暂停播放 |
| onplay | player | 开始播放 |
| onended | player | 播放结束 |
| onnext | player | 播放下一个 |
| onpre | player | 播放上一个 |
| onwaiting | player | 视频缓冲中 |
| onsnapshoted | data, player | 截图完成 |
| onheart | player | 心跳检测 |

## 许可证

MIT