A Vue 2.x video player component based on vue-aliplayer.
npm install vue-aliplayer -S
import VueAliplayer from 'vue-aliplayer'
export default {
components: {
'ali-player': VueAliplayer
}
}
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
aliplayerSdkPath | String | //g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js | 阿里播放器引用地址 |
playStyle | String | 播放器自定义样式style | |
source | String | 视频播放地址url:1、单独url;2、默认状态,表示使用“vi+playauth3、source播放方式优先级最高 | |
vid | String | 媒体转码服务的媒体Id | |
playauth | String | 播放权证,如何得到可参考:获取playauth | |
height | String | 100% | 播放器高度,可形如’100%’或者’100px’ |
width | String | 320px | 播放器宽度,可形如’100%’或者’100px’ |
cover | String | 播放器默认封面图片,请填写正确的图片url地址Flash播放器封面也需要开启允许跨域访问 | |
isLive | Boolean | false | 播放内容是否为直播,直播时会禁止用户拖动进度条 |
autoplay | Boolean | false | 播放器是否自动播放,在移动端autoplay属性会失效 |
useH5Prism | Boolean | false | 指定使用H5播放器 |
useFlashPrism | Boolean | false | 指定使用Flash播放器 |
playsinline | Boolean | false | H5是否内置播放,有的Android浏览器不起作用 |
format | String | mp4 | 指定播放地址格式,只有使用vid+plauth播放方式时支持可选值为'mp4'和'm3u8',默认为'mp4' |
x5_type | String | 'auto' | 声明启用同层H5播放器,启用时设置的值为'h5'具体参考同层播放 |
x5_fullscreen | Boolean | false | 声明视频播放时是否进入到TBS的全屏模式,默认为false具体参考同层播放 |
x5_video_position | String | center | 声明视频播在界面上的位置,默认为"center" 可选值为:'top','center' 具体参考同层播放 |
x5_orientation | String | 声明TBS播放器支持的方向,可选值:landscape:横屏) portraint:竖屏 landscape | |
autoPlayDelay | Number | 延迟播放时间,单位为秒具体参考延迟播放 | |
autoPlayDelayDisplayText | String | 延迟播放提示文本具体参考延迟播放 |
名称 | 参数 | 描述 |
---|---|---|
play | none | 播放视频 |
pause | none | 暂停视频 |
replay | none | 重播视频 |
seek | time | 跳转到某个时刻进行播放,time的单位为秒 |
getCurrentTime | none | 获取当前的播放时刻,返回的单位为秒 |
getDuration | none | 获取视频总时长,返回的单位为秒 |
getVolume | none | 获取当前的音量,返回值为0-1的实数ios和部分android会失效 |
setVolume | vol | 设置音量,vol为0-1的实数,ios和部分android会失效 |
loadByUrl | url,time | 直接播放视频url,time为可选值(单位秒)目前只支持同种格式(mp4/flv/m3u8)之间切换,暂不支持直播rtmp流切换 |
reloaduserPlayInfoAndVidRequestMts | vid:视频id playauth:播放凭证 | 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8)之间切换,暂不支持直播rtmp流切换 |
setPlayerSize | w,h | 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297 |
setSpeed | speed | 设置倍速播放移动端可能会失效,比如android 微信 |
名称 | 参数 | 描述 |
---|---|---|
ready | none | Triggered when aliplayer is ready |
play | none | Triggered when aliplayer start play |
pause | none | Triggered when aliplayer paused |
waiting | none | Triggered periodically when aliplayer is waiting |
ended | none | Triggered when aliplayer ended playing |
liveStreamStop | none | Triggered when live stream is stop |
hideBar | none | Triggered when control bar is hide |
Example:
<ali-player @play="play"></ali-player>
export default {
methods: {
play() {
console.log('play callback')
}
}
you can use all aliplayer api
Example:
<ali-player :source="视频url" :vid="视频vid" :playauth="播放鉴权" ref="player"></ali-player>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="replay">重播</button>
<button @click="reload">重载</button>
export default {
methods: {
play: function(){
const player = this.$refs.player.instance
player && player.play()
},
pause: function() {
const player = this.$refs.player.instance
player && player.pause()
},
replay: function() {
const player = this.$refs.player.instance
player && player.replay()
},
reload: function() {
// 修改source地址后
const player = this.$refs.player
player && player.reloadPlayer()
}
}
yarn dev
: Run dev in development modeyarn deploy
: Deploy dev to gh-pagesyarn build:cjs
: Build component in commonjs formatyarn build:umd
: Build component in umd formatyarn build
: Build component in both formatyarn lint
: Run eslint
Check out your npm scripts, it's using vbuild under the hood.
Generated by create-vue-app
Refer to vue-dplayer packaging
This content is released under the MIT License.