M3U8在线播放

前言

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

我今天要干的事情呢，就是解决当我们找到一个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').valuevar url = location.hrefurl = url.split('?')[0]+'?play='+playlocation.href = url
}

识别请求URL中的play参数：

function QueryString(qs){var url = location.hrefurl = 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;}}

写在最后

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

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