隨着網速的不斷提供,下載慢慢成為一種過去式,在線觀看越來越常規。現在像優酷,土豆,奇異這種視頻網站,都是可以在線觀看的,並且是不需要的安裝任何插件的。但是大網站,由於版權的問題,影片資源是非常少的。在互聯網上,比較自由,資源比較多的就應該是快播了。還有就是這兩年在才出來的百度影音,由於含着金鑰匙出生,所以一路風聲水起,迅速打下一片江山。

 

           先將如何將百度影音播放器嵌入網頁,這個主要是參考百度影音的官方網頁“網頁調用” 部分的資料。

百度影音

   -----------------------------------------------------------------------------------------------------------------------------------------------       

一、使用平台:

播放器使用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及將來發布的客户端版本才支持*/


有了這個插件,就很好的解決了未安裝提示的問題,廣告添加也變得非常簡單了。

 


上面的地址包含了很多的電影資源,隨便點一個就可以進入播放頁面,通過瀏覽器查看源代碼的功能就可以看到實用的代碼了。