vue-aliplayer 阿里云播放器适配 vue [新]

阿里云的点播/直播播放器本身没有对 vue 进行支持，以下会对 aliplayer 做简单封装，让其支持 vue

之前写过的内容

vue-aliplayer 阿里云播放器适配 vue
上文是之前写的一个让 aliplayer 适配 vue 的笔记，是基于 github 上一个现成的库做的二次封装
但实际使用后发现其本身有一些缺陷，而且大部分封装功能自己也用不到
所以这次直接引入 aliplayer 的源码直接进行封装，实现按需开发

实现效果

底部的输入框直接使用的 Element-UI 的组件，输入 vid 后按右侧按钮可以实现快速切换视频源

具体实现

inIcon 只是一个自行封装的图标组件，内部使用的是 font-awesome 的图标库，不影响播放器组件本身实现
输入并切换视频 id 的输入框和按钮直接使用的 Element-UI 组件，不影响播放器组件本身实现

<template><div class="in-player-panel"><div class="in-player":id="playerId"></div><el-input placeholder="请输入视频vid" v-model="videoId"><el-button slot="append"@click="changePlayAuth"><in-icon name="play-circle"></in-icon></el-button></el-input></div>
</template><script type="text/ecmascript-6">import inIcon from 'components/in-icon/in-icon'// aliplayer h5 格式播放器的 js 地址const jsPath = 'http://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-h5-min.js'// aliplayer h5 格式播放器的 css 地址const cssPath = 'http://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css'// 视频的长宽比例，采用 width / height 得到，基本按照 16:9 获取const ratio = 1.78export default {name: 'in-player',props: {// 父容器传入的视频 vidvid: String,// 父容器传入的播放器宽度width: Number,// 父容器传入的播放器高度height: Number},data () {return {// 内部真是的 vidvideoId: this.vid,// 默认宽度defaultWidth: 718,// 默认高度defaultHeight: 400,// 每个播放器都具有单独的 idplayerId: 'inPlayer' + Math.random() * 100000000000000000,// 通过 vid 从后端获取到的鉴权地址playAuth: null,// 播放器实例inPlayer: null}},computed: {// 计算后得到的真实宽度realWidth () {// 如果从外部传入了高度，则按照外部高度乘以宽高比，获取真实宽度，否则按照默认高度计算return `${(this.height || this.defaultHeight) * ratio}px`},// 计算后得到真实高度realHeight () {// 如果从外部传入了宽度，则按照外部宽度乘以宽高比，获取真实高度，否则按照默认宽度计算return `${(this.width || this.defaultWidth) / ratio}px`}},mounted () {// 在 mounted() 中初始化播放器，是为了确保基本元素都已经加载this._initialize()},methods: {// 初始化_initialize () {// 判断播放器全局实例是否已存在，只有当播放器依赖的 JS 加载完成后，播放器的全局实例才存在if (!window.Aliplayer) {// 尝试获取播放器的 JS 标签let inPlayerScriptTag = document.getElementById('inPlayerScriptTag')// 判断JS是否已存在if (!inPlayerScriptTag) {// 不存在则创建 JS 标签inPlayerScriptTag = document.createElement('script')inPlayerScriptTag.type = 'text/javascript'// 指定 JS 的地址inPlayerScriptTag.src = jsPath// 指定 JS 的 IDinPlayerScriptTag.id = 'inPlayerScriptTag'// JS 不存在说明 CSS 也不存在，则创建 CSS 标签let inPlayerLinkTag = document.createElement('link')inPlayerLinkTag.type = 'text/css'inPlayerLinkTag.rel = 'stylesheet'// 指定 CSS 的地址inPlayerLinkTag.href = cssPath// 获取页面的 <head> 标签let head = document.getElementsByTagName('head')[0]// 将 JS 和 CSS 插入到 DOM 中head.appendChild(inPlayerScriptTag)head.appendChild(inPlayerLinkTag)}// JS 插入并加载完成if (inPlayerScriptTag.loaded) {// 初始化播放器this._initPlayer()} else {// JS 没有加载完成，则监听 JS 的加载事件inPlayerScriptTag.addEventListener('load', () => {// JS 确认加载完成后，初始化播放器this._initPlayer()})}} else {// 全局实例存在则直接初始化播放器this._initPlayer()}},// 初始化播放器_initPlayer () {// 确保 DOM 元素都已经渲染完毕this.$nextTick(() => {// 判断播放器实例是否存在if (!this.inPlayer) {// 获取鉴权地址，从后端获取this.$fetch.video.auth({vid: this.videoId}).then((res) => {// 接收从后端获取的鉴权地址，后端实现不赘述this.playAuth = res.data// 初始化播放器this.inPlayer = window.Aliplayer({// 播放器 IDid: this.playerId,// 视频的 VIDvid: this.videoId,// 鉴权地址playauth: this.playAuth,// 宽度width: this.realWidth,// 高度height: this.realHeight,// 使用 H5 格式useH5Prism: true,// 不是直播 isLive: false,// 不自动播放autoplay: false})})} else {// 存在播放器实例则先销毁组件this.inPlayer.dispose()// 将播放器实例重置this.inPlayer = null// 清空播放器 DOM 内容document.getElementById(this.playerId).innerHTML = ''// 再次初始化this._initPlayer()}})},// 更新播放地址changePlayAuth () {// 重新初始化this._initPlayer()}},components: {inIcon}}
</script><style lang="stylus" rel="stylesheet/stylus">@import "~assets/stylus/variable.styl".in-player-paneldisplay flexflex-direction column.in-playerflex-grow 1border 1px solid $color-borderborder-bottom noneborder-top-left-radius 4pxborder-top-right-radius 4pxoverflow hidden.el-inputflex 0 0 40px.el-input__innerborder-top-left-radius 0.el-input-group__appendborder-top-right-radius 0.in-iconfont-size $text-size-h
</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 [新]相关推荐

最新文章

热门文章