ckplayer是個免費,小巧,功能強大的視頻播放器,前段時間有個項目需要做個收費視頻播放的功能,於是就用了ck,目前項目已經弄完,完美支持pc和手機端的播放,重要的是可以支持清晰度切換,最后加了個是否購買權限的功能,其實總體來說開發難度較小,如果說有難度的話還是要在於處理視頻安全性上下些功夫,加密視頻地址,加密視頻名稱這些,防止拔取鏈接之類。話不多說代碼走起:
1,首先做些准備工作,在頁面構造這個播放器之前需要引入js,以及播放器的相關文件 下載 傳送門:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!--播放器核心包--><script type="text/javascript" src="js/player/ckplayer.js"></script>
<!--播放器關燈插件--><script type="text/javascript" src="js/offlights.js"></script>
2,准備工作做好后,頁面開始渲染播放器,進行交互,如下,配置過程有什么疑問可以直接看這個 Ckplayer手冊:
<script type="text/javascript"> function loadedHandler(){ ckmarqueeadv(); } var _nn=0; function ckmarqueeadv(){ str = '{a target="_blank" href="http://www.bieanju.com"}{font color="#00EEF0" size="12"}別安駒吉他學院溫馨提示:您當前正在學習吉他譜《{$video_info.title}》目前已有{$video_info.watch}人學習過此視頻!http://www.bieanju.com/{/font}{/a}' return str; } function playerstop(){ var html ='<div class="Adver"><embed type="application/x-shockwave-flash" id="over" src="js/player/playover.swf" height="240" width="560" wmode="opaque"></embed></div>'; $(".Advertisement").html(html); } function player(){ $(".Advertisement").html(""); } function bajplayer(){ var flashvars={ f:"獲取視頻信息地址?getVideoInfoid={$video_info.id}",//視頻地址 a:'{$video_info.id}',//調用時的參數,只有當s>0的時候有效 s:'2',//調用方式,0=普通方法(f=視頻地址),1=網址形式,2=xml形式,3=swf形式(s>0時f=網址,配合a來完成對地址的組裝) c:'0',//是否讀取文本配置,0不是,1是 x:'',//調用配置文件路徑,只有在c=1時使用。默認為空調用的是ckplayer.xml i:'http://www.ckplayer.com/images/loadimg3.jpg',//初始圖片地址 d:'/player/playpause.swf',//暫停時播放的廣告,swf/圖片,多個用豎線隔開,圖片要加鏈接地址,沒有的時候留空就行 u:'',//暫停時如果是圖片的話,加個鏈接地址 r:'',//前置廣告的鏈接地址,多個用豎線隔開,沒有的留空 t:'10|10',//視頻開始前播放swf/圖片時的時間,多個用豎線隔開 y:'',//這里是使用網址形式調用廣告地址時使用,前提是要設置l的值為空 z:'http://www.ckplayer.com/down/buffer.swf',//緩沖廣告,只能放一個,swf格式 e:'0',//視頻結束后的動作,0是調用js函數,1是循環播放,2是暫停播放並且不調用廣告,3是調用視頻推薦列表的插件,4是清除視頻流並調用js功能和1差不多,5是暫停播放並且調用暫停廣告 v:'80',//默認音量,0-100之間 p:'1',//視頻默認0是暫停,1是播放,2是不加載視頻 h:'4',//播放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鼠標經過進度欄30秒,60秒會提示n指定的相應的文字 n:'這是提示點的功能,如果不需要刪除k和n的值|提示點測試60秒',//提示點文字,跟k配合使用,如 提示點1|提示點2 wh:'',//寬高比,可以自己定義視頻的寬高或寬高比如:wh:'4:3',或wh:'1080:720' lv:'0',//是否是直播流,=1則鎖定進度欄 loaded:'loadedHandler',//當播放器加載完成后發送該js函數loaded my_url:encodeURIComponent(window.location.href)//本頁面地址 }; /* 自動處理播放器寬高 */ var getwidth = $(window).width(); var getheight = $(window).height(); var w = getwidth - 361 < 425 ? 425 : getwidth - 340; var h = w*0.75 > 656 ? w*0.75-140 : (w*0.75)+50; if(h > (getheight-100)){ h = getheight-115; } setRightHeight(); var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這里定義播放器的其它參數如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互 CKobject.embedSWF('js/player/player.swf','player','ckplayer_a1',w,h,flashvars,params); } //開關燈 var box = new LightBox(); function closelights(){ //關燈 box.Show(); CKobject._K_('zcplayer').style.width='940px'; CKobject._K_('zcplayer').style.height='550px'; CKobject.getObjectById('ckplayer_a1').width=940; CKobject.getObjectById('ckplayer_a1').height=550; } //開燈 function openlights(){ box.Close(); CKobject._K_('zcplayer').style.width='600px'; CKobject._K_('zcplayer').style.height='400px'; CKobject.getObjectById('ckplayer_a1').width=600; CKobject.getObjectById('ckplayer_a1').height=400; } function changePrompt(){ CKobject.getObjectById('ckplayer_a1').promptUnload();//卸載掉目前的 CKobject.getObjectById('ckplayer_a1').changeFlashvars('{k->10|20|30}{n->重設提示點一|重設提示點二|重設提示點三}'); CKobject.getObjectById('ckplayer_a1').promptLoad();//重新加載 } function setRightHeight(){ var x = $(window).height()-7; // $("#edu_lesson_right_pare").css('height',x-45+'px'); $(".Scroller-Container").css('height',x-45+'px'); $("#edu_less_right").css('height',x-45+'px'); $(".vs_course_main_r").css('height',x-45+'px'); $(".vs_course_main").css('height',x-45+'px'); } $(function(){ $('#over').click(function(){ alert('asdf'); }) }) </script>
3,完成第一和第二步后下一步就是前段頁面的顯示后后台的視頻信息處理:
前台顯示
<body onload="zcplayer();"> <div id="ckplayer"></div> </body>
后台程序處理
/* 視頻提取 */ public function getVideoInfo() { $info = D('VideoView')->details($this->_get('id')); $pat = $info[id]; header("Content-Type:text/html; charset=utf-8"); header('Content-Type:application/xml; charset=utf-8'); $sitemap .= "<?xml version='1.0' encoding='UTF-8'?>"; $sitemap .= "<player>"; // $sitemap .= "<DengBox>"; $sitemap .= "<flashvars>{k->}{n->}}{h->2}{a->$pat}{defa->$info[id]|$info[id]|$info[id]}{deft->標清|高清|超清}{f->".__URL__."/getVideoInfo?id=[".'$pat'."]}}</flashvars>"; $sitemap .= "<video><file><![CDATA[/Uploads/video/".$info['video_name']."]]></file><size>".($info['filesize']*1024)."</size><seconds>".$info['time']."</seconds></video>"; $sitemap .= "</player>"; // $sitemap .= "</DengBox>"; echo $sitemap; }