vue-aliplayer 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
vue-aliplayer 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
vue-aliplayer 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
vue-aliplayer 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
vue-aliplayer 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开源组织
地区 国产
投 递 者 产奶的蜗牛
适用人群 未知
收录时间 2017-10-25

软件简介

该软件为 vue2.0 的阿里云播放器组件

安装

npm install vue-aliplayer -S
yarn add vue-aliplayer -S

使用

import VueAliplayer from 'vue-aliplayer'

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

示例

<ali-player :source="视频url" :vid="视频vid" :playauth="播放鉴权" ref="player"></ali-player>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="replay">重播</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()
      }
    }
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
请问怎么切换视频的清晰度
2020/03/26 13:40
回复
举报
更多评论
暂无内容
发表了博客
2020/04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂时没发现这些错误对项目的运行和打包有啥影响,但是一句话,看着不爽。既然看着不爽,就想收拾它,怎么收拾...

0
3
2020/11/19 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
1
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 </head...

0
1
发表了博客
2020/08/22 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
0
发表于数据库专区
2020/01/02 10:21

VUE-认识Vue

1.认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度...

0
1
发表于数据库专区
2020/01/02 10:45

VUE-Vue实例

4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括: el data methods 等等 接下来我们一 一介绍。 4.2.模板或元素 每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。 我们可以通过el属性来指定。 例如一段html模板: <div id="app"> </div> 然后创...

0
0
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的。 MVC 与 前端中的 MVVM...

0
1
发表于数据库专区
2020/01/02 11:53

VUE-vue-cli

9.vue-cli 9.1.介绍和安装 在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。 幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。 官网:https://github.com/vuejs/vue-cli 安装命令:npm install -g vue-cli 9.2.快速上手 我们新建一个module: 切换到该目录: 用vue-cli命令,快速搭建一个webpack的项目:v...

0
0
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 生命周期钩子函数 作用范围 beforeCreate el,data都为undefined,还没有初始化...

0
2
发表了博客
2018/08/18 17:12

[vue]vue路由篇vue-router

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query http://localhost:63342/login?name=maotai&age=22 params: $route.params http://localhost:63342/login/maotai/22 引入router组件后, vm里注册router,会在vm实例上新增router属性 基础路由 匹配规则tag激活类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
18 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部