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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
javascript基本算法汇总
Mar 09 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
vue.js语法及常用指令
Oct 29 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Node.js API详解之 zlib模块用法分析
May 19 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
77A一级收信机修理记
2021/03/02 无线电
PHP中PDO的错误处理
2011/09/04 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
图片按比例缩放函数
2006/06/26 Javascript
Script的加载方法小结
2011/01/12 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
JS之相等操作符详解
2016/09/13 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
学生自我鉴定范文
2013/10/04 职场文书
军训考核自我鉴定
2014/02/13 职场文书
小学生期末评语
2014/04/21 职场文书
党员检讨书
2014/10/13 职场文书
小学美术教学反思
2016/02/17 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
实现GO语言对数组切片去重
2022/04/20 Golang