使用ckplayer外掛實現針對瀏覽器不同版本實現視訊播放
阿新 • • 發佈：2019-02-11
現在一般實現網頁播放視訊功能，常用的就是H5的video標籤，方便快捷，配置簡單，但也有其不足處，因其屬於H5標籤，故有些低版本的瀏覽器就無法使用該標籤，為了解決相容性的問題，這裡我就使用ckplayer外掛來實現視訊播放功能，該外掛也提供了豐富的IPA,可以簡單方便的呼叫。
1.準備外掛，可以去官網下載，我這裡下載的是ckplayer6.5 ,我已將該外掛上傳至資源中心，需要的可以去下載。去下載
2.下載完成後，解壓的檔案目錄結構如下，我們可以將ckplayer目錄拷貝紙專案根目錄下，同時將crossdomain.xml檔案一同拷貝紙專案根目錄下，解決部分瀏覽器不相容問題：
3.在html頁面定義播放器容器，具體程式碼如下：
<!doctype html> <html> <head> <title>ckplayer</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <div> <div id="video"></div> </div> </body> </html>
4.配置ckplayer相關引數，初始化播放器：
<script type="text/javascript"> var flashvars={ f:'http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4',//視訊地址 a:'',//呼叫時的引數，只有當s>0的時候有效 s:'0',//呼叫方式，0=普通方法（f=視訊地址），1=網址形式,2=xml形式，3=swf形式(s>0時f=網址，配合a來完成對地址的組裝) c:'0',//是否讀取文字配置,0不是，1是 x:'',//呼叫配置檔案路徑，只有在c=1時使用。預設為空呼叫的是ckplayer.xml i:'images/vedio_loading.png',//初始圖片地址 d:'',//暫停時播放的廣告，swf/圖片,多個用豎線隔開，圖片要加連結地址，沒有的時候留空就行 u:'',//暫停時如果是圖片的話，加個連結地址 l:'',//前置廣告，swf/圖片/視訊，多個用豎線隔開，圖片和視訊要加連結地址 r:'',//前置廣告的連結地址，多個用豎線隔開，沒有的留空 t:'',//視訊開始前播放swf/圖片時的時間，多個用豎線隔開 y:'',//這裡是使用網址形式呼叫廣告地址時使用，前提是要設定l的值為空 z:'',//緩衝廣告，只能放一個，swf格式 e:'2',//視訊結束後的動作，0是呼叫js函式，1是迴圈播放，2是暫停播放並且不呼叫廣告，3是呼叫視訊推薦列表的外掛，4是清除視訊流並呼叫js功能和1差不多，5是暫停播放並且呼叫暫停廣告 v:'80',//預設音量，0-100之間 p:'1',//視訊預設0是暫停，1是播放，2是不載入視訊 h:'3',//播放http視訊流時採用何種拖動方法，=0不使用任意拖動，=1是使用按關鍵幀，=2是按時間點，=3是自動判斷按什麼(如果視訊格式是.mp4就按關鍵幀，.flv就按關鍵時間)，=4也是自動判斷(只要包含字元mp4就按mp4來，只要包含字元flv就按flv來) q:'',//視訊流拖動時參考函式，預設是start m:'',//讓該引數為一個連結地址時，單擊播放器將跳轉到該地址 o:'',//當p=2時，可以設定視訊的時間，單位，秒 w:'',//當p=2時，可以設定視訊的總位元組數 g:'',//視訊直接g秒開始播放 j:'',//跳過片尾功能，j>0則從播放多少時間後跳到結束，<0則總總時間-該值的絕對值時跳到結束 k:'',//提示點時間，如 30|60滑鼠經過進度欄30秒，60秒會提示n指定的相應的文字 n:'',//提示點文字，跟k配合使用，如 提示點1|提示點2 wh:'',//寬高比，可以自己定義視訊的寬高或寬高比如：wh:'4:3',或wh:'1080:720' lv:'0',//是否是直播流，=1則鎖定進度欄 loaded:'loadedHandler',//當播放器載入完成後傳送該js函式loaded //呼叫播放器的所有引數列表結束 //以下為自定義的播放器引數用來在外掛裡引用的 //my_url:encodeURIComponent(window.location.href)//本頁面地址 //呼叫自定義播放器引數結束 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這裡定義播放器的其它引數如背景色（跟flashvars中的b不同），是否支援全屏，是否支援互動 if(CKobject.isHTML5()){ var video=['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg']; //'flash播放器檔案路徑','容器ID','播放器的ID','寬度，可以是百分比','高度，可以是百分比','優先呼叫設定，false=優先呼叫flash播放器，true=優先呼叫HTML5播放器' CKobject.embed('ckplayer/ckplayer.swf','video','ckplayer_a1','800px','500px',true,flashvars,video,params); }else{ //此處應該將視訊字尾變為flv，使用flash播放 var video=['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.flv']; //'flash播放器檔案路徑','容器ID','播放器的ID','寬度，可以是百分比','高度，可以是百分比','優先呼叫設定，false=優先呼叫flash播放器，true=優先呼叫HTML5播放器' CKobject.embed('ckplayer/ckplayer.swf','video','ckplayer_a1','800px','500px',false,flashvars,video,params); } //新增監聽視訊元資料 CKobject.getObjectById('ckplayer_a1').addListener('loadedmetadata',loadedmetadata); CKobject.getObjectById('ckplayer_a1').addListener('play',playHandler); //視訊播放監聽事件 function playHandler(){ alert("播放了"); } //播放器載入監聽事件 function loadedHandler(){ if(CKobject.getObjectById('ckplayer_a1').getType()){ alert('初始化HTML5播放模組'); }else{ alert('初始化Flash播放模組'); } } //視訊元資料載入監聽事件 function loadedmetadata(){ //獲取視訊的元資料 var metaData = CKobject.getObjectById('ckplayer_a1').getStatus(); if(parseInt(metaData['totaltime']) > 0){ }else{ console.log("狀態：未正確獲取到元資料資訊"); } } </script>