H5视频播放之m3u8

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插件

html页面如下：

准备一个flash播放器

flash播放器主要基于一个js文件以及两个swf文件，首先需要引入swfobject.js的js文件，如下：

然后定义调用播放器的接口：

function showFlashPlayer(hlsData){
        $('.video').append($(''));
        $("#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("您的浏览器不支持该播放器，请您下载Flash播放器插件或者改换其他浏览器进行播放");
            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').append($(h5video));
 }else if (/android/.test(ua)) {//如果为安卓手机
          var h5video = '';
          $('.video').append($(h5video));
 } else {
          showFlashPlayer(article.videoHls);
 }