最近我的视频播放浅学总结

因为想做一个类似苹果的同播共享功能，这一段时间对音视频做了一些浅浅的学习，现简单总结记录。

我的需求是找到一个尽可能简单的方案来两人播放一段视频，并且能够进度和操作同步，所以基本不能有延迟，同时能够显示WebVTT字幕，最好不需要额外的服务器。

视频流方案

前端视频流主要是用的是hls.js，flv.js和dash.js，我最后使用了hls.js。

hls.js

hls.js多用于做在线视频播放，原理就是将大视频切片，分成几秒一个的小片段，这样只需要不停加载小片段就可以完整播放视频了。

使用ffmpeg来生成视频

ffmpeg -i video.mkv -b:v:0 12M -c:v h264_videotoolbox -c:s webvtt -c:a mp3 -map 0:v -map 0:a:0 -map 0:s:34 -f hls -var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh" -master_pl_name master.m3u8 -hls_time 6 -hls_playlist_type vod -muxdelay 0 video.m3u8 

• -b:v:0 12M 12M码率
• h264_videotoolbox是mac的硬解码，目前浏览器h264还是主流，虽然最近也支持hevc了
• -map 0:s:34取第34个字幕转成webvtt格式
• -var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh"分组
• -hls_time 6切片6秒
• -muxdelay 0解决字幕不同步问题。

最后加载master.m3u8就可以播放了。

flv.js

flv.js是bilibili开源的，可以用来做视频直播，使用RTMP推流，但是bilibili不用这个。

使用ffmpeg推流

ffmpeg -re -i video.mkv -c:v h264_videotoolbox -f flv rtmp://localhost/live/livestream 

先将视频推到流媒体服务器，在从流媒体服务器读取视频。

rtmp://localhost/live/livestream是对应的流媒体服务器，简单可用Node-Media-Server，复杂一点用srs，这个可以将RTMP流转成WebRTC流。

dash.js

dash.js也是将视频切片，可以直播也可以点播，很多大厂都用这个，比如bilibili。

WebRTC

WebRTC同样可以做视频播放，但是清晰度是由浏览器控制的，WebRTC是点对点的，虽说不需要服务器，但是需要一个信令服务器来交换信息，相当于是创建了房间号，另一个人加入房间，那这个房间号还是需要一个服务器来传递的。

我找到免费的方案就是用peer.js。

我的思考

最初我考虑的是浏览器直接加载本地视频，通过WebRTC传输给对方，字幕也可以通过WebRTC传输，这样没有任何额外操作，而且WebRTC延迟够低。

但是我没有考虑到的一点问题是我下的视频基本都是HEVC HDR，所以需要转码，字幕也要转WebVTT。但是转码需要时间，浏览器可以跑Wasm，并且有个项目叫ffmpeg.wasm，如果用浏览器解码hevc的话也行，结果几百Mb的视频就在报错了，根本解不了。

既然浏览器不能解码，那我就本地解码推流RTMP浏览器用flv.js来播放，再把视频流从浏览器通过WebRTC传输，但是flv.js的video标签居然没有captureStream方法，不能把视频流传递给WebRTC，好家伙，再想办法，用canvas来播放视频，再调用canvas的captureStream，问题又来了，不支持HDR是一方面，主要糊的很。

WebRTC的最佳方案就是用SRS把RTMP转成WebRTC，然后浏览器上用WebRTC播放。

经过一番思考，我还是选择了hls.js的方案，我的M2转码1080p的话1个小时的视频大概是6分钟，还能接受，主要是我的电脑是动态公网IP，直接叫小伙伴访问我的本机，用hls.js播放，流畅不卡，然后再用WebRTC传输播放的操作来做同步。

所以总是在瞎折腾里学习和成长。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享