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

    如果这是你生命中的最后的一天,你该如何去过好它呢? 不要浪费你生命中的每一分,每一秒!!!

  2. 连接Oracle数据库的Hibernate配置文件

    连接Oracle数据库的Hibernate配置文件连接Oracle的Hibernate配置文件有两种格式,一种是xml格式的,另一种是Java属性文件格式的.下面分别给出这两种格式配置文件的代码. 1 ...

  3. PAT (Advanced Level) 1076. Forwards on Weibo (30)

    最短路. 每次询问的点当做起点,然后算一下点到其余点的最短路.然后统计一下最短路小于等于L的点有几个. #include<cstdio> #include<cstring> # ...

  4. PAT (Advanced Level) 1092. To Buy or Not to Buy (20)

    简单题. #include<cstdio> #include<cstring> ; char s1[maxn],s2[maxn]; ]; ]; int main() { sca ...

  5. tset

    test fsdfs jsjf sdfsdfsdfsdf sfs fsfsfs test112 sdfs sdfsdf sdfs sf af s sdf sadfasdfsa asfasf sdfsa ...

  6. Unity3d之shaderLab内置变量

    float4 _WorldSpaceCameraPos camera在世界坐标系中的位置float4 _WorldSpaceLightPos0 灯光在世界坐标系中的位置 转载请注明出处: http:/ ...

  7. TCP/IP协议头部结构体（网摘小结）（转）

    源:TCP/IP协议头部结构体(网摘小结) TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #de ...

  8. iOS开发——自定义AlertView

    自定义的AlertView,可以选择出现的动画方式,正文信息高度自动变化,特意做了几个可以对比.没啥难点,直接上代码,一看就懂. 1.在YYTAlertView.h文件中 // //  YYTAler ...

  9. iOS学习笔记（十三）——获取手机信息（UIDevice、NSBundle、NSLocale）

    iOS的APP的应用开发的过程中,有时为了bug跟踪或者获取用反馈的需要自动收集用户设备.系统信息.应用信息等等,这些信息方便开发者诊断问题,当然这些信息是用户的非隐私信息,是通过开发api可以获取到 ...

  10. 最新 Spring 4.2.2 集成 Quartz Scheduler 2.2.2 任务调度示例

    参考http://blog.csdn.net/defonds/article/details/49496895 本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度. ...