如何打造一个支持多段视频无缝播放的 html5 播放器

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2700 天前的主题，其中的信息可能已经有所发展或是发生改变。

在帮一个美国朋友写一个 html5 播放器，但是有个对于我来说挺狗血的要求。

假设他现在有一个视频：1234.mp4

不知为何原因它要将此视频分割成两段:1234-1.mp4和1234-2.mp4，然后才上传这两段视频到服务器，用户访问的时候就读取这两个视频

html5 播放器的要求:

将 1234-1.mp4 与 1234-2.mp4 合并起来（或者是伪合并的衔接）

我印象中曾经不知道是搜狐还是新浪就用过这种方法，一个视频分段出 N 个小视频，用户访问时通过播放器来处理，但是在 ios 网页播放的时候就出现了进度条只有 30 秒（也就是分段处理的那 N 个小视频的长度）无法拖动访问后面内容的情况求各位 V 友支支招

视频

html5

播放器

分段

12 条回复 • 2017-06-25 12:19:09 +08:00

nolo

2017-06-24 20:58:17 +08:00

楼主可以了解一下 ts 流媒体格式

bozong

2017-06-24 21:04:34 +08:00

xiaome

2017-06-24 21:07:54 +08:00

hls 可以达到你的需求，下面是一个实现方案
https://github.com/video-dev/hls.js

McContax

2017-06-24 23:25:34 +08:00

@xiaome
https://github.com/video-dev/hls.js 这个比较符合我的构思，但是问题是不支持 IOS，也是麻烦啊，不过不可否认在 PC 端的确是很好用的.

uuair

2017-06-24 23:28:57 +08:00

说个技术以外的话，这个不就是 porn 系列网站的存储方法么？

uleh

2017-06-24 23:52:22 +08:00

这不就是现在主流的流播方案么。。
可以看下 m3u8 或者苹果的 HLS 方案。
客户端的话我记得好像有个叫 dash.js 的。

mxalbert1996

2017-06-25 03:07:21 +08:00 via Android

https://github.com/Bilibili/flv.js/
这个？

LosLord

2017-06-25 03:32:27 +08:00 via Android

ios 不是原生支持 hls 那

USCONAN

2017-06-25 03:56:22 +08:00

DASH
Dynamic Adaptive Streaming over HTTP
目前最佳全能方案

xiaome

2017-06-25 06:27:07 +08:00

@McContax #4 HTTP Live Streaming （ HLS ）就是苹果的技术，你说不支持 ios???
https://developer.apple.com/streaming/

facetest

2017-06-25 08:48:00 +08:00 via Android

自己控制不就好了，播完一个片段接着播下一个，记得提前缓冲就行

n37r06u3

2017-06-25 12:19:09 +08:00

服务器用哪个可以上传视频的