先说结论:
视频播放,前端使用videojs框架,后端需要支持HTTP Header Range,也就是范围请求。
再说因由:
要做视频播放,开始以为很简单,直接输出byte[],再配合<video>就行,结果发现,播放没问题,但没法拖动进度。
当时的思路是:可以获取进度,每次重新获取相应的数据返回,但没有尝试。
又搜了一下,发现国内外都有人在问为什么不支持seekable,但几乎没人回答,或者说回答正确。
接着同事又反馈样式太难看 - 原生的<video>样式是够难看的。
于是找到了 videojs,试了下,很给力。
OK,样式没问题了,继续解决进度拖动的问题。
还是在试用 videojs的时候(.html+.mp4,无服务器),发现可以拖动进度,而且非常完美,非常不解。
F12一看,请求中带有Range,响应码是206,恍然大悟,倒是跟自己的思路不谋而合。
继续搜索Range和206,原来是断点续传用的功能,没想到还可以支持视频的进度拖动。
OK,原理上,至此已经没有问题,剩下来就是动手环节。
就不赘述了,反正完美解决。
补充:
大概看了一下,正规的视频播放网站应该需要视频切片,然后为客户端提供切片(还可能涉及到加解密),这样别人无法下载整个视频。
不过我做的就是个小功能,不需要那么麻烦啦。