一.这里我主要是播放m3u8的视频,有两款比较好的插件,swise和ckpalyer,我介绍的是ckplayer,这是在pc端播放的,而且是须要flash支持的,不过如今的最新浏览器都是默认安装的html
二.http://www.ckplayer.com/down/(ckpalyer下载地址)浏览器
三.个人调用方式是官方的基本调用方法,能够看下官方的调用文档,接下来介绍俩种调用方法,一种是直接输出播放器的,这个不能使用layui弹出层的,另外一种也是输出播放器,但能够使用layui弹出层的app
四.(第一种方法)记住这种方法必定要ckplayer.js,这个看你放的路径去引用,这个我是点击图片时触发这个事件,你能够加载这个页面就加载这个播放器,看需求ide
//这是html代码ui
<div id="video" style="color: red;"></div>
//这是js代码
<script src="<?=SITE_BASE_URL."/ckplayerX/ckplayer/ckplayer.js"?>"></script>
<script>
//播放m3u8视频
function showPlayer(src,id){
//player
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',
debug:true,//开启调试模式
flashplayer: false, //是否须要强制使用flashplayer
video: src //这是你的视频地址,能够是MP4和m3u8
};
var player = new ckplayer(videoObject);
}
五.(第二种方法)能够用弹出层打开的播放器spa
代码说明:插件
embed:是标准的html代码。用来加载插件。debug
src:插件地址,这里则指播放器地址调试
flashvars:传递到播放器里的各个参数,好比视频地址,是否默认播放等视频
width:播放器的宽
height:播放器的高,不支持百分比
这种方法你能够直接放html代码里,也能够放js代码里,