H5视频播放之m3u8
2016-09-13 本文已影响15006人
富士里
HLS是什么
HLS，Http Live Streaming 是由Apple公司定义的用于实时流传输的协议，HLS基于HTTP协议实现，传输内容主要包括两部分，一是M3U8描述文件，二是TS媒体文件。我们可以理解其就是一种视频格式，这里对于其原理不做过多分析，如需了解，请查阅HLS相关资料。
基本情况
视频播放的场景主要是手机以及PC机。通过video标签播放.m3u8格式视频需要两个条件：
- 支持H5的video标签；
- 在条件1的基础上同时需要支持.m3u8类型的视频播放。
由于HLS这种协议是由Apple公司定义的，所以苹果手机能够很好的支持.m3u8视频的播放；android手机浏览器只要支持H5的video标签就基本上支持.m3u8这种类型的视频播放；而PC端浏览器即使支持H5的video标签，也不支持.m3u8视频的播放。
所以当我们项目中使用的是HLS(.m3m8)这种视频文件时，为了实现视频在不同场景下的正常播放，就必须对不能够正常播放视频的场景做相应的适配处理。那么，怎么解决呢？
我的解决方法
思路：对于PC端，由于不支持.m3u8类型视频的播放，所以基于基于flash进行播放；而对于苹果的ios以及mac os系统都支持改类型是视频的播放，android4.0以上版本应该也没啥问题。而解决问题的关键就是找到一个播放器。
引入适配H5插件
<script src="js/html5shiv.min.js"></script>
html页面如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<article>
<div class="video"></div>
</article>
<script src="js/swfobject.js"></script>
<script src="js/html5media.min.js"></script>
</body>
</html>
准备一个flash播放器
flash播放器主要基于一个js文件以及两个swf文件，首先需要引入swfobject.js的js文件，如下：
<script src="js/swfobject.js"></script>
然后定义调用播放器的接口：
function showFlashPlayer(hlsData){
$('.video').append($('<div id="player"></div>'));
$("#player").css({"width": "100%"});
var bHeight = $("#player").width() * 9 / 16;
$("#player").css("height", bHeight);
//判断是否已安装flash播放插件
if (req.hasFlash().f == 0) {
$("#player").css("background", "#000");
$("#player").html("<div style='margin:auto;width: 100%;padding-top:3em;font-size:0.8em;height:50px;text-align:center;color: #888;'>您的浏览器不支持该播放器，请您下载Flash播放器插件或者改换其他浏览器进行播放</div>");
return;
}
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://hls.videocc.net/ce0812b122/c/ce0812b1223bb292333a4ce6e092a949_3.m3u8"),
src: escape(hlsData),
// url to OSMF HLS Plugin
plugin_m3u8: "img/HLSProviderOSMF.swf",
};
var params = {
// self-explained parameters
allowFullScreen: true,
allowScriptAccess: "always",
bgcolor: "#000000"
};
var attrs = {
name: "player"
};
swfobject.embedSWF(
// url to SMP player
"img/StrobeMediaPlayback.swf",
// div id where player will be place
"player",
// width, height
"100%", "485",
// minimum flash player version required
"10.2",
// other parameters
null, flashvars, params, attrs
);
}
播放逻辑
有了上述播放器，我们就可以在不同情况下对.m3u8视频文件进行播放了，以下为实现逻辑。
if (/iphone|ipad|ipod|mac os x/.test(ua)) {//如果为苹果手机
var h5video = '<video width="100%" controls autoplay playsinline webkit-playsinline poster=' + posterUrl + '><source type="application/vnd.apple.mpegurl" src="'
+ videoHls + '">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';
$('.video').append($(h5video));
}else if (/android/.test(ua)) {//如果为安卓手机
var h5video = '<video width="100%" controls autoplay playsinline webkit-playsinline poster=' + posterUrl + '><source type="application/x-mpegURL" src="'
+ videoHls + '">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';
$('.video').append($(h5video));
} else {
showFlashPlayer(article.videoHls);
}
相关文件可以到这里去下载：http://download.csdn.net/detail/fasily/9639955
视频效果
pc.png
mobile.png
