一.這里我主要是播放m3u8的視頻,有兩款比較好的插件,swise和ckpalyer,我介紹的是ckplayer,這是在pc端播放的,並且是需要flash支持的,不過現在的最新瀏覽器都是默認安裝的
二.http://www.ckplayer.com/down/(ckpalyer下載地址)
三.我的調用方式是官方的基本調用方法,可以看下官方的調用文檔,接下來介紹倆種調用方法,一種是直接輸出播放器的,這個不能使用layui彈出層的,另一種也是輸出播放器,但可以使用layui彈出層的
四.(第一種方法)記住這種方法一定要ckplayer.js,這個看你放的路徑去引用,這個我是點擊圖片時觸發這個事件,你可以加載這個頁面就加載這個播放器,看需求
//這是html代碼
<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);
}
五.(第二種方法)可以用彈出層打開的播放器
- <embed src="http://www.ckplayer.com/ckplayer/x/ckplayer.swf" flashvars="video=視頻地址" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"></embed>
-
代碼說明:
embed:是標准的html代碼。用來加載插件。
src:插件地址,這里則指播放器地址
flashvars:傳遞到播放器里的各個參數,比如視頻地址,是否默認播放等
width:播放器的寬
height:播放器的高,不支持百分比
這種方法你可以直接放html代碼里,也可以放js代碼里,