Vue-AliPlayer

A Vue 2.x video player component based on vue-aliplayer.

Install

npm install vue-aliplayer -S

Usage

import VueAliplayer from 'vue-aliplayer'

export default {
  components: {
    'ali-player': VueAliplayer
  }
}

Props

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ---- | ------- | ----------- | | 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 | | 延迟播放提示文本具体参考延迟播放 |

Method

| 名称 | 参数 | 描述 | | ---- | ------ | ----------- | | 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 微信 |

Events

| 名称 | 参数 | 描述 | | ---- | ------ | ----------- | | 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')
      }
    }

API

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()
      }
    }

Development

• yarn dev: Run dev in development mode
• yarn deploy: Deploy dev to gh-pages
• yarn build:cjs: Build component in commonjs format
• yarn build:umd: Build component in umd format
• yarn build: Build component in both format
• yarn 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

License

This content is released under the MIT License.