抓住自己最有兴趣的东西，由浅入深，循序渐进地学……
1.基础知识
所谓的FLV、AVI、MP4等视频文件与H.264、H.263、MPEG1、MPEG2等’有什么区别？
简单来说，后者是视频的压缩编码标准，前者是后者的容器，即会对在后者生成的文件头添加一些索引信息，以方便播放器播放。具体信息可查看链接https://www.zhihu.com/question/20997688
2.调研
调研到的几个用JavaScript 解码的工程如下：
（1）Broadway.js GitHub地址 点击打开链接
（2）jsmpeg.js GitHub地址 点击打开链接, 和其另一篇介绍性文章 点击打开链接
（3）prism.js GitHub地址 点击打开链接 （并未找到演示性Demo）
（4）ORBX.js 未开源？（并未找到太多信息）
3.具体实现
本部分主要针对Broadway.js以及jsmpeg.js介绍其实现流程：
（1）Broadway.js
从github上下载下其源代码，其中最主要的代码在文件夹Player下，在其中添加一个任意名称的.html文件，并将如下代码写入此文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, initial-scale=1"/>
<title>h264 streaming</title>
<style type="text/css">
body {
background: #333;
text-align: center;
margin-top: 10%;
}
#videoCanvas {
/* Always stretch the canvas to 640x480, regardless of its
internal size. */
width: 640px;
height: 480px;
}
</style>
</head>
<body>
<!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will
change this internal resolution to whatever the source provides. The size the
canvas is displayed on the website is dictated by the CSS style.
-->
<!--
<canvas id="videoCanvas" width="640" height="480">
<p>
Please use a browser that supports the Canvas Element, like
<a href="http://www.google.com/chrome">Chrome</a>,
<a href="http://www.mozilla.com/firefox/">Firefox</a>,
<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
</p>
</canvas>
-->
<script type="text/javascript" src="Decoder.js"></script>
<script type="text/javascript" src="YUVCanvas.js"></script>
<script type="text/javascript" src="Player.js"></script>
<script type="text/javascript">
var player = new Player({size: {
width: 640,
height: 320
}});
document.body.appendChild(player.canvas);
var strhost = "ws://" + window.location.host + "/test";
// Setup the WebSocket connection and start the player
var client = new WebSocket( strhost );
client.binaryType = 'arraybuffer';
client.onopen = function(evt) {
onOpen(evt)
};
client.onclose = function(evt) {
onClose(evt)
};
client.onmessage = function(evt) {
onMessage(evt)
};
client.onerror = function(evt) {
onError(evt)
};
function onOpen(evt) {
//alert("open");
}
function onClose(evt) {
//alert("close");
}
function onMessage(evt) {
var messageData = new Uint8Array(evt.data);
player.decode(messageData);
}
function onError(evt) {
alert("error");
}
</script>
</body>
</html>
其次需要准备一个H.264编码的裸视频（注意：不能有容器），并建立websocket服务器，而后即可显示视频。
（2）jsmpeg.js
其github上的工程几乎不用修改即可使用，但这次传递的需要是有容器的视频。
4.存在的问题
jsmpeg.js 对视频的解码只支持MPEG1的编码格式。
Browadway.js 在解码过程中有时会黑屏，而且高清的H.264视频无法解析。
from：https://blog.csdn.net/qq_20038925/article/details/78047951
