• 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>

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

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