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播放器皮肤定制__视频播放_使用手册_媒体转码-阿里云