Web播放器
更新时间：2017-02-20 17:06:53
Prismplayer是一套在线视频播放技术方案，同时支持Flash和Html5两种播放技术，可对播放器进行功能配置和皮肤定制。
支持格式
Flash 模式：
- 视频格式： mp4、flv、m3u8、rtmp、mp3
- 视频编码： H.264
- 音频编码： AAC、MP3
HTML5 模式：
- 视频格式： mp4、m3u8
- 视频编码： H.264
音频编码： AAC
m3u8格式播放依赖调用端浏览器支持情况：iOS全系列支持，Android 4.0及以上版本支持。
在线定制
媒体转码控制台提供了播放器的定制功能，提供Flash、Html5以及自适应三种基于prismplayer的播放器。
播放器详细说明
资源文件
Prismplayer不依赖于任何的前端js库，只需要在页面中引用如下js文件，就可以进行播放器的初始化：
http://g.alicdn.com/de/prismplayer/1.5.7/prism-min.js
这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术，也可以只引用对应技术的js文件，从而获得更小的文件体积：
Flash版本:
http://g.alicdn.com/de/prismplayer/1.5.7/prism-flash-min.js
Html5版本:
http://g.alicdn.com/de/prismplayer/1.5.7/prism-h5-min.js
如果您的使用场景需要用到html5播放器，请额外引用css文件：
http://g.alicdn.com/de/prismplayer/1.5.7/skins/default/index-min.css
一个简单的使用实例
提供一个最简单的使用实例，初始化播放器，监听某个dom元素的点击事件来触发调用播放器的接口方法，同时对播放器暴露的事件进行监听。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.5.7/skins/default/index.css" />
<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.5.7/prism-min.js"></script>
</head>
<body>
<div id="J_prismPlayer" class="prism-player"></div>
<!— prism-player为h5播放器皮肤的钩子类名，请务必加上 —>
<button id="J_clickToPlay" type="button">播放</button>
<script>
// 初始化播放器
var player = new prismplayer({
id: "J_prismPlayer", // 容器id
source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4",// 视频地址
autoplay: false, //自动播放：否
width: "100%", // 播放器宽度
height: "400px" // 播放器高度
});
var clickDom = document.getElementById("J_clickToPlay");
clickDom.addEventListener("click", function(e) {
// 调用播放器的play方法
player.play();
});
// 监听播放器的pause事件
player.on("pause", function() {
alert("播放器暂停啦！");
});
</script>
</body>
播放器配置属性
* 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受浏览器限制，大多数情况下该配置会失效
* rePlay，{Boolean}，播放器自动循环播放
* showBuffer，{Boolean}，显示播放时缓冲图标，默认true
* from，{String}，来源标识，可自定义，主要用于日志记录数据收集（`建议用户填入自己业务名称，便于后续播放量统计`）。
* trackLog, {Boolean}，是否需要进行用户行为日志打点，默认为`true`
* skinRes，{Url}，皮肤图片，不建议随意修改该字段,如要修改，请参照[Web播放器皮肤定制](https://help.aliyun.com/document_detail/44234.html)
* 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，播放按钮，默认从属于
controlBartimeDisplay，播放时间，默认从属于
controlBarfullScreenButton，全屏按钮，默认从属于
controlBarsetButton，设置按钮，默认从属于
controlBar，只有flash生效；为保持播放器界面整洁，默认不显示，如需打开，需要在设置皮肤时，在controlBar下添加setButton的配置streamButton，清晰度选择，默认从属于controlBar，只有flash且有多清晰度输入时才生效
volume，音量控制，默认从属于
controlBarfullControlBar，全屏顶部面板，只有flash生效
fullTitle，视频标题，默认从属于
fullControlBar，只有flash生效fullNormalScreenButton，取消全屏按钮，默认从属于
fullControlBar，只有flash生效fullTimeDisplay，全屏下当前时间，默认从属于
fullControlBar，只有flash生效fullZoom，屏幕缩放，默认从属于
fullControlBar，只有flash生效
skinLayout支持树形的嵌套定义，从实现上支持各个组件的嵌套关系和顺序调整。但我们约定controlBar和fullControlBar才允许二级嵌套。同时，在完全开放定制功能之前，我们也不建议您过度修改skinLayout，当前版本我们仅对外提供功能组件的显示隐藏定制。
播放器API
play()，播放视频
pause()，暂停视频
replay()，重播视频
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，控制栏自动隐藏事件