辽宁手机报:the5fire的技术博客

彩票开奖查询 www.8a72.cn 关注Python、Django、Vim、Linux、Web开发、团队管理和互联网--Life is short, we need Python.


动手实现m3u8的浏览器播放器

作者:the5fire | 标签:       | 发布:2014-03-29 6:01 a.m. | 阅读量: 42354, 40248

前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址,最后终于找到了两个开源的东西可以正常播放,稍稍整理下方便后来人。

m3u8是什么就不介绍了,现在所有视频网站基本都是通过m3u8的方式来播放视频的。

在浏览器上播放m3u8的视频地址有两种方式:

  1. html的video标签的方式,这种方式播放很简单:
<!DOCTYPE hmtl><html><head><title>the5fire m3u8 test</title></head><body><videocontrolsautoplay><sourcesrc="//stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8"></video></body></html>

上面的代码,你直接贴到一个index.html中,用safari浏览器打开就可以直接播了。

但是, 目前只能只有Safari支持,通用性并不好。因此还得采用flash来播放,也就下面的第二种方法。

  1. 通过开源的swfobject.js以及两个flash组件:OSMF和HLSProvider来播放,上代码:
<!DOCTYPE html><html><head><title>the5fire m3u8 test</title><scriptsrc="//the5fireblog.b0.upaiyun.com/staticfile/swfobject.js"></script></head><body><divid="player"></div><script>varflashvars={// M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
// escaped it for urls with ampersands
src:escape("//www.8a72.cn/static/demos/diaosi.m3u8"),// url to OSMF HLS Plugin
plugin_m3u8:"//www.8a72.cn/static/demos/swf/HLSProviderOSMF.swf",};varparams={// self-explained parameters
allowFullScreen:true,allowScriptAccess:"always",bgcolor:"#000000"};varattrs={name:"player"};swfobject.embedSWF(// url to SMP player
"//www.8a72.cn/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播放器?;谡馊鲎榧?,我自己也做了个简单的页面,方便以后在网上看m3u8的视频: m3u8 player

上面几个开源项目的地址:

- from www.8a72.cn
----EOF-----

微信公众号:Python程序员杂谈

预售优惠价截止到7月8日23点59分。


其他分类:
  • 女子谎称刷单提成骗贫困大学生16万 用于买化妆品 2018-12-01
  • 西安体育学院体育传媒系与西部网签约校媒合作 2018-12-01
  • 网络投票刷礼物能不能帮孩子“争上游”? 2018-11-28
  • 中共山西省委组织部公示 2018-11-28
  • 【北京天气】最新北京今天天气,实时提供北京气温、空气质量、24小时天气预报、生活指数查询 2018-11-24
  • 格局生变 内容产业未来何去何从 2018-08-18
  • 土地不是劳动成果,而是一种自然资源,就像空气、阳光不是劳动成果而是自然资源一样,所以土地不具有价值,买房只应支付房屋费,不应该支付土地费。 2018-08-14
  • 安全生产月:铁路安全宣传走进车站 2018-08-02
  • 带动乡亲干 各自有实招——三位农村社区党组织书记的故事 2018-08-02
  • 长江中下游正式“入梅”!中东部高温降雨齐上阵 湖北中北部有大到暴雨 2018-07-31
  • 2018年4月27日划拨国家社科基金项目鉴定费名单(2) 2018-07-31
  • [微笑]未来的社会,必然是按需(基本需求)分配+按劳(劳动价值或劳动能力)分配相联合的混合分配方式。 2018-07-30
  • “一带一路”建设工作座谈会 2018-07-30
  • 只要等一等就能多“等”出8600万美元! 2018-07-29
  • 2017年秋季学期学员第十三支部风采 2018-07-18
  • 504| 234| 962| 835| 457| 945| 152| 29| 88| 600|