动手实现m3u8的浏览器播放器
作者：the5fire
| 标签：
hlsprovider
| 发布：2014-03-29 6:01 a.m.
| 阅读量: 59130, 55914
前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址，最后终于找到了两个开源的东西可以正常播放，稍稍整理下方便后来人。
m3u8是什么就不介绍了，现在所有视频网站基本都是通过m3u8的方式来播放视频的。
在浏览器上播放m3u8的视频地址有两种方式：
1 html的video标签的方式，这种方式播放很简单:
<!DOCTYPE hmtl>
<title>the5fire m3u8 test</title>
</head>
<video controls autoplay >
<source src="http://stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>上面的代码，你直接贴到一个index.html中，用safari浏览器打开就可以直接播了。
但是, 目前只能只有Safari支持，通用性并不好。因此还得采用flash来播放，也就下面的第二种方法。
2 通过开源的swfobject.js以及两个flash组件：OSMF和HLSProvider来播放，上代码:
<!DOCTYPE html>
<title>the5fire m3u8 test</title>
<script src="http://sss.the5fire.com/staticfile/swfobject.js"></script>
</head>
<div id="player">
<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了，结果很简单，但是对于我这个对flash外行的人来说还是搜索尝试了良久的。这个代码通过浏览器访问文件的方式是不能用的，你得起一个web服务比如：python -m SimpleHTTPServer。然后访问你存的index.html就能工作了。
结果是不是很简单？不过在搜索的时候也找不到有人提供这样的方案，反而找到很多基于OSMF而开发的收费的flash播放器。
上面几个开源项目的地址：
- http://osmf.org
- http://osmf.org/dev/2.0gm/StrobeMediaPlayback.html
- https://github.com/mangui/HLSprovider
----EOF-----
微信公众号：Python程序员杂谈
公告
微信公众号: Python程序员杂谈
基于Django的网站系统: Typeidea
《Django企业开发实战》已出版，热销中
豆瓣书评
图灵社区购买
京东购买
当当网购买
个人作品
《Django源码解析视频版》大纲-草稿 《Backbone.js入门教程第二版》基于Django的网站系统: Typeidea