• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-aliplayer: vue2.0 的阿里云播放器组件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-aliplayer

开源软件地址:

https://gitee.com/slacrey/vue-aliplayer

开源软件介绍:

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

名称类型默认值说明
aliplayerSdkPathString//g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js阿里播放器引用地址
playStyleString播放器自定义样式style
sourceString视频播放地址url:1、单独url;2、默认状态,表示使用“vi+playauth3、source播放方式优先级最高
vidString媒体转码服务的媒体Id
playauthString播放权证,如何得到可参考:获取playauth
heightString100%播放器高度,可形如’100%’或者’100px’
widthString320px播放器宽度,可形如’100%’或者’100px’
coverString播放器默认封面图片,请填写正确的图片url地址Flash播放器封面也需要开启允许跨域访问
isLiveBooleanfalse播放内容是否为直播,直播时会禁止用户拖动进度条
autoplayBooleanfalse播放器是否自动播放,在移动端autoplay属性会失效
useH5PrismBooleanfalse指定使用H5播放器
useFlashPrismBooleanfalse指定使用Flash播放器
playsinlineBooleanfalseH5是否内置播放,有的Android浏览器不起作用
formatStringmp4指定播放地址格式,只有使用vid+plauth播放方式时支持可选值为'mp4'和'm3u8',默认为'mp4'
x5_typeString'auto'声明启用同层H5播放器,启用时设置的值为'h5'具体参考同层播放
x5_fullscreenBooleanfalse声明视频播放时是否进入到TBS的全屏模式,默认为false具体参考同层播放
x5_video_positionStringcenter声明视频播在界面上的位置,默认为"center" 可选值为:'top','center' 具体参考同层播放
x5_orientationString声明TBS播放器支持的方向,可选值:landscape:横屏) portraint:竖屏 landscape
autoPlayDelayNumber延迟播放时间,单位为秒具体参考延迟播放
autoPlayDelayDisplayTextString延迟播放提示文本具体参考延迟播放

Method

名称参数描述
playnone播放视频
pausenone暂停视频
replaynone重播视频
seektime跳转到某个时刻进行播放,time的单位为秒
getCurrentTimenone获取当前的播放时刻,返回的单位为秒
getDurationnone获取视频总时长,返回的单位为秒
getVolumenone获取当前的音量,返回值为0-1的实数ios和部分android会失效
setVolumevol设置音量,vol为0-1的实数,ios和部分android会失效
loadByUrlurl,time直接播放视频url,time为可选值(单位秒)目前只支持同种格式(mp4/flv/m3u8)之间切换,暂不支持直播rtmp流切换
reloaduserPlayInfoAndVidRequestMtsvid:视频id playauth:播放凭证目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8)之间切换,暂不支持直播rtmp流切换
setPlayerSizew,h设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
setSpeedspeed设置倍速播放移动端可能会失效,比如android 微信

Events

名称参数描述
readynoneTriggered when aliplayer is ready
playnoneTriggered when aliplayer start play
pausenoneTriggered when aliplayer paused
waitingnoneTriggered periodically when aliplayer is waiting
endednoneTriggered when aliplayer ended playing
liveStreamStopnoneTriggered when live stream is stop
hideBarnoneTriggered 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.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
noob-admin-ui: vue+elementui实现前台admin框架发布时间:2022-03-23
下一篇:
duckphp: DuckPhp 是一个 PHP 框架。 回归 PHPer 的简单化发布时间:2022-03-23
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap