近期小结

先说结论

视频播放,前端使用videojs框架,后端需要支持HTTP Header Range,也就是范围请求。

再说因由

要做视频播放,开始以为很简单,直接输出byte[],再配合<video>就行,结果发现,播放没问题,但没法拖动进度。

当时的思路是:可以获取进度,每次重新获取相应的数据返回,但没有尝试。

又搜了一下,发现国内外都有人在问为什么不支持seekable,但几乎没人回答,或者说回答正确。

接着同事又反馈样式太难看 - 原生的<video>样式是够难看的。

于是找到了 videojs,试了下,很给力。

OK,样式没问题了,继续解决进度拖动的问题。

还是在试用 videojs的时候(.html+.mp4,无服务器),发现可以拖动进度,而且非常完美,非常不解。

F12一看,请求中带有Range,响应码是206,恍然大悟,倒是跟自己的思路不谋而合。

继续搜索Range和206,原来是断点续传用的功能,没想到还可以支持视频的进度拖动。

OK,原理上,至此已经没有问题,剩下来就是动手环节。

就不赘述了,反正完美解决。

补充

大概看了一下,正规的视频播放网站应该需要视频切片,然后为客户端提供切片(还可能涉及到加解密),这样别人无法下载整个视频。

不过我做的就是个小功能,不需要那么麻烦啦。

猜你喜欢

转载自www.cnblogs.com/larryzeal/p/9139819.html