h5connect.js 騰訊雲視頻點播使用指南

http://video.qcloud.com/download/docs/QVOD_Player_Web_SDK_Developer_Guide.pdf 

 

騰訊雲視頻點播服務

Web播放器SDK開發指南版本：1.3.3時間：2015.12目錄

 

1.概述

騰訊雲視頻點播播放器Web SDK解決方案，可幫助騰訊雲視頻用戶直接使用通過驗證的視頻播放能力，經過靈活的接口，快速同自有Web應用集成，以實現桌面應用播放功能。該SDK所播放的文件受限於全局防盜鏈功能定義。詳細內容請查看官網FAQ安全功能相關說明。

 

2.閱讀對象

該文檔面向考慮使用騰訊雲視頻點播播放器Web SDK進行開發並具有javascript語言基礎的開發人員。

 

3.準備

·註冊騰訊雲點播並上傳視頻

·頁面引入初始化腳本

< script src = "http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js"

charset = "utf-8" > < /script>

注意，播放頁面須要掛 ip 或域名訪問，如若直接打開本地靜態頁面將沒法播放

 

4. 開始 API 使用

 

4.1. 方法總覽

 

l 構造類

構造播放器 qcVideo.Player

 

l 獲取參數和狀態

獲取當前音量 getVolume

獲取當前視頻總時長 getDuration

獲取當前播放位置 getCurrentTime

當前播放狀態「加載中」查詢 isSeeking

當前播放狀態「暫停中」查詢 isSuspended

當前播放狀態「播放中」查詢 isPlaying

當前播放狀態「播放結束」查詢 isPlayEnd

獲取當前播放器寬度 getWidth

獲取當前播放器高度 getHeight

獲取當前視頻清晰度 getClarity

獲取當前視頻清晰度 getAllClaritys

 

l 設置和動做

設置當前播放器寬度高度 resize

播放指定時長點 play

暫停當前播放的視頻 pause

恢復播放視頻 resume

更換視頻清晰度 setClarity

動態更換視頻 changeVideo

添加彈幕 addBarrage

關閉彈幕 closeBarrage

 

4.2. 詳細方法

 

l 構造類

qcVideo.Player(id,option,listener)

功能：播放器構造函數

參數：

1 id: String ; 必選參數 ;頁面放置播放器的容器 ID

2 option: Object; 必選參數 ;播放參數

3 listener: function; 可選參數 ; 播放狀態變化回調函數

 

示例一 (傳點播文件 ID 的方式)：

var player = new qcVideo.Player(

/ / 頁面放置播放位置的元素ID「element_id」, {

//視頻 ID (必選參數)

「file_id」: 「16092504232103514290」,

//應用 ID (必選參數)，同一個帳戶下的視頻，該參數是相同的

「app_id」: 「1251132611」,

//是否自動播放 默認值0 (0: 不自動，1: 自動播放)

「auto_play」: 「0」,

//播放器寬度，單位像素

「width」: 640,

//播放器高度，單位像素

「height」: 480,

//屏蔽全屏播放標識,默認值0 (0: 支持全屏播放,1: 禁用全屏播放)

「disable_full_screen」: 0,

//禁止拖動標識,默認值0 (0: 容許拖拽,1: 禁止拖拽)

「disable_drag」: 1,

//如視頻尺寸小於播放器尺寸，拉伸視頻至播放器大小，默認值0 (0: 不拉伸,1: 拉伸全屏)

「stretch_full」: 1,

「stop_time」: 60,

//60秒後中止播放(試看功能) , 而且觸發「playStatus」事件

「remember」: 1， //1:記住上一次未看完的時間點,下次再播放，從該時間點開始播放

//開啓防盜鏈後，能夠經過配置下面的可訪問的視頻地址，支持播放器播放；清晰度類型通

過url與後臺查出的url前綴匹配獲得「playbackRate」: 1,

加速播放,

譬如2，表示2倍速度播放，1 / 2表示慢正常速度一倍播放，注意這個值暫時只對h5播放生效;「videos」: [「http: //xxx.myqcloud.com/xxxyy_f220.m3u8?sign=xxx」

…],

//注意，下面全部的地址必須是上面對應的 file_id 的視頻資源地址，不然不會生效

「WMode」: 「window」,

//默認 window 不支持其餘頁面元素覆蓋在上面，如須要能夠

修改成opaque或其餘flash Vmode的參數值「stretch_patch」: false,

//默認爲 false ,設置爲 true 支持將開始、暫停、結束時的圖片

貼片，鋪滿播放器

}, {

//全屏/退出全屏操做 ,isFullScreen: trueà全屏 ; falseà 退出全屏

‘fullScreen’: function(isFullScreen) {

//console.debug(‘out listener isFullScreen == ‘,isFullScreen);

},

//播放狀態

‘playStatus’: function(status) {

/*status 可爲 {ready: 「播放器已準備就緒」,seeking:」搜索」,

suspended:」暫停」, playing:」播放中」 , playEnd:」播放結束」 , stop: 「試看

結束觸發」}’*/

//console.debug(‘out listener status == ‘,status);

},

//拖動播放位置變化 ； second 拖動播放的位置（單位秒）

‘dragPlay’: function(second) {

//console.debug(‘out listener dragPlay == ‘,second);

}

});

 

示例二 (傳視頻文件播放地址的方式)：

var player = new qcVideo.Player(

//頁面放置播放位置的元素 ID

「element_id」, {

//是否自動播放 默認值0 (0: 不自動，1: 自動播放)

「auto_play」: 「0」,

//播放器寬度，單位像素

「width」: 640,

//播放器高度，單位像素

「height」: 480,

//屏蔽全屏播放標識,默認值0 (0: 支持全屏播放,1: 禁用全屏播放)

「disable_full_screen」: 0,

//禁止拖動標識,默認值0 (0: 容許拖拽,1: 禁止拖拽)

「disable_drag」: 1,

//如視頻尺寸小於播放器尺寸，拉伸視頻至播放器大小，默認值0 (0: 不拉伸,1: 拉伸全屏)

「stretch_full」: 1,

「stop_time」: 60,

//60秒後中止播放(試看功能) , 而且觸發「playStatus」事件

「remember」: 1， //1:記住上一次未看完的時間點,下次再播放，從該時間點播放

//注意，下面全部的地址必須包含 duration（時長）

「WMode」: 「window」,

//默認 window 不支持其餘頁面元素覆蓋在上面，如須要能夠

修改成opaque或其餘flash Vmode的參數值「stretch_patch」: false,

//默認爲 false ,設置爲 true 支持將開始、暫停、結束時的圖片

貼片，鋪滿播放器「third_video」: {‘duration’: 20,

//視頻時長(單位秒)

//10/210->手機, 20/220->標清 , 30/230->高清 , 40/240->超清 ; (至少包含

一個地址)‘urls’: {

10: 「mp4手機視頻地址」,

20: 「mp4標清視頻地址」,

30: 「mp4高清視頻地址」,

40: 「mp4超清視頻地址」,

210: 「hls手機視頻地址」,

220: 「hls標清視頻地址」,

230: 「hls高清視頻地址」,

240: 「hls超清視頻地址」

}

}

},

{

//全屏/退出全屏操做 ,isFullScreen: trueà全屏 ; falseà 退出全屏

‘fullScreen’: function(isFullScreen) {

//console.debug(‘out listener isFullScreen == ‘,isFullScreen);

},

//播放狀態

‘playStatus’: function(status) {

/*status 可爲 {ready: 「播放器已準備就緒」,seeking:」搜索」,

suspended:」暫停」, playing:」播放中」 , playEnd:」播放結束」 , stop: 「試看

結束觸發」}’*/

//console.debug(‘out listener status == ‘,status);

},

//拖動播放位置變化 ； second 拖動播放的位置（單位秒）

‘dragPlay’: function(second) {

//console.debug(‘out listener dragPlay == ‘,second);

}

});

 

l獲取參數和狀態

getVolume()功能：取當前音量返回：Number，取值範圍（0到1）;如0.5

getDuration()功能：取當前視頻總時長返回：int，單位秒

getCurrentTime()功能：取當前播放位置返回：int，單位秒

isSeeking()功能：當前播放狀態是否「加載中」返回：Boolean;

true爲」加載中」

isSuspended()功能：當前播放狀態是否「暫停中」返回：Boolean;

true爲」暫停中」

isPlaying()功能：當前播放狀態是否「播放中」返回：Boolean;

true爲」播放中」

isPlayEnd()功能：當前播放狀態是否「播放結束」返回：Boolean;

true爲」播放結束」

getWidth()功能：取當前播放器寬度返回：int

getHeight()功能：取當前播放器高度返回：int

getClarity()功能：取當前視頻的清晰度返回：int(1: 」手機」,

2: 「標清」,

3: 「高清」,

4: 「超清」)

getAllClaritys()功能：取當前視頻所有的清晰度返回：Array < int > (1: 」手機」,

2: 「標清」,

3: 「高清」,

4: 「超清」)

 

l設置和動做

resize(width, height)功能：設置當前播放器寬度高度參數：

1 width: int;播放器寬度

2 height: int;播放器高度

play(second)功能：開始播放指定時長點參數：int;

second單位秒返回：int;操做結果返回碼

pause()功能：暫停當前播放的視頻返回：int;操做結果返回碼

resume()功能：恢復播放視頻返回：int;操做結果返回碼

setClarity(clarity)功能：更換視頻清晰度參數：int;

clarity清晰度取值範圍（1：」手機」, 2：」標清」, 3：」高清」, 4：」超清」）注意：clarity指定的清晰度，請確保當前視頻具有該清晰度，不然將按播放器默認規則選擇一個清晰度播放返回：int;操做結果返回碼

changeVideo(opt)功能：動態更換視頻參數：opt Object;包含將要播放的視頻的基本信息，和構造函數第二個參數基本一致;返回：int;操做結果返回碼示例：

player.changeVideo({

//視頻 ID (必選參數)

「file_id」: 「16092504232103514290」,

//應用 ID (必選參數)

「app_id」: 「1251132611」,

//是否自動播放 默認值0 (0: 不自動，1: 自動播放)

「auto_play」: 「0」,

//屏蔽全屏播放標識,默認值0 (0: 支持全屏播放,1: 禁用全屏播放)

「disable_full_screen」: 0,

//非點播用戶或開防盜鏈的用戶 ，切換視頻源使用下面參數，同構造方法輸入

「third_video」: null

});

addBarrage(barrage)功能：添加彈幕參數：Array;

barrage彈幕信息返回：int;操做結果返回碼示例：

player.addBarrage([{

「type」: 」content」,//消息類型 ,content:普通文本 (必選)

「content」: 」hello world」,//文本消息 (必選)

「time」: 」1.101」,//單位秒 ，表示 距離當前調用添加字幕的時間多久後，開始顯示該條字幕 (必選)

}, {「type」: 」content」,//同上條 (必選)

「content」: 」MD35號字居中」,//同上條 (必選)

「time」: 」2.101」,//同上條 (必選)

「style」: 「C64B03;35」, // 分號分割，第一項顏色值，第二項字體 (可選)

「postion」: 」center」 //固定位置 center: 居中，bottom: 底部， up: 頂上 (可選)

},

…])

closeBarrage()功能：關閉彈幕,

調用addBarrage後，彈幕將繼續開啓返回：int;操做結果返回碼l返回碼·200: 操做成功·0: 播放器未徹底初始化· - 1: 動態更換失敗視頻，缺乏必要參數· - 2: 未知操做命令· - 3: 播放時間超出有效播放範圍

 

5.視頻文件上傳功能

用戶可以使用點播上傳Web SDK，以幫助騰訊雲視頻用戶經過Web上傳視頻文件。該SDK當前支持HTML5上傳（不支持HTML5的瀏覽器暫不支持上傳）具體操做方法請閱：http: //video.qcloud.com/sdk/upload.html

 

6.視頻文件操做API說明

關於如何對視頻文件進行操做，包括上傳，發佈等內容，請參考官網連接：

http: //wiki.qcloud.com/wiki/v2/CreateVodTags

 

7.SDK升級歷史信息和文檔變動版本號發佈日期說明

1.0 2015.5初版本，基本播放功能；

1.1 2015.6新增視頻拖動播放位置事件

1.1 2015.6新增視頻全屏 / 退出全屏事件

1.1 2015.6新增支持防盜鏈調用播放器

1.2 2015.6.23新增支持非點播用戶使用播放器

1.3 2015.7新增文件上傳功能；播放器禁止拖動和拉伸視頻至播放器大小

1.3.1 2015.08.17增長試用配置 / 播放記憶功能

1.3.2 2015.08.31增長試看結束回調事件

1.3.3 2015.09.15增長彈幕展現

1.3.3 2015.09.15增長修改flash顯示層級Wmode

1.3.3 2015.09.15增長拉伸圖片貼片高寬至播放器大小stretch_patch

1.3.3 2015.09.15增長關閉彈幕的接口

1.3.3 2015.11.23點播用戶使用防盜鏈傳URL的參數

1.3.3 2015.12.22點播H5播放，支持加速減速播放playbackRate

 

8.反饋和建議

騰訊雲用戶能夠經過提交工單或聯繫客服的方式，對使用中發現的問題和意見建議進行反饋，咱們的技術人員會同您聯繫。若是上面的API方法不能知足您的需求，若是您有好的建議和想法，均可以郵件咱們的攻城獅trumpli@tencent.com。——文檔結束——