上篇文章提到，怎么到视频网站通过浏览器抓包分析，得到视频的源地址。看这篇文章之前，最好可以去先看一看上篇博文的介绍。
上篇文章我们介绍到我们能够得到视频的源地址，且它是一个m3u8格式的文件，现在我们想把它放到自己电脑上播放，或者说我们现在知道一个m3u8格式的视频地址，我们怎么在自己电脑上播放它。
方法一，下载浏览器插件，插件帮你完成
方法二，搭建一个前端基于HTML5页面的m3u8播放服务器
这里着重介绍第二种方法。
为啥要复制m3u8视频地址，到自己电脑上播放，这样有什么好处？
1. 电影网站一般有很多广告，影响体验，所以我们花一分钟解析到m3u8地址后，到自己的干净清爽页面上播放，对于强迫症患者友好
2. 闲的蛋疼
1. Tomcat服务器，当然我们使用任何能访问html页面的服务器都行。
2. 使用ckplayer前端播放器插件帮助我们解析m3u8
去Tomcat官网下载Tomcat服务器。
下载前端播放器插件 CKplayer
在Tomcat根目录下进入webapp目录，创建目录m3u8player
解压下载好的CKPlayer文件，并将解压目录中的ckplayer目录(如下图所示)复制到m3u8player目录下
在m3u8player目录下创建一个html文件：index.html，index.html内容如下
<!DOCTYPE>
<html>
<meta charset="utf-8">
<title>m3u8播放器</title>
<script type="text/javascript" src="./ckplayer/ckplayer.js"></script>
<style>*{margin: 0; padding: 0;}</style>
<body>
<p>
<span>请输入m3u8地址: </span>
<input type="text" id="url"/>
<button id="submit">观看</button>
</p>
<div id="video" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var submit = document.getElementById("submit");
var url = document.getElementById("url");
var videoObject = {
container:'#video', // 视频容器
variable:'player',
autoplay:true,
video:'http://www.flashls.org/playlists/test_001/stream_1000k_48k_640x360.m3u8'
}
new ckplayer(videoObject);
submit.addEventListener('click', function(){
// 输入的地址不能跟当前播放的视频地址一样
if(url.value != videoObject.video){
videoObject.video = url.value;
new ckplayer(videoObject);
} else {
alert("您目前播放就是该视频...");
}
});
</script>
</body>
</html>
此html页面的界面大致样子如下：
最上边是一个文本框，我们复制可播放的m3u8地址到文本框中，然后点击观看即可自动播放
再看到上篇文章：网页播放器（CKplayer）的视频怎么下载——m3u8简单探索
我们通过这篇文章解析到m3u8视频的地址为：https://v3.438vip.com/20180206/1J0oX5Ro/index.m3u8
tomcat/bin/startup.bat
http://localhost:8080/m3u8player/
