公司是一个视频社交平台，H5也免不了使用video标签，经久实践（也可能是技术不达标）配置vue-video-player播放m3u8文件很多坑点，要配置很多东西，加配个plugin —— videojs-contrib-hls，基于videojs玩儿起来有点费劲，很难受。
基于业务，我们还是需要一个快、狠、准的API来做业务，那么测试aliyun播放器还特么扣以。
填入source，即用即放，简单开发使用的配方。
如果使用aliyun点播的童鞋还可以使用到更多的配置方向的东西，没有接入aliyun点播的话也可以直接引入script标签直接使用，可以说是开箱即用了。
废话少叙，代码介入~（代码是vue的代码）
| 名称 | 类型 | 说明 |
|---|---|---|
| id | String | 播放器外层容器的dom元素id。 |
| source | String | 视频播放地址url：单独url，默认状态，表示使用vid+playauth，source播放方式优先级最高，source支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”}’ 。详情参见 4.7 节。 |
| vid | String | 媒体转码服务的媒体Id。 |
| playauth | String | 播放权证，如何得到参见 获取playauth。 |
| height | String | 播放器高度，可形如‘100%’或者‘100px’chrome浏览器下flash播放器分别不能小于397x297。 |
| width | String | 播放器宽度，可形如‘100%’或者‘100px’chrome浏览器下flash播放器分别不能小于397x297。 |
| videoWidth | String | 视频宽度，仅h5支持。详情参见 4.6 节。 |
| videoHeight | String | 视频高度，仅h5支持。详情参见 4.6 节。 |
| preload | Boolean | 播放器自动加载，目前仅h5可用。 |
| cover | String | 播放器默认封面图片，请填写正确的图片url地址 需要preload和autoplay为’false’时，才生效Flash播放器封面也需要开启 允许跨域访问。 |
| isLive | Boolean | 播放内容是否为直播，直播时会禁止用户拖动进度条。 |
| autoplay | Boolean | 播放器是否自动播放，在移动端autoplay属性会失效。 Safari11不会自动开启自动播放 如何开启。 |
| rePlay | Boolean | 播放器自动循环播放。 |
| useH5Prism | Boolean | 指定使用H5播放器。 |
| useFlashPrism | Boolean | 指定使用Flash播放器。 |
| playsinline | Boolean | H5是否内置播放，有的Android浏览器不起作用。 |
| showBuffer | Boolean | 显示播放时缓冲图标，默认true。 |
| skinRes | Url | 说明：皮肤图片，不建议随意修改该字段，如要修改请参照皮肤定制。 |
| skinLayout | Array Boolean | 说明：功能组件布局配置，不传该字段使用默认布局传false隐藏所有功能组件，请参照皮肤定制。 |
| controlBarVisibility | String | 控制面板的实现，默认为‘hover’，可选的值为：‘click’、‘hover’、‘always’。 |
| showBarTime | String | 控制栏自动隐藏时间（ms）。 |
| waterMark | url pos size alpha | 添加水印。数据格式：url pos size alpha（目前仅支持flash）。示例：waterMark：“logo.jpg TL 0.15 0.5” url：水印图片（jpg/png） pos：位置（TL/TR/BL/BR） size：logo宽度占播放器比例（0-1，默认0.2） alpha：透明度（0-1，默认1） |
| extraInfo | String | 说明：JSON串用于定制性接口参数，目前支持：1.“liveRetry”：1 直播流中断是否重试。2.“fullTitle”：“测试页面” 全屏时显示视频标题（仅flash支持）。3. “m3u8BufferLength”：“30” 播放m3u8时加载缓存ts文件长度单位（秒）（仅flash支持）。4. “liveStartTime”：“2016/08/17 12:00:00” 直播开始时间，用于提示直播未开始(仅flash支持)。5. “liveOverTime”：“2016/08/17 14:00:00” 直播结束时间，用于提示直播结束（仅flash支持）。 |
| enableSystemMenu | Boolean | 是否允许系统右键菜单显示，默认为false。 |
| format | Sting | 指定播放地址格式，只有使用vid的播放方式时支持。可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为‘mp4’。 |
| mediaType | Sting | 指定返回音频还是视频，只有使用vid的播放方式时支持可选值为’video’和’audio’，默认为’video’‘audio’主要是针对只包含音频的视频格式，比如音频的mp4。 |
| qualitySort | Sting | 指定排序方式，只有使用vid+plauth播放方式时支持‘desc’表示按倒序排序（即：从大到小排序）‘asc’表示按正序排序（即：从大到小排序）默认值：‘asc’。 |
| x5_type | String | 声明启用同层H5播放器，启用时设置的值为‘h5’ 详情参见 同层播放。 |
| x5_fullscreen | Boolean | 声明视频播放时是否进入到TBS的全屏模式，默认为false当需要把视频做为背景时，设置为true详情参见 同层播放。 |
| x5_video_position | String | 声明视频播在界面上的位置，默认为“center”可选值为：“top”，“center”详情参见 同层播放。 |
| x5_orientation | String | 声明TBS播放器支持的方向，可选值：landscape：横屏 portraint：竖屏 详情参见 同层播放。 |
| autoPlayDelay | Number | 延迟播放时间，单位为秒详情参见 延迟播放 |
| autoPlayDelayDisplayText | String | 延迟播放提示文本详情参见 延迟播放 |
| language | String | 国际化，默认为‘zh-cn’如果未设置，则采用浏览器语言可选值为‘zh-cn’o、‘en-us’或其它值。 |
| 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时，初始缓存大小，只在直播下起作用。 |
| loadDataTimeout | Number | 缓冲多长时间后，提示用户切换低清晰度，默认：20秒。 |
| liveStartTime | String | 直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 |
| liveOverTime | String | 直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 |
| liveTimeShiftUrl | String | 直播可用时移查询地址，详情参见 直播时移。 |
可见设置其实也很多，但是相对来说比较丰富简单。
首先，引入aliyun播放器的script是必要的
/*
首先是css文件，样式
其次是js文件
当你需要自定义的时候，可以不使用其css文件
*/
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.1/aliplayer-min.js"></script>
其次就是使用了，下面代码：
<template>
<div class="player" id="video"></div>
</template>
<script>
export default {
data(){
return {
player:{},
}
},
mounted(){
/* 当你没有其他配置的时候。如下代码就已经够用 */
this.player = new Aliplayer({
id: 'video', //container element ID
source : this.$route.query.uri, //源文件 不需要你配置video类型，很爽的一点。
})
/*aliyun播放器事件项*/
this.player.on('ready', e => console.log('----准备成功开始播放----'))
this.player.on('waiting', e => console.log(e)) //视频请求等待中
this.player.on('play', e => console.log(e))//开始播放
his.player.on('pause', e => console.log(e))//停止
this.player.on('ended', e => console.log(e))//播放结束
this.player.on('timeupdate',e => console.log(e))//进度 ++
this.player.on('error',e => console.log(e))//播放错误
this.player.on('m3u8Retry',e => console.log(e))//m3u8请求错误
/* and so on ... 还有几个不是很常用的事件 可以看aliyunapi */
}
}
</script>
参考文档:
