开始
M3U8是啥我这里就不说了，网上自己查下
1、下载插件
插件地址:http://www.52player.com/videoplayer/2014/121751.html
2、整理插件
旁边这张图是我这边整理之后的目录结构。
hls.min.js和HLS.swf我都没改过。
start.png我换了一个图片，名称还是一样。
HLSPlayer.swf我这边修改过，你不修改也一样，不修改在播放的右下角有一个灰鲸的标识，我这里把这个标识去掉了。
demoHLS.html我修改过。内容如下：
<!doctype html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
<meta charset="utf-8">
<title>纯HLS(m3u8)</title>
</head>
<body>
<!--HLSPlayer代码开始-->
<div class="video" id="HLSPlayer">
<SCRIPT LANGUAGE=JavaScript>
/*
* HLSPlayer参数应用=========================<br>
* @Contact QQ:261532593
* @param {Object} vID ID
* @param {Object} vWidth 播放器宽度设置
* @param {Object} vHeight 播放器宽度设置
* @param {Object} vPlayer 播放器文件
* @param {Object} vHLSset HLS配置
* @param {Object} vPic 视频缩略图
* @param {Object} vCssurl 移动端CSS应用文件
* @param {Object} vHLSurl HLS(m3u8)地址
* ==========================================
*/
var vID = "";
var vWidth = "100%"; //播放器宽度设置
var vHeight = 400; //播放器宽度设置
var vPlayer = "HLSPlayer.swf?v=1.5"; //播放器文件
var vHLSset = "HLS.swf"; //HLS配置
var vPic = "images/start.png"; //视频缩略图
var vCssurl = ""; //移动端CSS应用文件
//HLS(m3u8)地址
var vHLSurl = "这是你们的M3U8地址，没有的自己去网上找一个也可以";
</SCRIPT>
<script type="text/javascript" src="js/hls.min.js?rand=20141217"></script>
</div>
</body>
</html>
3、放在tomcat容器中，启动之后就可以正常访问了。
下面图片是我这边的预览效果,点击播放就可以正常播放了。
结束
注:下面是这个案例的下载地址:https://download.csdn.net/download/liguoqingxjxcc/10600179，单独私聊我发给你也可以。
结尾:仅供自己学习,记录问题和参考,若有带来误解和不便请见谅,共勉！