# ZAPlayer 使用说明
ZAPlayer是一个支持HLS(M3U8)和FLV格式的视频播放器类库。
## 快速开始
### 方法1：直接引用构建好的类库文件
1. 首先构建类库文件：
```bash
npm run build:min
```
2. 构建完成后，会在 `dist/` 目录下生成两个文件：
- `za-player.min.js` - 压缩后的UMD格式，适合浏览器直接使用
- `za-player.es.js` - ES模块格式，适合现代JavaScript项目
3. 在HTML文件中引用（浏览器使用）：
```html
ZAPlayer 示例
```
### 方法2：使用ES模块
```html
ZAPlayer ES模块示例
```
### 方法3：在Node.js或现代前端项目中使用ES模块
```javascript
// 使用ES模块导入
import ZAPlayer from './dist/za-player.es.js';
// 创建播放器
const player = new ZAPlayer('#container', {
type: 'flv',
src: 'video.flv'
});
player.player.play();
```
### 方法4：动态加载（浏览器版本）
```javascript
// 动态加载ZAPlayer类库
function loadZAPlayer(callback) {
const script = document.createElement('script');
script.src = 'dist/za-player.min.js'; // 使用压缩版本
script.onload = callback;
document.head.appendChild(script);
}
// 使用动态加载的类库
loadZAPlayer(function() {
const player = new ZAPlayer('#videoContainer', {
type: 'flv',
src: 'your-video-url.flv'
});
player.player.play();
});
```
## API 说明
### 构造函数
```javascript
new ZAPlayer(container, options)
```
**参数：**
- `container` (string|Element): 视频容器的选择器字符串或DOM元素
- `options` (object): 配置选项
- `type` (string): 视频类型，'hls' 或 'flv'，默认为 'hls'
- `src` (string, 可选): 视频地址，可以在创建后通过load方法加载
**返回值：**
- 返回一个对象，包含player属性，player对象有以下方法：
- `play()`: 播放视频
- `pause()`: 暂停视频
- `stop()`: 停止视频
- `load(url)`: 加载新的视频地址
## 示例视频地址
### FLV格式
```javascript
// 示例FLV地址
player.player.load('http://192.168.1.200:10037/live/PUGE0hFBYluVe_01.flv');
```
### HLS(M3U8)格式
```javascript
// 示例HLS地址
player.player.load('http://192.168.1.201:9080/DS-2CD5026FWD20180811AACH220809006/0000000B/hls.m3u8');
```
## 浏览器兼容性
- 支持现代浏览器的Media Source Extensions (MSE)
- 支持WebCodecs API（用于高级解码）
- 支持Fetch API
## 注意事项
1. 确保视频地址支持跨域访问（CORS）
2. 对于直播流，确保服务器支持持续的数据传输
3. 某些浏览器可能需要HTTPS协议才能正常工作
## 构建说明
```bash
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建演示页面
npm run build
# 构建类库文件（同时生成两个文件）
npm run build:min
```
构建完成后，类库文件会在`dist/`目录下生成：
- `za-player.min.js` - 压缩后的UMD格式类库文件，适合浏览器直接使用
- `za-player.es.js` - ES模块格式，适合现代JavaScript项目和打包工具