前几天花了点时间研究了下怎么在浏览器中播放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

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

m3u8的浏览器播放器的更多相关文章

  1. 小巧的http live streaming m3u8播放器

    转载请注明: TheViper http://www.cnblogs.com/TheViper  原来发表过一篇分段播放的flash播放器.这个播放器其实就没有神马原理,就是把一个视频分成好几个视频, ...

  2. PC浏览器播放m3u8

    HLS(HTTP Live Streaming)是苹果公司针对iPhone.iPod.iTouch和iPad等移动设备而开发的基于HTTP协议的流媒体解决方案.在 HLS 技术中 Web 服务器向客户 ...

  3. 推荐下：开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

    视频播放, 原本是想h5 自带视频播放,使用很简单,结果现实很骨感. <video controls="controls" preload="auto" ...

  4. CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug

    如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...

  5. （转载）开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

    文章链接:http://justcoding.iteye.com/blog/2110275 CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的 ...

  6. 怎么检测浏览器有没有flash播放器

    虽然现在大多浏览器都支持了HTML5的新特性,可以直接在网页上播放视频,通过<video>标签即可,但是大多数的浏览器对H5支持还是不够完整,或者很多用户还没有把浏览器升级到最新的版本,尤 ...

  7. H5——video百花齐放（浏览器自带的播放器）

    前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...

  8. EasyPlayer播放器浏览器ActiveX/OCX插件RTSP播放/抓拍/录像功能调用说明

    EasyPlayerPro与EasyPlayer-RTSP新增ocx多窗口播放功能 这里以EasyPlayerPro为例,使用方法如下: 打开播放器文件夹,进入Bin/C++目录,可以看到reg.ba ...

  9. 跨浏览器兼容的HTML5视频音频播放器

    HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件.而html5medi ...

随机推荐

  1. 对Viewcontroller在UINavigationController中入栈出栈的一点点理解

    转载自:http://blog.csdn.net/intheair100/article/details/41119073 wait_record_arr 在viewdidload里面被alloc,如 ...

  2. PAT (Advanced Level) 1048. Find Coins (25)

    先对序列排序,然后枚举较小值,二分较大值. #include<iostream> #include<cstring> #include<cmath> #includ ...

  3. 签名“未签名”apk文件命令

    在发布至360.oppo应用市场时分别遇到了需要"应用加固"和"应用认领"的情况, 流程都是需要下载一个未签名的apk文件(安装包),然后签名后再上传. 我的做 ...

  4. nginx的内页跳转总结

      刚进公司的时候老大一直在要求php做内页跳转,当时也不太了解细节所以一直没有说话.后来php问我你会不会做内页跳转,我说会一点就做了几个,从此搞内页跳转搞了两个星期.至于为什么做内页跳转哪就暂时不 ...

  5. js 中调用 Object.prototype.toString()来检测对象的类型

    1.使用toString()方法来检测对象类型 可以通过toString() 来获取每个对象的类型.为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Fun ...

  6. switch条件语句规则

  7. 网页解析的全过程(输入url到展示页面)

    1.用户输入网址,浏览器发起DNS查询请求 用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址. 域名解析服务器是基于UDP协议实现的一个应用程序,通常通过监听53端口来 ...

  8. CSS——宽高问题大汇总

    1.宽高继承 他们是要属性的,并不是直接就能继承,inherit. 2.浮动的盒子不要给宽,宽度由内容来决定

  9. web项目编译出错时，原因之一，可能是build path 中order and Export引起

    build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...

  10. windows矢量字体点阵数据的提取(转)

    源:windows矢量字体点阵数据的提取 问题参考:windows api 获取字库点阵的问题 1.提取原理 在windows系统当中提取矢量字体的字模有很多方法,下面介绍一种利用GetGlyphOu ...