m3u8格式的视频链接怎么在自己电脑上播放

本文接上篇文章：网页播放器（CKplayer）的视频怎么下载——m3u8简单探索

上篇文章提到，怎么到视频网站通过浏览器抓包分析，得到视频的源地址。看这篇文章之前，最好可以去先看一看上篇博文的介绍。

上篇文章我们介绍到我们能够得到视频的源地址，且它是一个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服务器启动tomcat/bin/startup.bat
浏览器访问http://localhost:8080/m3u8player/
输入框输入m3u8地址
点击观看即可