vue-aliplayer 阿里云播放器适配 vue

阿里云播放器本身没对 vue 进行专门优化，以下借助 github 上一个库进行优化

官网

vue-aliplayer

插件源码

<template><div class='prism-player' :id='playerId' :style='playStyle'></div>
</template><script>export default {name: 'Aliplayer',props: {playStyle: {type: String,default: ''},aliplayerSdkPath: {// Aliplayer 代码的路径type: String,default: '//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js'},autoplay: {type: Boolean,default: false},isLive: {type: Boolean,default: false},playsinline: {type: Boolean,default: false},width: {type: String,default: '100%'},height: {type: String,default: '320px'},controlBarVisibility: {type: String,default: 'always'},useH5Prism: {type: Boolean,default: false},useFlashPrism: {type: Boolean,default: false},vid: {type: String,default: ''},playauth: {type: String,default: ''},source: {type: String,default: ''},cover: {type: String,default: ''},format: {type: String,default: 'm3u8'},x5_video_position: {type: String,default: 'top'},x5_type: {type: String,default: 'h5'},x5_fullscreen: {type: Boolean,default: false},x5_orientation: {type: Number,default: 2},autoPlayDelay: {type: Number,default: 0},autoPlayDelayDisplayText: {type: String}},data () {return {playerId: 'aliplayer_' + Math.random() * 100000000000000000,scriptTagStatus: 0,instance: null}},created () {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag()}},mounted () {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag()}},methods: {insertScriptTag () {const _this = thislet playerScriptTag = document.getElementById('playerScriptTag')// 如果这个tag不存在，则生成相关代码tag以加载代码if (playerScriptTag === null) {playerScriptTag = document.createElement('script')playerScriptTag.type = 'text/javascript'playerScriptTag.src = this.aliplayerSdkPathplayerScriptTag.id = 'playerScriptTag'let s = document.getElementsByTagName('head')[0]s.appendChild(playerScriptTag)}if (playerScriptTag.loaded) {_this.scriptTagStatus++} else {playerScriptTag.addEventListener('load', () => {_this.scriptTagStatus++playerScriptTag.loaded = true_this.initAliplayer()})}_this.initAliplayer()},initAliplayer () {const _this = this// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成if (_this.scriptTagStatus === 2 && _this.instance === null) {// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建// 所以，我们只能在 nextTick 里面初始化 Aliplayer_this.$nextTick(() => {_this.instance = window.Aliplayer({id: _this.playerId,autoplay: _this.autoplay,isLive: _this.isLive,playsinline: _this.playsinline,format: _this.format,width: _this.width,height: _this.height,controlBarVisibility: _this.controlBarVisibility,useH5Prism: _this.useH5Prism,useFlashPrism: _this.useFlashPrism,vid: _this.vid,playauth: _this.playauth,source: _this.source,cover: _this.cover,x5_video_position: _this.x5_video_position,x5_type: _this.x5_type,x5_fullscreen: _this.x5_fullscreen,x5_orientation: _this.x5_orientation,autoPlayDelay: _this.autoPlayDelay,autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText})// 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去_this.instance.on('ready', () => {this.$emit('ready', _this.instance)})_this.instance.on('play', () => {this.$emit('play', _this.instance)})_this.instance.on('pause', () => {this.$emit('pause', _this.instance)})_this.instance.on('ended', () => {this.$emit('ended', _this.instance)})_this.instance.on('liveStreamStop', () => {this.$emit('liveStreamStop', _this.instance)})_this.instance.on('m3u8Retry', () => {this.$emit('m3u8Retry', _this.instance)})_this.instance.on('hideBar', () => {this.$emit('hideBar', _this.instance)})_this.instance.on('waiting', () => {this.$emit('waiting', _this.instance)})_this.instance.on('snapshoted', () => {this.$emit('snapshoted', _this.instance)})})}},/*** 播放视频*/play: function () {this.instance.play()},/*** 暂停视频*/pause: function () {this.instance.pause()},/*** 重播视频*/replay: function () {this.instance.replay()},/*** 跳转到某个时刻进行播放* @argument time 的单位为秒*/seek: function (time) {this.instance.seek(time)},/*** 获取当前时间 单位秒*/getCurrentTime: function () {return this.instance.getCurrentTime()},/***获取视频总时长，返回的单位为秒* @returns 返回的单位为秒*/getDuration: function () {return this.instance.getDuration()},/**获取当前的音量，返回值为0-1的实数ios和部分android会失效*/getVolume: function () {return this.instance.getVolume()},/**设置音量，vol为0-1的实数，ios和部分android会失效*/setVolume: function (vol) {this.instance.setVolume(vol)},/***直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换*@argument url 视频地址*@argument time 跳转到多少秒*/loadByUrl: function (url, time) {this.instance.loadByUrl(url, time)},/*** 设置播放速度*@argument speed 速度*/setSpeed: function (speed) {this.instance.setSpeed(speed)},/*** 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297*@argument w 播放器宽度*@argument h 播放器高度*/setPlayerSize: function (w, h) {this.instance.setPlayerSize(w, h)},/*** 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换*@argument vid 视频id*@argument playauth 播放凭证*/reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth)}}}
</script><style>@import url(//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css);
</style>

组件封装

插件本身属性过多，正常开发中不一定用得到，因此对插件进行再一次封装为组件，方便程序调用及适当扩展
该组件主要实现了一下功能
1. 播放器高度自适应
2. 自动获取视频播放地址，播放地址的实现参见 Java + jQuery 实现阿里云点播

<template><ali-player v-if="playAuth" :vid="vid" :playauth="playAuth" :height="height"></ali-player>
</template><script type="text/ecmascript-6">import aliPlayer from './ali-player/ali-player'export default {name: 'in-video',props: {vid: {type: String,default: '0'}},data () {return {playAuth: ''}},watch: {'vid' (val) {this._getPlayAuth(val)}},computed: {// 高度自适应height () {let width = document.documentElement.clientWidthreturn `${width / 1.7777778}px`}},methods: {// 获取视频鉴权地址_getPlayAuth (val) {this.$fetch.video.auth({videoId: val}).then((res) => {this.playAuth = res.data})}},components: {aliPlayer}}
</script><style lang="stylus" rel="stylesheet/stylus"></style>

vue-aliplayer 阿里云播放器适配 vue相关推荐

关于，VUE中，阿里云播放器报错：Aliplayer is not defined。
VUE中,阿里云播放器报错:Aliplayer is not defined.-Java-CSDN问答感谢@iMingzhen大哥的解答!
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
h5阿里云播放器常规使用
阿里云播放器: 引入js和css <script type="text/javascript" charset="utf-8" src="htt ...
阿里云播放器AliyunPlayer的走马灯组件的位置
引入当前组件, 播放器配置中添加如下代码: components: [{name: 'BulletScreenComponent',type: AliPlayerComponent.BulletScr ...
解决ijkplayer和阿里云播放器冲突的解决
ijkplayer和阿里云播放器的冲突问题解决今天遇到导入阿里云的播放器跟自身的ijkplayer播放器产生冲突的问题 ijkplayer 报错 IJKSDLGLView: setupDisplay ...
Swift 第三方播放器AliyunPlayer,音乐(阿里云播放器)(源码)
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
腾讯迁移至阿里云播放器
目前APP中视频模块使用了腾讯及阿里两套播放器,造成维护困难.包体增大.恰逢开谈项目下线决定进行播放器业务迁移. 首先需要熟悉一下各个播放器的使用方法以及业务中的应用场景.涉及的模块包括直播拉流.直播 ...
苹果CMS V10 整合阿里云播放器-带记忆播放
这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 有人会说,我用ck .dp不好吗?为啥要用aliplayer,阿里播放器的记忆功能很给力,比如手机播放页面在后台放了很久,隔了几天 ...

vue-aliplayer 阿里云播放器适配 vue

更多精彩

官网

插件源码

组件封装

vue-aliplayer 阿里云播放器适配 vue相关推荐

最新文章

热门文章