Web播放器__視頻播放_使用手冊_媒體轉碼-阿裏雲

播放器配置屬性

• id，{String}，播放器外層容器的dom元素id

• source, {String}, 視頻播放地址url（1）單獨url;（2）支持多碼流切換：source:'{"UD":"url_UD","HD":"url_HD","SD":"url_SD","LD":"url_LD"}',暫時支持hls與flv（mp4暫未開放）；

• width，{String}，播放器寬度，可形如’100%’或者’100px’

• height，{String}，播放器高度，可形如’100%’或者’100px’

• preload，{Boolean}，播放器自動加載，目前僅h5可用

• cover, {String}, 播放器默認封麵圖片，請填寫正確的圖片url地址

• isLive，{Boolean}，播放內容是否為直播，直播時會禁止用戶拖動進度條

• autoplay，{Boolean}，播放器是否自動播放，html5受瀏覽器限製，大多數情況下該配置會失效

• from，{String}，來源標識，可自定義，主要用於日誌記錄數據收集（建議用戶填入自己業務名稱，便於後續播放量統計）。

• trackLog, {Boolean}，是否需要進行用戶行為日誌打點，默認為true

• skinRes，{Url}，皮膚圖片，不建議隨意修改該字段,如要修改，請參照Web播放器皮膚定製

• skinLayout，{Array | Boolean}，功能組件布局配置，不傳該字段使用默認布局，傳false隱藏所有功能組件，功能與皮膚定製方法請看下一節

• notShowTips，{Boolean}，不顯示控製Tips（按鈕提示）

• showBarTime，{String}，控製欄自動隱藏時間（ms）

• waterMark，{url|pos|size|alpha},添加水印，目前僅支持flash，url：水印圖片（jpg/png）；pos：位置（TL/TR/BL/BR）;size: logo寬度占播放器比例（0-1，默認0.2）；alpha：透明度（0-1，默認1）。示例：waterMark:"logo.jpg|TL|0.15|0.5"

• extraInfo，{“a_key”:”a_value”,”b_key”:”b_value”}，類型為json串，定製性接口參數，目前支持

    "fullTitle":"測試頁麵"，                 //全屏時顯示視頻標題(目前僅flash支持)；
    "m3u8BufferLength":"30"，               //播放m3u8時加載緩存ts文件長度(目前僅flash支持)；
    "liveStartTime":"2016/08/17 12:00:00",  //直播開始時間，用於提示直播未開始(目前僅flash支持)；
    "liveStopTime":"2016/08/17 14:00:00",   //直播結束時間，用於提示直播結束(目前僅flash支持)；
    "liveRetry":1,                          //直播流中斷是否重試；

播放器定製

prismplayer使用skinRes和skinLayout兩個配置項實現播放器功能與皮膚的定製。

skinRes提供了播放器使用的皮膚圖片地址，我們在實現層麵上對皮膚圖片進行預處理，從而提取出各個功能組件的ui皮膚和尺寸。

skinLayout的配置方式一般如下：

skinLayout: [
    {
        "name":"bigPlayButton",
        "align":"blabs",
        "x":30,
        "y":80
    },
    {
        "name":"controlBar",
        "align":"blabs",
        "x":0,
        "y":0,
        "children":[
            {
                "name":"progress",
                "align":"tlabs",
                "x":0,
                "y":0
            }
        ]
    }
]

skinLayout中的每一個元素表示一個功能組件的配置，播放器隻會初始化進行了配置的功能組件。每個功能組件有以下配置項：

• name，{String}，功能組件的名稱，目前可用的組件列表請見下文

• align，{String}，組件相對於父級組件的對齊方式，可選項有：

  • 'cc'，相對於父組件絕對居中

  • 'tl'，相對於父組件左上對齊，受同級組件的占位影響，以組件的相對位置左上角作為偏移原點，可類比於css中的float: left

  • 'tr'，相對於父組件右上對齊，受同級組件的占位影響，以組件的相對位置右上角作為偏移原點，可類比於css中的float: right

  • 'tlabs'，相對於父組件左上絕對對齊，不受同級組件的占位影響，以父組件左上角作為偏移原點

  • 'trabs'，相對於父組件右上絕對對齊，不受同級組件的占位影響，以父組件右上角作為偏移原點

  • 'blabs'，相對於父組件左下絕對對齊，不受同級組件的占位影響，以父組件左下角作為偏移原點

  • 'brabs'，相對於父組件右下絕對對齊，不受同級組件的占位影響，以父組件右下角作為偏移原點

• x，{Number}，水平方向偏移量，偏移原點參考align的說明，cc時無效

• y，{Number}，垂直方向偏移量，偏移原點參考align的說明，cc時無效

• children，{Array}，組件的子組件列表

播放器功能組件

• bigPlayButton，大播放按鈕

• controlBar，控製麵板

• progress，播放進度條

• playButton，播放按鈕，默認從屬於controlBar

• timeDisplay，播放時間，默認從屬於controlBar

• fullScreenButton，全屏按鈕，默認從屬於controlBar

• setButton，設置按鈕，默認從屬於controlBar，隻有flash生效

• volume，音量控製，默認從屬於controlBar

• fullControlBar，全屏頂部麵板，隻有flash生效

• fullTitle，視頻標題，默認從屬於fullControlBar，隻有flash生效

• fullNormalScreenButton，取消全屏按鈕，默認從屬於fullControlBar，隻有flash生效

• fullTimeDisplay，全屏下當前時間，默認從屬於fullControlBar，隻有flash生效

• fullZoom，屏幕縮放，默認從屬於fullControlBar，隻有flash生效

skinLayout支持樹形的嵌套定義，從實現上支持各個組件的嵌套關係和順序調整。但我們約定controlBar和fullControlBar才允許二級嵌套。同時，在完全開放定製功能之前，我們也不建議您過度修改skinLayout，當前版本我們僅對外提供功能組件的顯示隱藏定製。

播放器API

• play()，播放視頻

• pause()，暫停視頻

• seek(time)，跳轉到某個時刻進行播放，time的單位為秒

• getCurrentTime()，獲取當前的播放時刻，返回的單位為秒

• getDuration()，獲取視頻總時長，返回的單位為秒

• getVolume()，獲取當前的音量，返回值為0-1的實數，ios和部分android會失效

• setVolume(vol)，設置音量，vol為0-1的實數，ios和部分android會失效

• loadByUrl(url,time)，直接播放視頻url，time為可選值（單位秒）目前隻支持同種格式（mp4/flv/m3u8）之間切換，暫不支持直播rtmp流切換

• setPlayerSize(w,h)，設置播放器大小，w,h可分別為400px像素或60%百分比，chrome瀏覽器下flash播放器分別不能小於397x297

播放器對外事件

• ready，播放器初始化完畢可以播放視頻時觸發

• uiReady，播放器初始化按鈕渲染完畢（播放器UI初始設置需要此事件後觸發，避免UI被初始化所覆蓋）

• play，視頻由暫停恢複為播放時觸發

• pause，視頻暫停時觸發

• ended，當前視頻播放完畢時觸發

• liveStreamStop，直播流中斷時觸發,m3u8/flv/rtmp在重試5次未成功後觸發，提示上層流中斷或需要重新加載視頻(PS：m3u8一直自動重試，不需要上層添加重試)

• m3u8Retry，m3u8直播流中斷後重試事件，每次斷流隻觸發一次

• hideBar，控製欄自動隱藏事件

如果問題還未能解決，請聯係售後技術支持。

最後更新：2016-12-14 16:19:03

  上一篇： 控製台使用幫助__使用手冊_媒體轉碼-阿裏雲

  下一篇： Web播放器皮膚定製__視頻播放_使用手冊_媒體轉碼-阿裏雲