在浏览器中播放m3u8

时间：2025-01-28 07:10:48

我自己做了个简单的demo地址：/onyas/vip-url-resolve，欢迎star或fork

在浏览器上播放m3u8的视频地址有两种方式：

  1. html的video标签的方式，这种方式播放很简单:
<!DOCTYPE hmtl>
<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
    <source src="/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>

<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
    <source src="/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>

上面的代码，你直接贴到一个中，用safari浏览器打开就可以直接播了。

但是, 目前只能只有Safari支持，通用性并不好。因此还得采用flash来播放，也就下面的第二种方法。

  1. 通过开源的以及两个flash组件：OSMF和HLSProvider来播放，上代码:
<!DOCTYPE html>
<html>
<head>
<title>the5fire m3u8 test</title>
<script src="http://the5fireblog./staticfile/"></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:///static/demos/diaosi.m3u8"),
        // url to OSMF HLS Plugin         plugin_m3u8: "http:///static/demos/swf/",
    };
    var params = {
        // self-explained parameters         allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };
    var attrs = {
        name: "player"
    };

    (
        // url to SMP player         "http:///static/demos/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>

<html>
<head>
<title>the5fire m3u8 test</title>
<script src="http://the5fireblog./staticfile/"></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:///static/demos/diaosi.m3u8"),
        // url to OSMF HLS Plugin         plugin_m3u8: "http:///static/demos/swf/",
    };
    var params = {
        // self-explained parameters         allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };
    var attrs = {
        name: "player"
    };

    (
        // url to SMP player         "http:///static/demos/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。然后访问你存的就能工作了。

结果是不是很简单？不过在搜索的时候也找不到有人提供这样的方案，反而找到很多基于OSMF而开发的收费的flash播放器。基于这三个组件，

相关文章