前几天花了点时间研究了下怎么在浏览器中播放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. android脚步---数字时钟和模拟时钟

    时钟UI组件是两个非常简单的组件,分为Digitalclock  和Analogclock, main.xml文件,书中程序有问题,加了两个组件,一个Button和一个<Chronometer ...

  2. 使用GDB调试Android NDK native(C/C++)程序-转

    最 近写了些需要跨平台兼容的C++库,Android是其中需要兼容的平台之一.区别于Windows,Mac中功能强大的IDE环境,官方并没有为 Android ndk提供太多的支持.因此,尝试了下通过 ...

  3. php url 伪静态

    手册上说:   'PATH_INFO'    包含由客户端提供的.跟在真实脚本名称之后并且在查询语句(query string)之前的路径信息,如果存在的话.例如,如果当前脚本是通过 URL http ...

  4. Freemodbus 1.5

    源:http://blog.sina.com.cn/s/blog_4935209001012eax.html 网站位置:http://www.freemodbus.org/index.php?lang ...

  5. DedeCMS新建模型字段【附件样式】修改方法

    当我们在系统模型中添加了一个自定义附件类型字段的时候,例如我在后台添加一个名为"fujian"的附件类型的字段,字段的实际内容为:'/uploads/soft/2245/1-255 ...

  6. Quick Cocos2dx 版本更新

    呵呵,不出所料,我又把项目的quick x版本从2.2.1升级到2.2.3了,不知道下次升级到3.x回事神马时候呢,好期待的说. 话说运行2.2.3的player的时候,老是提醒我显卡不支持openg ...

  7. lwip移植到stm32上-enc28j60，103mcu（2）

    前面小玩了一下ucos和lwip,但是都还不是真正的网络多任务,真正的网络多任务应该是什么样子的呢?应该是有一个专门的任务负责网络的通讯,他负责将数据发送出去,将数据接收回来,而其他的需要用到网络的任 ...

  8. R语言实战（四）回归

    本文对应<R语言实战>第8章:回归 回归是一个广义的概念,通指那些用一个或多个预测变量(也称自变量或解释变量)来预测响应变量(也称因变量.效标变量或结果变量)的方法.通常,回归分析可以用来 ...

  9. LPC2478中断控制器以及串口详解

    LPC2478的中断系统 LPC2478使用的是ARM PrimeCell向量中断控制器,一共支持32个中断向量,处于AHB空间便于系统快速访问,在中断向量的硬件优先级上还有一层可以用户自己设计的软件 ...

  10. IOS第三方数据库--FMDB

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...