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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python 产生token及token验证的方法
2018/12/26 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python中的协程深入理解
2019/06/10 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
客户代表实习人员自我鉴定
2013/09/27 职场文书
物业管理工作方案
2014/05/10 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014最新实习证明模板
2014/10/02 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2016银行求职自荐信
2016/01/28 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers