qianpou/ZAPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
ZAPlayer是一个支持HLS(M3U8)和FLV格式的视频播放器类库。
2 Commits 1 Branch 1 Tag 52 KiB
JavaScript 77.9%
HTML 16.8%
CSS 5.3%
53c5bdd28e
Go to file
陈乾 53c5bdd28e 初始提交
2026-01-30 11:24:39 +08:00
public 初始提交 2026-01-30 11:24:39 +08:00
src 初始提交 2026-01-30 11:24:39 +08:00
.gitignore 初始提交 2026-01-30 11:24:39 +08:00
BUILD_TROUBLESHOOTING.md 初始提交 2026-01-30 11:24:39 +08:00
index.html 初始提交 2026-01-30 11:24:39 +08:00
install-deps.js 初始提交 2026-01-30 11:24:39 +08:00
LICENSE Initial commit 2026-01-30 11:21:17 +08:00
package-lock.json 初始提交 2026-01-30 11:24:39 +08:00
package.json 初始提交 2026-01-30 11:24:39 +08:00
README.md 初始提交 2026-01-30 11:24:39 +08:00
test-build.html 初始提交 2026-01-30 11:24:39 +08:00
USAGE.md 初始提交 2026-01-30 11:24:39 +08:00
vite.config.js 初始提交 2026-01-30 11:24:39 +08:00
vite.lib.config.js 初始提交 2026-01-30 11:24:39 +08:00
vite.lib.simple.config.js 初始提交 2026-01-30 11:24:39 +08:00

README.md

ZAPlayer 使用说明

ZAPlayer是一个支持HLS(M3U8)和FLV格式的视频播放器类库。

快速开始

方法1：直接引用构建好的类库文件

  1. 首先构建类库文件：
npm run build:min

  1. 构建完成后，会在 dist/ 目录下生成两个文件：

    • za-player.min.js - 压缩后的UMD格式，适合浏览器直接使用
    • za-player.es.js - ES模块格式，适合现代JavaScript项目

  2. 在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模块

<!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模块

// 使用ES模块导入
import ZAPlayer from './dist/za-player.es.js';

// 创建播放器
const player = new ZAPlayer('#container', {
    type: 'flv',
    src: 'video.flv'
});

player.player.play();

方法4：动态加载（浏览器版本）

// 动态加载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 说明

构造函数

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格式

// 示例FLV地址
player.player.load('http://192.168.1.200:10037/live/PUGE0hFBYluVe_01.flv');

HLS(M3U8)格式

// 示例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协议才能正常工作

构建说明

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建演示页面
npm run build

# 构建类库文件（同时生成两个文件）
npm run build:min

构建完成后，类库文件会在dist/目录下生成：

  • za-player.min.js - 压缩后的UMD格式类库文件，适合浏览器直接使用
  • za-player.es.js - ES模块格式，适合现代JavaScript项目和打包工具