您现在的位置: 365建站网 > 365学习 > 什么是M3U8以及播放M3U8格式的网络视频的方法

什么是M3U8以及播放M3U8格式的网络视频的方法

文章来源:365jz.com     点击数:3767    更新时间:2018-05-27 10:54   参与评论

1.什么是M3U8

最近做播放器,后台给的链接是M3U8格式的,一脸懵逼,查了一些资料才了解m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过 编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般存在服务器的内存中),通过m3u8解析出来路径,然后去请求。

这样每次请求很小有段视频,可以做到近似于实时播放的效果。

发个示例链接:http://cdn.can.cibntv.net/12/201702161000/rexuechangan01/rexuechangan01.m3u8 给大家研究研究

第一层

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2650800,RESOLUTION=1920x1080
1.m3u8

观察数据吗,没有用http://开头时,不是真正路径,需要拼接字符串再次请求:http://cdn.can.cibntv.net/12/201702161000/rexuechangan01/1.m3u8 得到数据

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:14
#EXTINF:11.480, 
20170215T224129-1-0.ts
#EXTINF:11.480, 
20170215T224129-1-1.ts
#EXTINF:10.480, 
20170215T224129-1-2.ts
#EXTINF:11.400, 
20170215T224129-1-3.ts
#EXTINF:11.120, 
20170215T224129-1-4.ts
#EXTINF:11.200, 
20170215T224129-1-5.ts
#EXTINF:13.600, 
20170215T224129-1-6.ts
#EXTINF:11.360, 
20170215T224129-1-7.ts
#EXTINF:10.240, 
20170215T224129-1-8.ts
#EXTINF:12.000, 
20170215T224129-1-9.ts
#EXTINF:13.760, 
20170215T224129-1-10.ts
#EXT-X-ENDLIST

看到ts结尾的文件,这才是视频真正的存放路径:http://cdn.can.cibntv.net/12/201702161000/rexuechangan01/20170215T224129-1-0.ts ,这时候用浏览器下载就可以播放。不过这个播放不用我们去解析 android 4.0以后的videoView 就支持自动解析,并拼接播放。

 

2.简单的m3u8播放示例(网络播放)

 

	Uri uri = Uri.parse("http://cdn.can.cibntv.net/12/201702161000/rexuechangan01/rexuechangan01.m3u8");
	video_view.setMediaController(new MediaController(this));
	video_view.setVideoURI(uri);
	video_view.requestFocus();
	ideo_view.start();
	这样就可以简单的播放M3u8格式的视频了。

M3U8为mac专有的视频格式, mac\ios下的浏览器都支持M3U8的HTML5播放,CKplayer也可以的。在PC上用flash播放,移动端就用h5

safari的h5原生支持hls(m3u8)播放 chrome等浏览器需要自己写解码,参考这个videojs/videojs-contrib-hls · GitHub 也就是说HTML5 Video Player 安装videojs-contrib-hls插件就可以了

ckplayer 如何在PC上完美支持 m3u8播放

 

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。

一般情况我们都使用普通的视频格式比如mp4,flv等播放,但如果视频文件过大,会加载较慢。

于是我们可以将视频转成m3u8格式来解决这个问题(可以百度m3u8来了解原理,简单点说他就是把视频切成若干个切片,每个切片都可以独立播放而且大小很小,然后利用一个文件索引来依次播放这些文件,所以很快)

 

但是PC上使用video 播放m3u8 是不支持的。幸好的是ckplayer有支持m3u8在PC播放的插件。

但注意了。有个巨坑,千万不要根据ckplayer官网的说明去安装配置这个插件!会出现各种错误!

 

其实很简单,下载插件:m3u8.swf http://bbs.ckplayer.com/forum.PHP?mod=viewthread&tid=18168

下载后解压,将m3u8.swf文件拷贝至你的服务器任意目录,可以访问到就好,为了方便我是放在了ckplyer插件文件夹里。

OK!配置成功! 是不是很简单?就拷贝过来就OK啦!

接下来是js:

showPlayer('http://static.guojiang.tv/pc/video/sound/1/playlist.m3u8','videoWrap') function showPlayer(src, id){      //player    var flashvars={         f : 'http://static.guojiang.tv/pc/js/ckplayer/m3u8.swf',         a : src,         c : 0,         s:4,         lv:0//注意,如果是直播,需设置lv:1     };     var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};     var video=[src];     CKobject.embed('http://static.guojiang.tv/pc/js/ckplayer/ckplayer.swf',id ,'ck-video','100%','100%',false, flashvars ,video, params); }

f: m3u8.swf 的地址

  a: 你要播放的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

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (3767人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------