最近想做一个android+h5视频播放站，主要问题是流量和带宽，首先想到的解决方法是直接将p2p下载模块做到客户端，这样不用走服务器流量。但是没有找到相关技术，只发现了一个web端的 webtorrent
然后想到了...“借用”其他站的视频。打开目标站点，f12找到视频对应的video标签，发现并不是想象中的xxx.mp4，而是这样开头的一个地址
src="blob:https://www.xxx.com/023603e2-0d9f-4398-ba53-027b242f520b"
这明显是加密了视频的真实地址，先不管这个奇怪的东西，有兴趣的同学可以搜一下blob:http
然后尝试在Network查找地址，随着视频播放，发现这样几条信息：
https://xxx.com/x/y/z/xyz/hls-360p0.ts?e=12345&h=d56591aa6ccc48c0
https://xxx.com/x/y/z/xyz/hls-360p1.ts?e=23456&h=6ccc48c0d56591aa
https://xxx.com/x/y/z/xyz/hls-360p2.ts?e=76431&h=aa6cccd5659148c0
...
在新标签页中打开地址，自动下载了一个后缀名为ts的视频文件，时长为10s
所有文件拼起来就是完整的原视频。
经过搜索，知道了这个视频体系是遵循HLS协议，将完整视频切分成一个个小碎片，按需传给用户。
虽然我们是借用视频，不需要自己上传到服务器切分，但是要熟悉下这个流程：
切分视频需要用到一个叫ffmpeg的工具，安装过程我就不复制了，简单说下切分过程
1，将mp4转换为ts：
ffmpeg -i out.mp4 -c copy -bsf h264_mp4toannexb output.ts
2，将ts切分：
ffmpeg -i output.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 10 output%03d.ts
这样就得到一大堆.ts文件和一个.m3u8文件
打开.m3u8文件，发现它是一个播放索引列表
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:15
#EXTINF:14.472789,
output000.ts
#EXTINF:10.427078,
output001.ts
#EXTINF:10.427078,
output002.ts
...
...
#EXTINF:10.427078,
output017.ts
#EXTINF:8.883867,
output018.ts
#EXT-X-ENDLIST
其实最开始vedio标签中blob:https:所隐藏的就是这个m3u8文件
通过分析，我找到了他的m3u8文件地址：
https://xxx.com/x/y/z/xyz/hls.m3u8?e=92345&h=5659d1accc48c0a6
所以我们将自己站点中video标签的src地址替换成这个就可以.....是不可能的
有首歌唱得好
没~那么简单
第一个坎是我一直在胡编的后缀参数e=92345&h=5659d1accc48c0a6
e是当前时间戳，h是md5加密的字符串，这个破解不了以我的爬虫水平就无法批量“借用”视频，只能手动找m3u8文件了
打开m3u8文件，发现指向的是另外几个m3u8文件
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=423936,RESOLUTION=640x360,NAME="360p"
hls-360p.m3u8?e=92345&h=5659d1accc48c0a6
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=155648,RESOLUTION=444x250,NAME="250p"
hls-720p.m3u8?e=92345&h=5659d1accc48c0a6
因为用的是相对路径，如果自己的站也要分清晰度的话，还要再改二级m3u8文件的内容
注意这里也有个坑，不能用https
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=423936,RESOLUTION=640x360,NAME="360p"
http://xxx.com/x/y/z/xyz/hls-360p.m3u8?e=92345&h=5659d1accc48c0a6
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=155648,RESOLUTION=444x250,NAME="250p"
http://xxx.com/x/y/z/xyz/hls-720p.m3u8?e=92345&h=5659d1accc48c0a6
因为用的是android+h5，现在打开客户端就可以看了。这是因为移动端ios和android都支持HLS协议，可以直接播放。
pc端只有safari支持(毕竟人家自己家的协议嘛)，如果要在其他web端看视频，需要安装插件完善h5的播放器，这里提供两种解决办法
1，videojs（<video>）
2，ckplayer（flash）
最后给一个拼合ts文件的bat脚本：
以(hls-720p0.ts~hls-720p31.ts)为例：
@echo off
cd.>new.ts
for /l %%i in (0 1 31) do (
copy /b new.ts+hls-720p%%i.ts=new.ts
)
pause
网友评论