vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog 弹出aliplayer播放

先上效果图

1.需要将当前版javascript css脚本导入index.html（最新版请看官网）

官网：aliyun

这里我给index.html位置防止有人不知道

我的版本：

    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-min.js"></script>

2.在vue中使用aliplayer

<router-link to="/courseinfo" @click.native="playVedio"><li style="clear: both;"><div class="smallcircle"></div><p>第一节</p></li></router-link>

playVedio(){

//const height=this.$refs.main.clientHeight;

this.disable=true;

//console.log("我被执行了")

},

使用a标签控制dialog弹出

 <el-dialog :destroy-on-close="true"  @opened="opena"  :visible="disable" title="任务预览"  @close="closedialog"><div > <div id="J_prismPlayer" class="prism-player"/></div></el-dialog>

dialog注册打开后opened事件（因为aliplayer的创建时机是需要控制创建时机的，不然会找不到容器）

opened事件注册aliplayer

opena(){console.log('...')new Aliplayer({id: 'J_prismPlayer',vid:'6405be34fe984a16a3253b95b71e29dd',#播放idplayauth:'', #播放凭证width: '100%', height: '450px',// 以下可选设置  qualitySort: 'asc', // 清晰度排序mediaType: 'video', // 返回音频还是视频autoplay: false, // 自动播放isLive: false, // 直播rePlay: false, // 循环播放preload: true,controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停useH5Prism: true, // 播放器类型：html5}, function (player) {console.log('播放器创建成功')});
}

vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog 弹出aliplayer播放相关推荐

Spring Boot集成阿里云视频点播服务的过程记录
阿里云视频点播效果预览视频点播视频点播概述功能优势流程环境准备开通视频点播创建RAM用户并授权上传SDK 上传流程下载上传SDK 安装上传SDK 集成Java上传SDK 异常说明 ...
springboot整合阿里云视频点播服务Vod——实现视频上传、删除、播放
视频点播(ApsaraVideo VoD,简称VoD)是集视频采集.编辑.上传.媒体资源管理.自动化转码处理(窄带高清™).视频审核分析.分发加速于一体的一站式音视频点播解决方案. 阿里云视频点播服务 ...
阿里云微服务引擎MSE网关功能，开启微服务“大门”云化时代
简介:微服务网关被作为微服务面向客户端的单一入口,用来处理横向的关注点,包括访问控制.速率限制.负载均衡等等.真正用起来时,我们还需要关注更多的纵向因素,例如服务发现能力.更全面的监控可观测能力.更高 ...
Android 快速集成阿里云OSS服务2020
一.兼单快速集成 1.打开阿里云官网 https://www.aliyun.com并注册账号,然后登陆 2.在阿里云主页选择产品分类,再选择对象存储OSS 3.点击帮助文档开始进行集成 (1).点击帮 ...
Vue之集成阿里云滑块验证
采用阿里云的滑块验证,首先注册并申请appKey. public > index.html中引入js <head><meta charset="utf-8" ...
Golang操作阿里云视频点播服务上传音视频
刚刚了解了OSS存储,现在需要了解视频点播服务,什么是视频点播服务?为什么需要视频点播服务?OSS存储不是可以直接存储视频吗? 其实我也不很清楚,只是大体上知道视频点播服务是专门云端存储视频的,相比于 ...
java集成阿里云短信，实现登录功能
1.申请阿里云账号,获取签名模板和key和id 具体代码实现 package com.ezeyc.edpbfqz.api.controller;import com.ezeyc.edpbase.uti ...
阿里云容器服务区块链解决方案全新升级支持Hyperledger Fabric v1.1
摘要: 全球开源区块链领域影响最为广泛的Hyperledger Fabric日前宣布了1.1版本的正式发布,带来了一系列丰富的新功能以及在安全性.性能与扩展性等方面的显著提升.阿里云容器服务区块链解决 ...
mysql servicebroker_阿里云Kubernetes服务 - Service Broker快速入门指南
4月底阿里云容器服务上线了基于Kubernetes集群的服务目录功能.阿里云的容器的服务目录遵循Open Service Broker API标准,提供了一系列的服务代理组件,实现了对主流开源服务如M ...
阿里云Kubernetes服务 - Service Broker快速入门指南
4月底阿里云容器服务上线了基于Kubernetes集群的服务目录功能.阿里云的容器的服务目录遵循Open Service Broker API标准,提供了一系列的服务代理组件,实现了对主流开源服务如M ...

vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog 弹出aliplayer播放

先上效果图

1.需要将当前版javascript css脚本导入index.html（最新版请看官网）

2.在vue中使用aliplayer

vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog 弹出aliplayer播放相关推荐

最新文章

热门文章