PHP與視訊外掛功能實現
阿新 • • 發佈：2018-12-10
php與視訊播放器外掛的功能，說白了就是前端是播放器的外掛，直接呼叫後端傳遞過來的播放地址，還有其他的一些資訊，比如封面圖面，名稱，播放時間，地址等等。這些需要在後臺把這些封裝起來，可以儲存在資料庫裡，方便呼叫。以上就是思路。想起來是不是很簡單。做起來也差不多咯。 首先，前端引入播放器外掛，這種外掛，網上推薦很多，這裡推薦：視訊播放外掛ckplayer，可以到官網下載的。下載後新增到網站根目錄。
特別提醒：解壓後不要忘了把js資料夾也新增到你的網站根目錄。這個主要是為了各瀏覽器的相容性的，如果不新增，在ie，Firefox上有可能不能用！
1，首先在頁面頭部引入： <script src="ckplayer/ckplayer.js"></script> 2，在body部分放一個div： <div style=" width:660px;margin:0 auto;"> <div id="a1"></div> </div> 3，在script中的windows.load時間裡，或者在2步驟的div後面放入一下指令碼： <script type="text/JavaScript"> var flashvars = { f: 'video/card.mp4',//視訊地址 //如果你不需要某項設定，可以直接刪除，注意var flashvars的最後一個值後面不能有逗號 a: '',//呼叫時的引數，只有當s>0的時候有效 s: '0',//呼叫方式，0=普通方法（f=視訊地址），1=網址形式,2=xml形式，3=swf形式(s>0時f=網址，配合a來完成對地址的組裝) c: '0',//是否讀取文字配置,0不是，1是 x: '',//呼叫xml風格路徑，為空的話將使用ckplayer.js的配置 i: 'video/1.jpg',//初始圖片地址 d: 'video/1.jpg',//暫停時播放的廣告，swf/圖片,多個用豎線隔開，圖片要加連結地址，沒有的時候留空就行 u: 'http://www.vqisoft.com/',//暫停時如果是圖片的話，加個連結地址 l: '',//前置廣告，swf/圖片/視訊，多個用豎線隔開，圖片和視訊要加連結地址 r: '',//前置廣告的連結地址，多個用豎線隔開，沒有的留空 t: '10|10',//視訊開始前播放swf/圖片時的時間，多個用豎線隔開 y: '',//這裡是使用網址形式呼叫廣告地址時使用，前提是要設定l的值為空 z: 'http://www.ckplayer.com/down/buffer.swf',//緩衝廣告，只能放一個，swf格式 e: '2',//視訊結束後的動作，0是呼叫js函式，1是迴圈播放，2是暫停播放並且不呼叫廣告，3是呼叫視訊推薦列表的外掛，4是清除視訊流並呼叫js功能和1差不多，5是暫停播放並且呼叫暫停廣告 v: '80',//預設音量，0-100之間 p: '0',//視訊預設0是暫停，1是播放 h: '0',//播放http視訊流時採用何種拖動方法，=0不使用任意拖動，=1是使用按關鍵幀，=2是按時間點，=3是自動判斷按什麼(如果視訊格式是.mp4就按關鍵幀，.flv就按關鍵時間)，=4也是自動判斷(只要包含字元mp4就按mp4來，只要包含字元flv就按flv來) q: '',//視訊流拖動時參考函式，預設是start m: '0',//預設是否採用點選播放按鈕後再載入視訊，0不是，1是,設定成1時不要有前置廣告 o: '',//當m=1時，可以設定視訊的時間，單位，秒 w: '',//當m=1時，可以設定視訊的總位元組數 g: '',//視訊直接g秒開始播放 j: '',//視訊提前j秒結束 k: '',//提示點時間，如 30|60滑鼠經過進度欄30秒，60秒會提示n指定的相應的文字 n: '',//提示點文字，跟k配合使用，如 提示點1|提示點2 wh: '',//這是6.2新增加的寬高比，可以自己定義視訊的寬高或寬高比如：wh:'4:3',或wh:'1080:720' ct: '2',//6.2新增加的引數，主要針對有些視訊拖動時時間出錯的修正引數，預設是2，自動修正，1是強制修正，0是強制不修正 //呼叫播放器的所有引數列表結束 //以下為自定義的播放器引數用來在外掛裡引用的 my_url: encodeURIComponent(window.location.href)//本頁面地址 //呼叫自定義播放器引數結束 }; var params = { bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always' };//這裡定義播放器的其它引數如背景色（跟flashvars中的b不同），是否支援全屏，是否支援互動 var attributes = { id: 'ckplayer_a1', name: 'ckplayer_a1', menu: 'false' }; //下面一行是呼叫播放器了，括號裡的引數含義：（播放器檔案，要顯示在的div容器，寬，高，需要flash的版本，當用戶沒有該版本的提示，載入初始化引數，載入設定引數如背景，載入attributes引數，主要用來設定播放器的id） CKobject.embedSWF('ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '650', '380', flashvars, params); var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4', 'http://www.ckplayer.com/webm/0.webm->video/webm', 'http://www.ckplayer.com/webm/0.ogv->video/ogg']; var support = ['iPad', 'iPhone', 'iOS', 'Android+false', 'msie10+false'];//預設的在ipad,iphone,ios裝置中用HTML5播放,android,ie10上沒有安裝flash的也呼叫html5 CKobject.embedHTML5('video', 'ckplayer_a1', 600, 400, video, flashvars, support); </script> 呼叫HTML5播放器程式碼 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ckplayer只調用html5播放器</title> </head> <body> <div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ p:1, e:1, hl:'http://movie.ks.js.cn/flv/other/1_0.mp4', ht:'20', hr:'http://www.ckplayer.com' }; var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg']; var support=['all']; CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support); </script> </body> </html> 可見上面的例子裡，播放器需要的資料都是靜態填上的，如果需要用到PHP，也就是後端，其實就是直接傳遞，渲染資料，前端的flashvars所需要的資料，都可以在後端儲存後動態呼叫。 <?php public function flashvars($input) { if(empty($input)){ throw new Exception("引數不存在", 1); } //獲取資料前提是已經在後臺設定好了資料，這裡直接獲取 $result = "加入這裡是從資料表裡取出資料"; $data = [ 'p' => result['p'], 'e' => result['e'], 'hl' => result['hl'], 'ht' => result['ht'], 'hr' => result['hr'], 'video' => result['video'], //video這裡可以有多個播放連結地址的 ]; /*p:1, e:1, hl:'http://movie.ks.js.cn/flv/other/1_0.mp4', ht:'20', hr:'http://www.ckplayer.com' var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg']; var support=['all'];*/ //接下來就是渲染到檢視咯 return ('/view.html',$data); //這裡只是做示例，用框架的得用框架的語法來！ }