終於有一點空閑時間整理一下一些小插件,最近經常用到優酷、騰訊的視頻播放器進行視頻播放,所以整理一下以後方便使用。優酷:優酷的視頻播放器介面連接為:http://open.youku.com/tools/ 裡面已經有教詳細的說明瞭。在這裡也做一些說明吧:導入js文件: 1 <script type=" ...
終於有一點空閑時間整理一下一些小插件,最近經常用到優酷、騰訊的視頻播放器進行視頻播放,所以整理一下以後方便使用。
優酷:
優酷的視頻播放器介面連接為:http://open.youku.com/tools/ 裡面已經有教詳細的說明瞭。
在這裡也做一些說明吧:
導入js文件:
1 <script type="text/javascript" src="http://player.youku.com/jsapi">
調用:
1 <script type="text/javascript"> 2 player = new YKU.Player('youkuplayer',{ 3 styleid: '0', //炫彩播放器樣式 0-9 4 client_id: '', //優酷開放平臺創建應用的client_id 這個是必須的登錄優酷在後臺創建一個應用就有。 5 vid: '替換成優酷視頻ID', //視頻ID 這個視頻id就是優酷視頻連接後面的字元串,這個應該懂吧。 6 autoplay: true, //是否自動播放視頻 7 show_related: true, //播放完成是否顯示相關視頻 8 embsig: '', //嵌入式播放器簽名(非網站類應用必須設置) 9 password: 'md5('播放密碼'+client_id)', //免密碼播放 10 events:{ 11 onPlayerReady: function(){ /*your code*/ }, //播放器準備就緒調用 12 onPlayStart: function(){ /*your code*/ }, //播放器開始播放時調用 13 onPlayEnd: function(){ /*your code*/ } //播放器結束播放時調用 14 } 15 }); 16 function playVideo(){ 17 player.playVideo(); //播放 18 } 19 function pauseVideo(){ 20 player.pauseVideo(); //暫停 21 } 22 function seekTo(s){ 23 player.seekTo(s);//定位至指定時間 24 } 25 function currentTime(){ 26 return player.currentTime();//當前播放時間 27 } 28 </script>
騰訊:
騰訊的視頻播放器介面連接一時沒找著,哪位童鞋知道的麻煩發下,謝謝。
導入js文件:
1 <script type="text/javascript" src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset='utf-8'></script>
調用:
1 <script type="text/javascript"> 2 var video = new tvp.VideoInfo(); //初始化視頻對象 3 video.setVid(視頻id); //向視頻對象傳入視頻vid ,這個是點播的時候使用 4 video.setChannelId(直播頻道id); //向視頻對象傳入直播頻道id ,這個是直播的時候使用 5 6 /*點播跟直播的區別主要是: 7 1. 點播是通過video.setVid(vid); 而直播是通過video.setChannelId(cnlid); 設置直播id 8 2. 點播需要player.addParam('type','2');或者省略,因為預設播放器為點播狀態;直播必須通過player.addParam('type','1');設置播放器為直播狀態,。 9 */ 10 11 var player = new tvp.Player(width, height); //初始化播放器對象並設置寬、高 12 player.setCurVideo(video); //設置播放器初始化時載入的視頻 13 player.addParam('type','1'); //設置播放器為直播狀態,1表示直播,2表示點播,預設為2 14 player.addParam("wmode","transparent"); //設置透明化,不設置時,視頻為最高級,總是處於頁面的最上面,此時設置z-index無效 15 player.addParam('autoplay',false); //是否自動播放 16 player.addParam('pic',''); //播放器預設圖,當autoplay=0時有效;不傳入則使用視頻截圖 17 player.addParam('showend',0) //結束時是否有廣告 18 player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"); //flash播放器皮膚;不傳入則使用預設皮膚;點播狀態下可選值(註意僅限點播,直播無效),這裡是使視頻視窗為小視窗 19 player.addParam("loadingswf", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/web_small_loading.swf"); //載入視頻時的swf動畫; 不傳入則使用預設樣式 20 player.write(容器id); //輸出播放器 21 </script>
騰訊的視頻播放器介面參數還有其他的。這裡沒有全部列舉,有興趣的可以自行百度,很容易找到,這裡只列舉了部分本人項目中常用的。
因為平時項目中經常用到,所以針對優酷和騰訊的視頻播放器寫了一個小小的插件,為了方便裡面使用了jQuery,所以要導入jQuery才行。要原生的只要把裡面的幾個方法改成原生的即可。插件放在GitHub 里。有興趣的可以去看看 :https://github.com/zhouxitian