前几天花了点时间研究了下怎么在浏览器中播放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. java中把list列表转为arrayList以及arraylist数组截取的简单方法

    java中把list列表转为arrayList以及arraylist数组截取的简单方法 package xiaobai; import java.util.ArrayList; import java ...

  2. Android-----View绘制流程以及invalidate()等相关方法分析 .

    引自:http://blog.csdn.net/qinjuning/article/details/7110211 前言: 本文是我读<Android内核剖析>第13章----View工作 ...

  3. DWR Annotations

    DWR   Annotations DWR 标注是用来代替 dwr.xml 或者与其一同工作的. 1.初始配置 <servlet> <description>DWR contr ...

  4. Struts2升级出现的问题

    由于大家都懂的原因,涉struts2的项目需要将struts2相关包升级至2.3.15.1.今将升级方法和常见问题解决简单总结如下. 一.基本升级操作 1. 获取Struts2.3.15.1jar包 ...

  5. CodeForces 591B Rebranding

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...

  6. php7连不上mysql求帮忙！！！

    把php.ini中的 拓展mysqli.dll和pdo＿mysql.dll前面分号都去掉也没用,mysql是5.5 apache2.4和php7都好使了,怎么也连不上mysql Fatal error ...

  7. Python 100例（下）

    如果你坚持到这了,哪就为自己鼓掌吧!坚持,你一定可以. 实例51: 题目:学习使用按位与&. #!/usr/bin/env  python# --*--coding:utf-8 --*--'' ...

  8. Android---Parcelable包装类的作用

    android提供了一种新的类型:Parcel.本类被用作封装数据的容器,封装后的数据可以通过Intent或IPC传递. 除了基本类型以外,只有实现了Parcelable接口的类才能被放入Parcel ...

  9. Jobject 使用

    obj2 = JObject.Parse(result.Html); JArray _Jarr = _obj["data"]["siteList"].Value ...

  10. 高并发数据库之MySql性能优化

    1.慢查询 SHOW VARIABLES LIKE '%quer%'