HTML5Media 教程

1. 项目目录结构及介绍

html5media 的目录结构如下：

html5media/
├── dist/            # 包含编译后的主JavaScript库
│   └── html5media.min.js
└── src/              # 源代码目录
    ├── html5media.js
    └── ...
├── .gitignore       # Git 忽略文件列表
├── .npmignore       # npm 忽略文件列表
├── BUILDING.md      # 构建指南
├── CHANGELOG.md     # 更新日志
├── LICENSE          # 开源许可证文件
├── README.md        # 项目简介
└── gulpfile.js      # Gulp 构建脚本
└── package.json     # npm 包管理文件

• dist/: 存放压缩和优化过的 html5media.min.js 文件，可以直接在网页中使用。
• src/: 包含所有源代码，包括主要的 html5media.js 文件。
• .gitignore 和 .npmignore: 分别指定了在Git和npm发布时要忽略的文件或目录。
• BUILDING.md: 提供构建项目所需的说明。
• CHANGELOG.md: 记录项目每次更新的内容。
• LICENSE: 项目使用的开源许可证（此处为GPL-3.0）。
• README.md: 项目简介和基本用法。
• gulpfile.js: 使用Gulp进行自动化任务（如编译和打包）的配置文件。
• package.json: npm包元数据，用于依赖管理和运行脚本。

2. 项目的启动文件介绍

项目的核心启动文件是位于 src/html5media.js 中的。它包含了使<video> 和 <audio> 标签在所有主流浏览器中正常工作的核心逻辑。当引入这个文件到HTML页面中时，它将自动处理不支持HTML5媒体标签的浏览器，启用跨浏览器的MediaElement.js播放器。

在你的HTML页面中，通过如下方式引入 html5media.min.js 文件：

<script src="path/to/html5media.min.js"></script>

引入此脚本后，无需任何额外设置，<video> 和 <audio> 标签应该能在所有支持的浏览器中工作。

3. 项目的配置文件介绍

html5media 并没有传统的配置文件。它的功能由源代码中的默认行为实现，旨在提供即插即用的体验。然而，如果你想自定义一些参数或者扩展其功能，可以在你的项目中创建一个配置对象，并在初始化 html5media 之前传递给它：

var config = {
  enableFlash: false, // 是否开启Flash后备支持，默认为true
  flashFile: 'custom_flash.swf' // 自定义Flash播放器文件路径，默认为MediaElement.js自带的
};

// 初始化html5media
html5media(config);

请注意，以上配置方法并不是 html5media 内置的功能，而是假设的扩展方式。实际上，你需要查看 html5media.js 或者MediaElement.js的文档以获取详细的API和定制选项。

总结，html5media 是一个轻量级的解决方案，旨在使HTML5的音频和视频标签在所有浏览器上都能工作，而不需要复杂的设置或安装额外服务器文件。只需要简单地引入JavaScript库，即可享受到一致的多媒体播放体验。