M3U8在线播放

• 前言
• 一、思路
• 二、代码框架
• • 1. 移动端适配
  • 2. 改变M3U8地址
  • 3. 设置videojs参数
  • 4. 增加快进等功能
• 写在最后

前言

当我们在网上愉快观影的时候，难免会遇到“M3U8格式”的视频。聪明的你应该也发现了，它是没办法直接播放的。它其实只是一个索引文件，根据它找到相应的.ts文件再进行播放。而这样做的好处，大概就是做多码率适配，保证视频播放的流畅性。有感兴趣的小伙伴可以参看这里—>M3U8文件格式。

一、思路

想要播放M3U8的方法有很多，比如浏览器插件 Native HLS PlayBack:

又比如现成的软件VLC播放器：

但是，这些都需要下载或者安装，当我换一个设备时就不是很方便嘛。于是，还有一种更好的方法：写一个M3U8在线播放的网站。
直接上图（分别为PC端和移动端）：

二、代码框架

利用js库videojs来对m3u8视频进行解析并播放。具体的代码，大家可以进去网站—>查看源码—>直接copy。
接下来主要是对其中涉及到的一些关键点进行说明，避免大家走弯路。

1. 移动端适配

为了使得网站在PC端和移动端都能很好地被展示，得在HTML中加入如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

同时为了更好地区分出当前访问是移动端还是PC端，可以定义如下JS函数：

function IsPC(){ 
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) { 
        if (userAgentInfo.indexOf(Agents[v]) > 0) { 
            flag = false;
            break;
        }
    }
    return flag;
}

2. 改变M3U8地址

通过在请求地址中加入一个play参数，“http://www.m3u8player.top/?play=xxxx.m3u8”来改变需要播放的m3u8地址。
在点击按钮后执行ChangeM3u8()函数，实现页面的跳转：

function ChangeM3u8(){ 
    var play = document.getElementById('video-url').value
    var url = location.href
    url = url.split('?')[0]+'?play='+play
    location.href = url
}

识别请求URL中的play参数：

function QueryString(qs){ 
    var url = location.href
    url = url.replace('?','?&').split('&')
    var re = ''
    for(var i=1;i < url.length;i++){ 
        if(url[i].indexOf(qs+'=')==0){ 
            re = url[i].replace(qs+'=','')
            break
        }
    }
    return re
}

3. 设置videojs参数

根据需要对videojs参数进行设置，如进度条、poster等：

var myVideo = videojs('myVideo',{ 
    bigPlayButton : true, 
    textTrackDisplay : false, 
    posterImage: false,
    errorDisplay : true,
    controlBar: { volumePanel:{ inline:false}},
    playbackRates: [0.5,1,1.25,1.5,2],
},function(){ 
    this.on('error',function(){ 
        myVideo.errorDisplay.close()
        alert('小主，地址解析错误≥﹏≤ \n 请检查链接是否正确')
    }) 
}
)

4. 增加快进等功能

为了使得网站可以通过键盘按键来对视频进行控制，如左右键控制视频前进后退，上下键控制音量大小，空格键控制视频播放暂停。我增加了键盘监听事件：

var vol = 0.1;  //1代表100%音量，每次增减0.1
var time = 10; //单位秒，每次增减10秒
document.onkeyup = function (event) { //键盘事件
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode === 37) { 
        // 按 向左键
        c_time = myVideo.currentTime()
        if(c_time-time > 0){ 
            myVideo.currentTime(c_time-time)
        }else{ 
            myVideo.currentTime(0)
        }
        return false;
    }else if (e && e.keyCode === 39) { 
        // 按 向右键
        c_time = myVideo.currentTime()
        d_time = myVideo.duration();
        if(c_time+time > d_time){ 
            myVideo.currentTime(d_time)
        }else{ 
            myVideo.currentTime(c_time+time)
        }
        return false;
    }else if (e && e.keyCode === 38) { 
        // 按 向上键
        c_volume = myVideo.volume()
        if(c_volume+vol > 1){ 
            myVideo.volume(1)
        }else{ 
            myVideo.volume(c_volume+vol)
        }
        return false;
    }else if (e && e.keyCode === 40) { 
        // 按 向下键
        c_volume = myVideo.volume()
        if(c_volume-vol < 0){ 
            myVideo.volume(0)
        }else{ 
            myVideo.volume(c_volume-vol)
        }
        return false;
    }else if (e && e.keyCode === 32) { 
        // 按 空格键
        if (myVideo.paused()){ 
            myVideo.play()
        }else{ 
            myVideo.pause()
        }
        return false;
    }

}

写在最后

当然，还有许多东西可以做，可以去改进的。
所谓的“路遥遥其修远兮 吾将上下而求索”。

最后，感谢各位大大的耐心阅读~
慢着，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)