m3u8的浏览器播放器

亦凉 2022-08-08 06:55 305阅读 0赞

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

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

*  [http://osmf.org][http_osmf.org]
 *  [http://osmf.org/dev/2.0gm/StrobeMediaPlayback.html][http_osmf.org_dev_2.0gm_StrobeMediaPlayback.html]
 *  [https://github.com/mangui/HLSprovider][https_github.com_mangui_HLSprovider]

[m3u8 player]: http://the5fire.com/demos/player.html
[http_osmf.org]: http://osmf.org/
[http_osmf.org_dev_2.0gm_StrobeMediaPlayback.html]: http://osmf.org/dev/2.0gm/StrobeMediaPlayback.html
[https_github.com_mangui_HLSprovider]: https://github.com/mangui/HLSprovider