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

    给出n个点,求任意两点间距离的平方和. 暴力显然超时,可以把公式写出来,化简一下,发现预处理一下后缀和就可以o(n)出解了. #include<cstdio> #include<cs ...

  2. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  3. javascript第一篇----使用简介

    使用技巧 Javascript加入网页有两种方法:直接方式和引用方式. 直接方式 直接调用分为两种形式:代码块和代码行 代码行引用: <a href="javascript:alert ...

  4. mahout第一篇-----Mahout学习路线图

    Mahout学习路线图 前言 Mahout是Hadoop家族中与众不同的一个成员,是基于一个Hadoop的机器学习和数据挖掘的分布式计算框架.Mahout是一个跨学科产品,同时也是我认为Hadoop家 ...

  5. oracle 函数的创建和调用

    以下已经测试通过 创建函数: create or replace function get_annual_sal(in_name varchar2) return number is annual_s ...

  6. 负载均衡 LVS+Keepalived

    系统  CentOS 5.6 X64 物理机 IP 10.10.10.104 Xen : 三台 CentOS 5.8 ip为: 10.10.10.106        10.10.10.107     ...

  7. find命令--xargs--exec

    find命令 1.1.find命令选项-name 按照文件名查找-perm 按照文件权限来查找-prune 可以使用find命令排除当前文件夹,不查找-user 可以按照文件属主来查找-group 可 ...

  8. Linux 分区和目录

    [1. 分区与目录概念理解]  Linux的分区是物理上的概念,就像我们把一块硬盘分成C:,D:,E:三个区一样,物理上将存储空间分开 Linux的目录是逻辑上的概念,Linux的目录树实际上是一个分 ...

  9. layer 的一些知识

    layer类似于ps的图层,如果把一个uiview看做图片的画,layer就像是图层.一个图片是由很多个大小不同的有层次的图层构成的,uiview也是. 1. 一个view有一个underlying ...

  10. 一种比较简单的在USB U盘中访问nandflash的方法

    u8 nandflash_write_buffer[NAND_SERECT_FULL_SIZE]; static int currentBlock = -1; static int currentPa ...