一、html的video标签的方式，这种方式播放很简单:
<!DOCTYPE hmtl>
<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
<source src="../v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>
二、通过开源的swfobject.js以及两个flash组件：OSMF和HLSProvider来播放，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>the5fire m3u8 test</title>
<script src="../staticfile/swfobject.js"></script>
</head>
<body>
<div id="player">
</div>
<script>
var flashvars = {
// M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
// escaped it for urls with ampersands
src: escape("http://www.the5fire.com/static/demos/diaosi.m3u8"),
// url to OSMF HLS Plugin
plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
}
var params = {
// self-explained parameters
allowFullScreen: true,
allowScriptAccess: "always",
bgcolor: "#000000"
}
var attrs = {
name: "player"
}
swfobject.embedSWF(
// url to SMP player
"http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
// div id where player will be place
"player",
// width, height
"800", "485",
// minimum flash player version required
"10.2",
// other parameters
null, flashvars, params, attrs
)
</script>
</body>
</html>
通过嵌入以上代码就可以播m3u8了。
随着各行各业安防系统的建设，激增了摄像头视频web播放的需要。
为此需要一个web播放器来播放摄像头的视频。
想做好一个能兼容所有浏览器和所有摄像头编码的web播放器存在很多冲突点。
小孩子才做选择题，成年人当然是全都要。
采用video.js+扩展的方式，video.js自带方案2和3，需要为其扩展1/4/5。
扩展单独实现为一个js库，与video.js搭配使用，不破坏其原有结构。
如果视频源为HLS/DASH/HTTP-FLV/MP4则直接走video.js。
如果视频源为RTSP则走扩展的js库，此时video.js只是扩展js库的API wrapper，也就是在使用者角度看是走的video.js API，但实际调用的是扩展js库的API。
扩展库由1或2个worker线程+胶水API组成
worker线程流程：
胶水API：
完成与video.js的整合。
说明：
html5是网页代码的标准，跟视频传输协议没一分钱的关系。html5支持的视频格式是H.264，html5之前的网页代码是不支持视频的。
网页上能看到视频是因为浏览器安装了插件，比如flashplayer、Windows Media Player、RealPlayer、快播、百度影音等。
用什么传输协议是看插件支持什么协议。
