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 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
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函数
2011/05/31 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JavaScript中数组常见操作技巧
2017/09/01 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Django admin美化插件suit使用示例
2017/12/12 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Django 静态文件配置过程详解
2019/07/23 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Python如何输出警告信息
2020/07/30 Python
英语翻译系毕业生求职信
2013/09/29 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技