WasmVideoPlayer 开源项目使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00771/article/details/146809887

WasmVideoPlayer 开源项目使用教程

WasmVideoPlayer Play file/stream with wasm & webgl & web audio api, using ffmpeg for multi codec support, especially for h265，support http, websocket, http-flv stream. 项目地址: https://gitcode.com/gh_mirrors/wa/WasmVideoPlayer

1. 项目的目录结构及介绍

WasmVideoPlayer 项目主要包含以下目录和文件：

WasmVideoPlayer/
├── dist/                # 存放编译后的 JavaScript 和 WebAssembly 文件
├── img/                 # 存放项目图片资源
├── styles/              # 存放 CSS 样式文件
├── video/               # 存放示例视频文件
├── ws/                  # 存放 WebSocket 相关代码
├── .DS_Store            # Mac OS 系统的目录标记文件
├── LICENSE              # 项目的 GPL-3.0 许可文件
├── README.md            # 项目的自述文件
├── build_decoder.sh      # 编译 FFmpeg 解码器的 Shell 脚本
├── build_decoder_wasm.sh # 编译 WebAssembly 的 Shell 脚本
├── common.js            # 公共 JavaScript 文件
├── decoder.c            # 解码器 C 语言源文件
├── decoder.js           # 解码器 JavaScript 封装文件
├── downloader.js        # 下载器 JavaScript 文件
├── index.html           # 项目的主页 HTML 文件
├── libffmpeg.js          # FFmpeg 的 JavaScript 封装文件
├── libffmpeg.wasm        # FFmpeg 编译后的 WebAssembly 文件
├── pcm-player.js        # PCM 播放器 JavaScript 文件
├── player.js            # 播放器 JavaScript 文件
└── webgl.js             # WebGL 渲染 JavaScript 文件

主要目录和文件说明：

dist/：存放编译后的 JavaScript 和 WebAssembly 文件，这些是项目运行时所需的文件。
img/：存放项目所需的图片资源。
styles/：存放 CSS 样式文件，用于定义项目页面的样式。
video/：存放示例视频文件，用于演示播放器功能。
ws/：存放 WebSocket 相关代码，用于实现网络通信。
common.js：公共 JavaScript 文件，用于存放项目共用的代码。
decoder.c 和 decoder.js：解码器相关的 C 语言和 JavaScript 文件，用于实现视频解码功能。
downloader.js：下载器 JavaScript 文件，用于下载视频文件。
index.html：项目的主页 HTML 文件，用户通过这个文件访问和操作播放器。
libffmpeg.js 和 libffmpeg.wasm：FFmpeg 的 JavaScript 封装文件和编译后的 WebAssembly 文件，用于实现视频解码功能。
pcm-player.js：PCM 播放器 JavaScript 文件，用于播放解码后的音频数据。
player.js：播放器 JavaScript 文件，用于控制播放器的基本功能。
webgl.js：WebGL 渲染 JavaScript 文件，用于实现视频的渲染。

2. 项目的启动文件介绍

项目的启动文件是 index.html，这是用户访问和操作播放器的主要界面。以下是 index.html 文件的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WasmVideoPlayer</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div id="player-container"></div>
    <script src="dist/player.js"></script>
    <script src="dist/libffmpeg.js"></script>
    <script src="dist/libffmpeg.wasm"></script>
    <script>
        // 初始化播放器并加载视频
        var player = new Player('player-container', 'path/to/video.mp4');
        player.play();
    </script>
</body>
</html>

在这个文件中，我们通过 <script> 标签引入了编译后的 JavaScript 文件，并在页面加载完成后初始化播放器。player-container 是播放器渲染视频的容器。