本文對Web播放器SDK的屬性、方法、事件進行了說明,并提供了播放器接口的示例代碼。
屬性
如果您在使用過程中遇見問題,可以參考Web播放器常見問題或播放異常自主排查。
名稱 | 類型 | 說明 |
id | String | 播放器外層容器的DOM元素ID。 |
source | String | 使用URL播放方式時,通過source屬性來指定視頻播放地址URL。 說明
|
vid | String | 媒體轉碼服務的媒體ID。 |
playauth | String | 播放憑證,獲取播放憑證請參見獲取音視頻播放憑證。 |
playConfig | JSON | 使用Vid方式(VidAuth和VidSts方式)播放時的自定義設置字段,會透傳給點播接口。支持設置的自定義字段及參數說明,請參見媒體播放自定義設置 PlayConfig。取值示例:
|
authTimeout | Number | 通過Vid方式(VidAuth和VidSts方式)播放時,獲取到的視頻播放URL的有效時長。單位:秒,默認取值:7200。 請確保該時長大于視頻的實際時長,防止播放地址在播放完成前過期。 |
height | String | 播放器高度,取值:
說明 Chrome瀏覽器下Flash播放器分辨率不能小于397x297px。 |
width | String | 播放器寬度,取值:
說明 Chrome瀏覽器下Flash播放器分辨率不能小于397x297px。 |
autoSize | Boolean | String | 播放器尺寸自動適配視頻內容,可選值 'height', 'width'。 如,您可以指定 width: '500px', autoSize: 'height',播放器會保持寬度為 500px,高度根據視頻實際比例自動調整。 或者,您可以指定 height: '500px', autoSize: 'width',播放器會保持高度為 500px,寬度根據視頻實際比例自動調整 注:autoSize: true 等同于 autoSize: 'height',即默認是高度自適應。 |
videoWidth | String | 視頻寬度,僅H5模式支持。更多信息,請參見設置顯示模式。 |
videoHeight | String | 視頻高度,僅H5模式支持。更多信息,請參見設置顯示模式。 |
preload | Boolean | 播放器自動加載,目前僅H5模式可用。 |
cover | String | 播放器默認封面圖片,請填寫正確的圖片URL地址。需要autoplay值為false時,才生效。Flash播放器封面也需要開啟允許跨域訪問。 |
isLive | Boolean | 播放內容是否為直播,直播時會禁止用戶拖動進度條。默認值為false,播放直播流時需要設置為true。 |
autoplay | Boolean | 播放器是否自動播放,在移動端autoplay屬性會失效。取值:
說明 由于瀏覽器的限制,Web播放器SDK會出現自動播放失敗的場景,具體說明請參見自動播放。 |
autoplayPolicy | Object | 播放器自適應靜音自動播放策略。僅當
說明
|
rePlay | Boolean | 播放器自動循環播放。 |
useH5Prism | Boolean | 指定使用H5播放器。 |
useFlashPrism | Boolean | 指定使用Flash播放器。 |
playsinline | Boolean | H5是否內置播放,有些Android瀏覽器不起作用。 |
skinRes | Url | 皮膚圖片,不建議隨意修改該字段,如要修改,請參見設置播放器皮膚。 |
skinLayout | Array | Boolean | 功能組件布局配置,不傳該字段使用默認布局。取值:false表示隱藏所有功能組件。更多信息,請參見配置skinLayout屬性。 |
skinLayoutIgnore | Array | 需要隱藏的UI組件。組件名稱請參見點播組件參數說明。配置示例如下:
說明 skinLayoutIgnore的優先級要高于skinLayout屬性。 |
controlBarVisibility | String | 控制面板的實現,取值:
|
showBarTime | Number | 控制欄自動隱藏時間,單位:毫秒。 |
extraInfo | String | JSON串,用于定制性的接口參數,目前僅Flash支持,取值:
|
enableSystemMenu | Boolean | 是否允許系統右鍵菜單顯示,默認為false。 |
format | String | 指定播放地址格式,取值:
默認為空,僅H5支持。 |
mediaType | String | 指定返回音頻還是視頻,只有使用vid的播放方式時支持,默認值為video。取值:
|
qualitySort | String | 指定排序方式,只有使用Vid + PlayAuth播放方式時支持。取值:
默認值:asc,僅H5支持。 |
definition | String | 顯示視頻清晰度,多個使用半角逗號(,)分隔,比如:‘FD,LD’,此值是vid對應流清晰度的一個子集,僅H5模式支持。取值:
|
defaultDefinition | String | 默認視頻清晰度,此值是vid對應流的一個清晰度,僅H5模式支持。取值:
|
autoPlayDelay | Number | 延遲播放時間,單位:秒。更多信息,請參見配置延遲播放。 |
autoPlayDelayDisplayText | String | 延遲播放提示文本,更多信息,請參見配置延遲播放。 |
language | String | 國際化,默認為zh-cn。如果未設置,則采用瀏覽器語言。取值:
|
languageTexts | JSON | 自定義國際化文本JSON結構,key的值需要和language屬性值對應起來。示例:{jp:{Play:”Play”}}自定義值請參見JSON結構。 |
snapshot | Boolean | 是否啟用Flash截圖功能。取值:
|
snapshotWatermark | Object | H5設置截圖水印。 |
useHlsPluginForSafari | Boolean | Safari瀏覽器是否啟用HLS插件播放,Safari 11除外。取值:
|
enableStashBufferForFlv | Boolean | H5播放FLV時,設置是否啟用播放緩存,只在直播下起作用。取值:
|
stashInitialSizeForFlv | Number | H5播放FLV時,初始緩存大小,只在直播下起作用。默認32KB。 當設置的值較小時,會提升起播速度,但是值太小時,可能會導致播放一小段之后卡頓。 |
loadDataTimeout | Number | 緩沖多長時間后,提示用戶切換低清晰度,單位:秒。默認20秒。 |
waitingTimeout | Number | 最大緩沖超時時間,超過這個時間會有錯誤提示,單位:秒。默認60秒。 |
diagnosisButtonVisible | Boolean | 是否顯示檢測按鈕,取值:
|
disableSeek | Boolean | 禁用進度條的Seek,取值:
|
encryptType | Number | 設置是否播放阿里云視頻加密(私有加密)視頻,默認值為0,取值:
|
progressMarkers | Array | 進度條打點內容數組,更多信息,請參見進度條標記。 |
vodRetry | Number | 點播失敗重試次數,默認3次。 |
liveRetry | Number | 直播播放失敗重試次數,默認5次。 |
hlsFrameChasing | Boolean | HLS直播模式下,是否開啟追幀。取值:
說明 僅2.21.0以下版本Web播放器SDK支持設置本參數,2.21.0及以上版本如需在HLS直播模式下設置追幀,請參考 |
chasingFirstParagraph | Number | 第一段追幀,單位:秒。默認20秒。 說明 僅2.21.0以下版本Web播放器SDK支持設置本參數,2.21.0及以上版本如需在HLS直播模式下設置追幀,請參考 |
chasingSecondParagraph | Number | 第二段追幀,單位:秒。默認40秒。 說明 僅2.21.0以下版本Web播放器SDK支持設置本參數,2.21.0及以上版本如需在HLS直播模式下設置追幀,請參考 |
chasingFirstSpeed | Number | 第一段追幀的倍速,默認1.1倍速。 說明 僅2.21.0以下版本Web播放器SDK支持設置本參數,2.21.0及以上版本如需在HLS直播模式下設置追幀,請參考 |
chasingSecondSpeed | Number | 第二段追幀的倍速,默認1.2倍速。 說明 僅2.21.0以下版本Web播放器SDK支持設置本參數,2.21.0及以上版本如需在HLS直播模式下設置追幀,請參考 |
hlsOption.maxLiveSyncPlaybackRate | Number | HLS直播模式下,設置直播追幀時的播放速度,默認為1,表示不追幀。
說明 僅2.21.0及以上版本Web播放器SDK支持設置本參數。 |
flvFrameChasing | Boolean | FLV直播模式下,是否開啟追幀,取值:
默認值為false。 |
keyShortCuts | Boolean | 是否啟用快捷鍵,取值:
默認值為false。 說明 方向鍵(左右鍵)控制快進和快退,方向鍵(上下鍵)控制音量的增減,空格鍵暫停和播放。 |
keyFastForwardStep | Number | 快進快退的時間長度,單位:秒。默認為10秒。 |
rtsFallback | Boolean | 當瀏覽器不支持RTS或RTS拉流失敗時,播放器會自動嘗試使用FLV/HLS進行降級播放,且優先選擇延遲更低的FLV,當瀏覽器不支持FLV時,會選擇HLS。 此功能是默認開啟的,如果您需要禁用,可以傳false。 |
rtsFallbackType | String | 指定RTS降級到的協議,可選 HLS/FLV,默認不傳此參數,代表自動選擇,播放器會優先選擇延遲更低的FLV,如果瀏覽器不支持則降級到HLS。 |
rtsFallbackSource | String | 我們推薦使用播放器的默認降級策略,但是如果您希望指定固定的拉流地址進行降級,可以使用此參數。 |
mediaAuth | String | 通用媒體管理服務的視頻播放憑證。 可以登錄通用媒體管理服務控制臺獲取(路徑: )。示例:pg89f1200baw94rmcky2e**** 說明 Web播放器SDK 2.10.0及以上版本支持。 |
traceId | String | traceId為您自有的用戶唯一標識符,將traceId傳入公共埋點,便于跟蹤上報日志。正常情況下,Web播放器SDK已默認開啟日志上報,傳遞traceId,可便于您標識用戶身份;如果不傳遞,Web播放器SDK會默認生成一個uuid(播放器SDK生成的唯一標識符)并存儲在瀏覽器緩存中。 說明 Web播放器SDK 2.10.0及以上版本支持。 |
textTracks | Array | 設置WebVTT外掛字幕,示例如下:
字段解釋如下:
|
ratio | Number | 設置播放器按照固定比例縮放。例如:已知視頻長寬比為16:9,通過設置播放器參數為 |
extLanguageTexts | Object | 播放器SDK內置了一套中英文界面文案,您可以通過本屬性自定義部分界面的顯示文案。以修改分辨率的顯示文案為例:HD默認顯示為高清,可以通過以下方式修改HD顯示為1080p。
|
speedLevels | Array | 設置自定義倍速列表數組,key表示倍速數值,text表示UI文本,若不傳則會使用默認列表。參數取值示例如下:
|
logo | Array | 設置自定義Logo圖片。示例如下:
字段解釋如下:
|
license | Object | 如需使用播放質量監控、單點追查、播放H.265/H.266編碼協議視頻流等增值功能,請先填寫Web播放器SDK增值服務申請表單申請License授權后,再按如下方式接入License:
|
mute | Boolean | 設置是否靜音播放。在瀏覽器禁止自動播放時可以通過配置此參數進行靜音自動播放。詳情請參見自動播放。 |
clickPause | Boolean | 點擊視頻畫面進行暫停或播放。 |
disablePip | Boolean | 隱藏瀏覽器自帶的畫中畫按鈕。 說明
|
env | String | 播放器的埋點數據默認會上傳到中國數據中心,如果您有海外數據合規需求,請傳入參數 env: 'SEA',數據將上傳到新加坡數據中心。 |
watchStartTime | Number | 單獨使用,代表開始播放的時間; 和 watchEndTime 配合使用,開啟區間播放功能,只能在開始和結束時間范圍內播放和拖拽進度條。 單位:秒 |
watchEndTime | Number | 和 watchStartTime 配合使用,開啟區間播放功能,只能在開始和結束時間范圍內播放和拖拽進度條。 如果參數值小于watchStartTime,則watchStartTime失效。 單位:秒 |
start | Number | 和 end 配合使用,截取視頻的一部分作為一個獨立的視頻。如:原視頻時長 60 秒,設置 start:10、end:30 后,視頻顯示時長為 20 秒,并從原視頻的第 10 秒開始播放。 |
end | Number | 和 start 配合使用,截取視頻的一部分作為一個獨立的視頻。如:原視頻時長 60 秒,設置 start:10、end:30 后,視頻顯示時長為 20 秒,并從原視頻的第 10 秒開始播放。 |
dbClickFullscreen | Boolean | 是否開啟雙擊全屏,默認在 PC 端開啟。 |
方法
方法需要在ready事件發生之后或創建播放器ready回調里,H5模式下可以在創建播放器構造函數的回調函數里調用。示例如下:
H5播放器
//H5 播放器 var player = new Aliplayer({},function(player) { player.play(); });
Flash播放器
//Flash 播放器 player.on('ready',function(e) { player.play(); });
名稱 | 參數 | 說明 |
play | 無 | 播放視頻。 |
pause | 無 | 暫停視頻。 |
replay | 無 | 重播視頻。 |
seek | time | 跳轉到指定時刻進行播放,時間單位:秒。 |
getCurrentTime | 無 | 獲取當前的播放時刻,返回的時間單位:秒。 |
getDuration | 無 | 獲取視頻總時長,返回的單位為秒,這個需要在視頻加載完成以后才可以獲取到,可以在play事件后獲取。 |
getVolume | 無 | 獲取當前的音量,返回值為0~1的實數。iOS和部分Android會失效。 |
setVolume | 無 | 設置音量,vol為0~1的實數,iOS和部分Android會失效。 |
mute | 無 | 設置靜音。 |
unMute | 無 | 取消靜音。 |
loadByUrl | url(String),time(Number) | 直接播放視頻url,time為可選值(單位:秒)。目前只支持同種格式(MP4、FLV、HLS)之間切換。暫不支持直播RTMP流切換。 |
replayByVidAndPlayAuth | vid(String):視頻ID,playauth(String):播放憑證 | 目前只支持H5播放器。暫不支持不同格式視頻間的切換。暫不支持直播RTMP流切換。 可用于點播DRM流的切換,用法: |
replayByVidAndAuthInfo | 僅MPS用戶時使用參數順序為:vid(String)、accId(String)、accSecret(String)、stsToken(String)、authInfo(String)、domainRegion(String) | 目前只支持H5播放器。暫不支持不同格式視頻間的之間切換。暫不支持直播rtmp流切換。 |
setPlayerSize | w(String),h(String) | 設置播放器大小,取值:
Chrome瀏覽器下Flash播放器分辨率不能小于397x297px。 |
setSpeed | speed(Number) | 手動設置播放的倍速,支持0.5~2倍速播放,倍速播放僅H5模式支持。移動端可能會失效,比如Android微信。倍速播放UI默認是開啟的。 說明 關掉倍速的方法:
|
setSanpshotProperties | width(Number):寬度,height(Number):高度,rate(Number):截圖質量 | 設置截圖參數,高度、寬度單位為px,截圖質量取值范圍為0-1之間的數字,默認是1。視頻截圖詳細說明請參見視頻截圖。 |
fullscreenService.requestFullScreen | 無 | 播放器全屏,僅H5支持。 |
fullscreenService.cancelFullScreen | 無 | 播放器退出全屏,iOS調用無效,僅H5支持。 |
fullscreenService.getIsFullScreen | 無 | 獲取播放器全屏狀態,僅H5支持。 |
getStatus | 無 | 獲取播放器狀態,取值:
|
setRotate | rotate(Number):旋轉角度 | 參數為旋轉角度,正數表示正時針旋轉,負數表示逆時針旋轉。示例:setRotate(90)。更多信息,請參見設置顯示模式。 |
getRotate | 無 | 獲取旋轉角度。更多信息,請參見設置顯示模式。 |
setImage | image(String):鏡像類型 | 設置鏡像,取值:
示例:setImage(‘horizon’)。更多信息,請參見設置顯示模式。 |
dispose | 無 | 播放器銷毀。 |
setCover | cover(String):封面地址 | 設置封面。 |
setProgressMarkers | markers(Array):打點數據集合 | 設置打點數據。 |
setPreviewTime | time(Number):試看時間 | 設置試看時間,單位:秒。更多信息,請參見試看。 |
getPreviewTime | 無 | 獲取試看時間。 |
isPreview | 無 | 是否試看。 |
getCurrentPDT | 無 | HLS的視頻格式支持實時獲取ProgramDateTime。 |
replayByMediaAuth | mediaAuth(String) | 使用mediaAuth播放通用媒體管理服務的視頻,用法: 說明 Web播放器SDK 2.10.0及以上版本支持。 |
setTraceId | traceId(String):公共埋點 | 傳入公共埋點,用于日志跟蹤,用法: 說明 Web播放器SDK 2.10.0及以上版本支持。 |
setTextTracks | textTracks(Array) | 設置一組WebVTT字幕,示例如下:
說明 Web播放器SDK 2.12.0及以上版本支持。 |
setLogo | logo(Array) | 設置自定義Logo圖片。示例如下:
各字段的詳細解釋參考屬性:logo。 |
setWatchTime | startTime(Number), endTime(Number) | 動態更新當前視頻的 watchStartTime/watchEndTime |
setNextWatchTime | startTime(Number), endTime(Number) | 設置下一個視頻的 watchStartTime/watchEndTime。 如果您要使用 loadByUrl/replayByVidAndPlayAuth 切換視頻,且下一個視頻的播放區間和當前視頻不同,可以先調用 setNextWatchTime 設置下個視頻的區間。 |
setStartEnd | start(Number), end(Number) | 動態更新當前視頻的 start/end。 |
setNextStartEnd | start(Number), end(Number) | 設置下一個視頻的 start/end。 如果您要使用 loadByUrl/replayByVidAndPlayAuth 切換視頻,且下一個視頻的截取區間和當前視頻不同,可以先調用 setNextStartEnd 設置下個視頻的區間。 |
takeSnapshot | 無 | 截圖,返回的 base64 可以直接用 img.src 加載。 可以使用 setSanpshotProperties 設置截圖質量,snapshotWatermark 設置截圖水印。 注:部分移動端瀏覽器由于 video 被劫持(如 UC、QQ 瀏覽器),可能無法使用截圖功能。 |
getPlayTime | 無 | 獲取用戶的真實播放時長(不包含暫停時長,倍速情況下統計真實物理時間),返回值的單位是秒。 |
事件
播放器事件
名稱 | 說明 |
ready | 播放器視頻初始化按鈕渲染完畢。播放器UI初始設置需要此事件后觸發,以避免UI被初始化所覆蓋。 說明 播放器提供的方法需要在該事件發生后才可以調用。 |
play | 視頻由暫停恢復為播放時觸發。 |
pause | 視頻暫停時觸發。 |
canplay | 能夠開始播放音頻和視頻時發生,會多次觸發,僅限H5播放器。 |
playing | 播放中,會觸發多次。 |
ended | 當前視頻播放完畢時觸發。 |
liveStreamStop | 直播流中斷時觸發。HLS直播流在重試5次未成功后觸發。提示上層流中斷或需要重新加載視頻。 說明 如果HLS直播流斷流或者出錯,播放器會自動重試5次,不需要上層添加重試邏輯。 |
onM3u8Retry | HLS直播流中斷后重試事件,每次斷流只觸發一次。 |
hideBar | 控制欄自動隱藏事件。 |
showBar | 控制欄自動顯示事件。 |
waiting | 數據緩沖事件。 |
timeupdate | 播放位置發生改變時觸發,僅H5模式播放器。可通過getCurrentTime方法,得到當前播放時間。 |
snapshoted | 截圖完成事件。 |
requestFullScreen | 全屏事件,僅H5模式支持。 |
cancelFullScreen | 取消全屏事件,iOS下不會觸發,僅H5模式支持。 |
error | 錯誤事件。 |
startSeek | 開始拖拽,參數返回拖拽點的時間。 |
completeSeek | 完成拖拽,參數返回拖拽點的時間。 |
resolutionChange | 直播情況下,推流端切換了分辨率。 |
seiFrame | HLS或FLV收到SEI消息。 |
rtsFallback | 當RTS降級時觸發。其中,參數 |
settingSelected | 當設置列表(倍速、清晰度、字幕等)被選中時觸發。 說明 因開源倍速插件與播放器設置不同步,使用它需自定義代碼并重新編譯。您可定義事件監聽,若需要使用播放器的
|
rtsTraceId | 當RTS拉流成功時觸發,通過訂閱該事件,可以獲取到RTS TraceId。打印日志中的參數
|
autoplay | 自動播放成功或失敗時會觸發。回調參數 |
mutedAutoplay | 當 |
videoUnavailable | 當視頻編碼格式不支持導致視頻播放發生黑屏時觸發。例如在不支持H.265的瀏覽器上播放視頻,會出現視頻黑屏,只有聲音播放,此時會觸發該事件。 |
訂閱事件
通過播放器實例的on方法訂閱。示例如下:
var handleReady = function(e) { console.log(e); } player.on('ready',handleReady);
通過播放器實例的off方法取消訂閱。示例如下:
player.off('ready',handleReady);