隨着網速的不斷提供,下載慢慢成為一種過去式,在線觀看越來越常規。現在像優酷,土豆,奇異這種視頻網站,都是可以在線觀看的,並且是不需要的安裝任何插件的。但是大網站,由於版權的問題,影片資源是非常少的。在互聯網上,比較自由,資源比較多的就應該是快播了。還有就是這兩年在才出來的百度影音,由於含着金鑰匙出生,所以一路風聲水起,迅速打下一片江山。
先將如何將百度影音播放器嵌入網頁,這個主要是參考百度影音的官方網頁“網頁調用” 部分的資料。
百度影音
-----------------------------------------------------------------------------------------------------------------------------------------------
一、使用平台:
播放器使用COM組件開發技術,能在用户客户端瀏覽器或者支持COM組件的開發程序中使用。
二、使用方法:
1、在你的網頁適當位置(即想讓用户觀看視頻的位置)插入如下代碼:
<object classid="clsid:02E2D748-67F8-48B4-8AB4-0A085374BB99" width="500" height="400" id="BaiduPlayer" name="BaiduPlayer">
內容解釋
1、object:HTML語言中對COM插件的統一使用方式。
2、classid:HTML語言中對WEB插件的調用語句。
3、clsid: 02E2D748-67F8-48B4-8AB4-0A085374BB99:BaiduPlayer插件類型ID值。
4、width/height 在網頁中顯示的該插件寬與高度。
5、id/ name/ 是要控制該BaiduPlayer插件的名字。BaiduPlayer可以更改成你喜歡並且容易記住的名字。
如果不能下載該插件安裝包。請用户自行去 http://player.baidu.com下載安裝
三、百度影音 插件最簡使用方法:
<object classid="clsid:02E2D748-67F8-48B4-8AB4-0A085374BB99" width="500" height="400" id="BaiduPlayer" name="BaiduPlayer" onError=if(window.confirm('請您先安裝百度影音軟件,然後刷新本頁才可以正常播放.')){window.open('http://player.baidu.com')}else{self.location='http://player.baidu.com'}><PARAM NAME='URL' VALUE='此處請替換成百度影音播放鏈接地址'><PARAM NAME='Autoplay' VALUE='1'></object>
四、百度影音 接口使用方法
1、屬性接口:
1)URL:播放文件地址。URL值格式:bdhd://文件大小|文件hash值|文件名
如:bdhd://301568740|FCDAC749BD2BB0C009A32ABB4AF428D7|宮鎖心玉01.rmvb
2) AutoPlay:是否自動播放。0:不自動播放 1:自動播放。默認是不自動播放。
< PARAM NAME='AutoPlay' VALUE='0'>
3) LastWebPage:播放器上面的上一集按鈕
< PARAM NAME='LastWebPage' VALUE='http://player.baidu.com/#1'>
4) NextWebPage:播放器上面的下一集按鈕(播放當前節目後自動導航到下一集或者其它網頁的功能)
< PARAM NAME='NextWebPage' VALUE='http://player.baidu.com/#2'>
5)NextCacheUrl:自動緩衝下一集的播放文件地址。URL值格式:bdhd://文件大小|文件hash值|文件名
如:bdhd://216615163|5E5F4843ED84AEA1812335413084E718|宮鎖心玉02.rmvb
2、方法接口:
1)播放/暫停
Play():
2)停止
Stop():
3)全屏
FullScreen():
4) 得到版本號
GetVersion():
javastricpt腳本語言:
var pos = BaiduPlayer.GetVersion();
5) 得到是否全屏
IsFullScreen():
javastricpt腳本語言:
var pos = BaiduPlayer.IsFullScreen();
6) 得到是否暫停
IsPause();
javastricpt腳本語言:
var pos = BaiduPlayer.IsPause();
7) 得到是否緩衝中
IsBuffing();
javastricpt腳本語言:
var pos = BaiduPlayer.IsBuffing();
8) 得到是否播放中
IsPlaying();
javastricpt腳本語言:
var pos = BaiduPlayer.IsPlaying();
五、百度影音 (提示下載,緩衝廣告,暫停廣告)綜合使用實例推薦
原理:通過JS的setInterval函數定時檢測播放器狀態,來控制是否顯示廣告
<script language="javascript">
var BdPlayer = new Array();
BdPlayer['time'] = 8;//緩衝廣告展示時間(如果設為0,則根據緩衝進度自動控制廣告展示時間)
BdPlayer['buffer'] = 'http://player.baidu.com/lib/show.html?buffer';//貼片廣告網頁地址
BdPlayer['pause'] = 'http://player.baidu.com/lib/show.html?pause';//暫停廣告網頁地址
BdPlayer['end'] = 'http://player.baidu.com/lib/show.html?end';//影片播放完成後加載的廣告
BdPlayer['tn'] = '12345678';//播放器下載地址渠道號
BdPlayer['width'] = 800;//播放器寬度(只能為數字)
BdPlayer['height'] = 550;//播放器高度(只能為數字)
BdPlayer['showclient'] = 1;//是否顯示拉起拖盤按鈕(1為顯示 0為隱藏)
BdPlayer['url'] = 'bdhd://92448883|E828039EFE786AD7CFB0E7E4222C96F6|百度新首頁.flv';//當前播放任務播放地址
BdPlayer['nextcacheurl'] = 'bdhd://258153089|948E0EB38A2DFA1AF7D1B488E86AFFDD|還珠格格之燕兒翩翩飛02.HDTV.rmvb';//下一集播放地址(沒有請留空)
BdPlayer['lastwebpage'] = 'http://player.baidu.com/lib/eg.html?1';//上一集網頁地址(沒有請留空)
BdPlayer['nextwebpage'] = 'http://player.baidu.com/lib/eg.html?2';//下一集網頁地址(沒有請留空)
</script>
<script language="javascript" src="http://php.player.baidu.com/bdplayer/player.js" charset="utf-8"></script>
百度影音的播放器調用還是非常簡單的,並且官方提供的js代碼也非常好用,通過簡單的配置就可以實現:緩衝設置,暫停,加載廣告設置,播放器大小設置,播放上一頁下一頁設置等等。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
快播
快播其實出現的比百度影音找很多,也有一大批忠實的用户。我記得最早給我的感覺是,快播好像專門是播成人影片的,當然這是個誤會。
快播的網頁調用也不難,就是添加一個object 對象,這個相對簡陋,而且兼容性差,並且對於是否已經安裝快播的判斷也不是很方便。
Qvod Player插件最簡使用方法:
在你的網頁適當位置源代碼中插入如下代碼,當用户打開該網頁時,即可完成影片文件的播放功能:
1. <object classid="clsid:F3D0D36F-23F8-4682-A195-74C92B03D4AF" width="500" height="400" id="QvodPlayer" name="QvodPlayer" onError=if(window.confirm('請您先安裝QvodPlayer軟件,然後刷新本頁才可以正常播放.')){window.open('http://www.qvod.com/download.htm')}else{self.location='http://www.qvod.com/'}>
2. <PARAM NAME='URL' VALUE='此處請替換成QVOD播放鏈接地址'>
3. <PARAM NAME='Autoplay' VALUE='1'>
4. <embed URL='此處請替換成QVOD播放鏈接地址' type='application/qvod-plugin'></embed>
5. </object>
複製代碼
如何兼容谷歌等非IE瀏覽器(支持快播4.2及以上版本)
1.object標籤變化
網站對谷歌瀏覽器支持,必須在原來的object標籤中添加embed標籤,例如下面紅色部分:
<object classid='clsid:F3D0D36F-23F8-4682-A195-74C92B03D4AF' id='QvodPlayer' width='600' height='480'>
< PARAM NAME='URL' VALUE='qvod://167960408|8F81A848CBEB17F4D4850A13DC781FC803181594|鹿鼎記(陳小春版)-01.rmvb|'>
< PARAM NAME='Showcontrol' VALUE=1>
< PARAM NAME='AutoPlay' VALUE='1'>
<embed URL='qvod://167960408|8F81A848CBEB17F4D4850A13DC781FC803181594|鹿鼎記(陳小春版)-01.rmvb|' type='application/qvod-plugin'></embed>
</object>
embed標籤不僅支持URL參數,也同樣支持object標籤支持的Autoplay,Mute,Showcontrol,Volume,NumLoop,SoundTrack,NextWebPage,QvodAdUrl。在object中初始化的參數,必須在embed中傳入才能起效。
為了簡化快播的嵌入,以及完善功能,有人開發了jquery插件。快播網頁支持,jquery插件,支持自動全屏,兼容主流瀏覽器,未安裝提示頁面美化。
該插件,主要功能:
1. 根據用户當前播放頁是否是全屏狀態,自動設置跳轉後的下一集是否全屏
設置自動全屏,有一個過程,實現的邏輯:
1).用户打開網頁觀看影片之後,會有一個計時器在10s後開始檢測用户是否是全屏,如果是全屏狀態,將會記錄到cookie。
2).在用户打開網頁之後,同時還有一個計時器將在20s之後開始檢測用户當前狀態是否是全屏,如果不是,也保存到cookie。
3).每次打開新的播放頁,程序都先讀取cookie中得記錄,如果記錄中是全屏狀態,新頁面也將自動全屏。
2. 加入了預緩衝下一集的功能
3. 所有參數,站長都能自定義
1.
2. var url = "qvod://69999035|DBE1429630008370A3F01A38FC0C741ED648E9C0|香格里拉01.rmvb|";
3. //下一集資源地址
4. var nextqvod = "qvod://530121830|7A77E443E9FB1E119E1BC24FB5389DB7572555D5|sohu_B+偵探(1).mp4|";
5. //下一集播放頁面 播放結束自動跳轉到該頁面
6. var nextpage = "http://localhost/jquery/demo2.html";
7. //調用播放器
8. $("#player").qvod({PlayerArea:"player", width:"700", height:"500", AutoPlay:"true",QvodUrl:url,NextWebPage:nextpage, NextQvod:nextqvod});
9. /*參數説明*/
10. //width: "500", /*播放器的寬度*/
11. //height: "400", /*播發器的高度*/
12. //AutoPlay: "true", /*自動播放 默認開啓*/
13. //FullScreen: "false", /*自動全屏 默認關閉*/
14. //PlayerArea: "", /*播放器插入的位置,標籤的id屬性*/
15. //QvodUrl: "", /*本集資源地址*/
16. //NextWebPage: "", /*下一集播放頁地址*/
17. //NextQvod: "", /*下一集資源地址,預緩衝時使用*/
18. //ShowControl: "1", /*是否顯示控制欄,0=不顯示 1= 顯示 默認參數是顯示*/
19. //AdUrl: "http://buffer-ad.qvod.com/" /*緩衝廣告 注:3.0.0.58及將來發布的客户端版本才支持*/
有了這個插件,就很好的解決了未安裝提示的問題,廣告添加也變得非常簡單了。
上面的地址包含了很多的電影資源,隨便點一個就可以進入播放頁面,通過瀏覽器查看源代碼的功能就可以看到實用的代碼了。