抓住自己最有兴趣的东西，由浅入深，循序渐进地学……
1.README.md
JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~50ms) via WebSockets.
JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.
Using it can be as simple as this:
<script src="jsmpeg.min.js"></script><div class="jsmpeg" data-url="video.ts"></div>
Some more info and demos: jsmpeg.com
2.jsmpeg.com的例子
查看html的element，然后下载这个示例的Ts文件
<div class="jsmpeg full-width" data-url="bjork-all-is-full-of-love.ts" style="..."</div>
发现本地直接打开这个html是播放不了的，需要部署到服务器上。这下可以播放本地文件了，可以参照readme加上data-loop="true" data-autoplay="true"这些控制属性。
这里把div换成canvas，或者把TS本地文件变成mpg文件，都播放不了。
3.使用script代码来播放
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('video-canvas'); var player = new JSMpeg.Player('bjork-all-is-full-of-love.ts',
{canvas:canvas,loop: true, autoplay: true}); </script></body>options参数参见readme.md
4.不支持 B-Frames，视频宽度必须是 2 的倍数
JSMpeg only supports playback of MPEG-TS containers with the MPEG1 Video Codec and the MP2 Audio Codec. The Video Decoder does not handle B-Frames correctly (though no modern encoder seems to use these by default anyway) and the width of the video has to be a multiple of 2.
You can encode a suitable video using ffmpeg like this:
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts
5.使用websocket(nginx)
这里我先尝试用nginx搭建websocket，参考配置 Nginx 反向代理 WebSocket，先用node.js的ws模块启动了ws://localhost:8010，可以连接成功。但是，后面使用niinx配置反向代理失败了，连接ws://ws.repo/一直失败，原因不明，配置文件如下：
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
http{
map $http_upgrade $connection_upgrade { default upgrade; '' close;
}
upstream ws_server { #ip_hash;
server localhost:8010;
}# 以下配置是在server上下文中添加，location指用于websocket连接的path。
server {
listen 80;
server_name ws.repo;
access_log /var/log/nginx/yourdomain.log;
location / {
proxy_pass http://192.168.198.102:8010;
#proxy_pass http://ws_server/;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
}6.参考jsmpeg官方文档(这里，官网也在使用node.js来操作websocket-relay.js)
这里先npm init ws -D，然后node websocket-relay ququ 9091 9092
Listening for incomming MPEG-TS Stream on http://127.0.0.1:9091/<secret>Awaiting WebSocket connections on ws://127.0.0.1:9092/
注意看，推流要推到上面那个9091端口；而播放视频则要用下面那个WS的9092端口。现在我们拿在线测试websocket工具已经可以连接9092了
然后就是推流操作，这里参考HTML5 视频直播（二）是看不到的，原因就是那个-f mpeg1video:
ffmpeg -re -i bjork-all-is-full-of-love.ts -codec copy -f mpeg1video http://127.0.0.1:9091/ququ
需要把-f mpeg1video改成-f mpegts，因为我们用的是ts后缀的文件啊。这也是参照官网readme才发现的，另外就是demo传的url就是ws的字符串。
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('video-canvas'); //var client = new WebSocket('ws://127.0.0.1:9092');
//var player = new JSMpeg.Player(client,
//{canvas:canvas,loop: true, autoplay: true});
var player = new JSMpeg.Player('ws://127.0.0.1:9092/',
{canvas:canvas,loop: true, autoplay: true}); </script></body>1.ffmpeg是有声音的，虽然 HTML5 视频直播（二）的作者写着没有声音。估计是代码库版本有变化。另外 mpg格式也不支持，现在是TS格式。参考[总结]视音频编解码技术零基础学习方法
