vue-dplayer 视频播放器实例代码


Posted in Javascript onNovember 08, 2019

官网

vue-dplayer

dplayer-doc

示例

如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的

需要先获取到播放器的实例 this.$refs.player.dp ,然后通过 switchVideo() 对 url 进行修改

<template>
 <d-player ref="player" :options="options"></d-player>
</template>

<script type="text/ecmascript-6">
 import dPlayer from 'vue-dplayer'
 import 'vue-dplayer/dist/vue-dplayer.css'

 export default {
 name: 'in-video',
 props: {
  source: {
  type: String,
  default: ''
  }
 },
 data () {
  return {
  player: null,
  options: {
   video: {
   url: ''
   },
   contextmenu: [
   {}
   ]
  }
  }
 },
 mounted() {
  this.player = this.$refs.player.dp
 },
 created() {
  this._setVideoUrl(this.source)
 },
 methods: {
  // 设置视频播放路径
  _setVideoUrl (url) {
  this.player.switchVideo({
   url: url
  })
  }
 },
 components: {
  dPlayer
 }
 }
</script>

Javascript 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
vue使用element-ui按需引入
May 20 Vue.js
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 #Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 #Javascript
浅谈Vue中render中的h箭头函数
Nov 07 #Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
学习php分页代码实例
2013/10/24 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php常用图片处理类
2016/03/16 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
javascript三元运算符用法实例
2015/04/16 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python中退出多层循环的方法
2018/11/27 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
初三物理教学反思
2014/01/21 职场文书
大学生社团活动总结
2014/04/26 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书