JSMPEG 教程：搭建与使用指南

1. 项目目录结构及介绍

JSMPEG 是一个JavaScript编写的MPEG-1视频和音频解码器，用于在浏览器中播放MPEG流或WebSocket传输的数据。以下是项目的基本目录结构：

.
├── src                    # 源代码目录
│   ├── jsmpeg.js          # 主体库文件
│   └── ...                # 其他相关源文件
├── demo                   # 示例和演示代码
│   ├── index.html         # HTML示例页面
│   └── ...                # 其他示例资源
├── build.sh               # 构建脚本
└── ...                    # 其他项目文件（如许可证、README等）

• src 目录包含了所有核心组件的源代码，包括解复用器、解码器、渲染器和WebAudio输出。
• demo 目录提供了简单的HTML页面来展示JSMPEG的功能。
• build.sh 是一个构建脚本，用于编译源代码并生成min.js文件。

2. 项目的启动文件介绍

JSMPEG 的主要使用方式是通过引入压缩后的jsmpeg.min.js库文件。例如，在HTML中加入以下代码：

<script src="jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="video.ts"></div>

这里的<script>标签引入了JSMPEG库，而.jsmpeg元素则是播放器的容器，通过data-url属性指定要播放的视频文件路径或WebSocket服务器地址。

若需在JavaScript中创建JSMpeg Player实例，可以这样操作：

var player = new JSMpeg.Player('video.ts', { /* 配置选项 */ });

3. 项目的配置文件介绍

JSMPEG 并没有特定的配置文件，但可以通过构造函数的第二个参数传递配置对象。常见的配置项有：

• canvas: 指定要使用的HTML Canvas元素以进行视频渲染。
• autoPlay: 是否自动播放，默认为false。
• loop: 是否循环播放，默认为false。

例如，创建一个自动播放并循环的播放器：

var player = new JSMpeg.Player('video.ts', {
  canvas: document.getElementById('myCanvas'),
  autoPlay: true,
  loop: true
});

更多信息可以查看官方文档：https://phoboslab.org/log/2015/04/jsmpeg-decode-mpeg-video-in-your-browser

这个简单的教程应该帮助你开始使用JSMPEG库。更多复杂的用法，如自定义解码器、渲染器等，建议参考源代码和官方文档。