打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
m3u8的浏览器播放器

m3u8的浏览器播放器 10105°C

作者:the5fire | 标签:       | 发布:2014-03-28 10:01 p.m.

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

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

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

  1. html的video标签的方式,这种方式播放很简单:
<!DOCTYPE hmtl><html><head><title>the5fire m3u8 test</title></head><body><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来播放,也就下面的第二种方法。

  1. 通过开源的swfobject.js以及两个flash组件:OSMF和HLSProvider来播放,上代码:
<!DOCTYPE html><html><head><title>the5fire m3u8 test</title><script src="http://the5fireblog.b0.upaiyun.com/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了,结果很简单,但是对于我这个对flash外行的人来说还是搜索尝试了良久的。这个代码通过浏览器访问文件的方式是不能用的,你得起一个web服务比如:python -m SimpleHTTPServer。然后访问你存的index.html就能工作了。

结果是不是很简单?不过在搜索的时候也找不到有人提供这样的方案,反而找到很多基于OSMF而开发的收费的flash播放器。基于这三个组件,我自己也做了个简单的页面,方便以后在网上看m3u8的视频: m3u8 player

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


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
flv网页播放器代码
HTML代码参数,酷播flashvars参数,极酷阳光播放器官方,流媒体播放器
FLASH PLAYERS 3.8 说明文件之安装篇 - 技术博客
在WEB标准中嵌入Flash的最佳方法
把Flash动画放到桌面上 (一般人不知道的)
网页视频播放器video.js
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服