一.這裏我主要是播放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代碼裏,