176 lines
4.1 KiB
Markdown
176 lines
4.1 KiB
Markdown
# 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
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>ZAPlayer 示例</title>
|
||
</head>
|
||
<body>
|
||
<!-- 视频容器 -->
|
||
<div id="videoContainer" style="width: 800px; height: 450px;"></div>
|
||
|
||
<!-- 引入ZAPlayer类库（浏览器版本）-->
|
||
<script src="dist/za-player.min.js"></script>
|
||
|
||
<script>
|
||
// 创建播放器实例
|
||
var player = new ZAPlayer('#videoContainer', {
|
||
type: 'flv', // 或 'hls'
|
||
src: 'your-video-url.flv'
|
||
});
|
||
|
||
// 控制播放器
|
||
player.player.play();
|
||
player.player.pause();
|
||
player.player.stop();
|
||
player.player.load('new-video-url.flv');
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 方法2：使用ES模块
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>ZAPlayer ES模块示例</title>
|
||
</head>
|
||
<body>
|
||
<div id="videoContainer" style="width: 800px; height: 450px;"></div>
|
||
|
||
<script type="module">
|
||
import ZAPlayer from './dist/za-player.es.js';
|
||
|
||
const player = new ZAPlayer('#videoContainer', {
|
||
type: 'hls',
|
||
src: 'your-video-url.m3u8'
|
||
});
|
||
|
||
// 控制播放器
|
||
player.player.play();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 方法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项目和打包工具 |