• Video.js 版本：7.10.2
• 弹幕库：https://github.com/weizhenye/Danmaku，2.0.2 版本

因为实现方式比较不规范，会深入 Video.js 内部 dom 进行操作，不确定是否适用其它版本。

全屏弹幕

我使用 vjs 的姿势是这样的：

1
2
3

<div id="danmaku-container" ref={danmakuContainerRef} divdata-vjs-player>
    <video ref={videoRef} className="video-js vjs-big-play-centered" />
</div>

1. 多页面用不到 create-react-app，项目结构需要手动配置。
2. Jsx 不能带到生产环境去，会导致每次加载 js 文件时都要做语法转换，所以需要用 babel 预处理。

项目根目录下，创建 package.json：

1

npm init -y

把 html 文件放在 src 目录下，js 文件放在 src/js 目录下。html 中引入对应的 js：

1

<script src="/js/index.js"></script>

不要加 type=”text/babel”，路径其实对应的是预处理后的、被转换的 js 文件。

https://reactjs.org/docs/add-react-to-a-website.html

Html5 的 <video /> 只能在整个视频文件加载完成后才能播放，体验极其不好。如果仅是支持基于 Http(s) 的流媒体播放的话，可以直接利用 Http 协议的 Content-Range 头。

所以本文的核心思想是使 Sanic 后端能正确处理 Videojs 发送的 byte-range 请求，并回以带 Content-Range 的文件流响应即可。

简单横向比较了 Sanic、Flask、FastAPI 之后，决定以后还是优先学 Sanic 吧。

Sanic 在同类评测里名列前茅。异步架构有先天的性能优势，Flask 甚至才认识到这点，好像又显得不那么重视。最新发布的 2.x 版本里的异步支持形同鸡肋，不支持 ASGI，不支持后台任务，Websocket 也同样不能支持。