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

 更新时间:2019-11-08 09:48:56   作者:佚名   我要评论(0)

官网
vue-dplayer
dplayer-doc
示例
如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的
需要先获取到播

官网

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>


您可能感兴趣的文章:

  • vue通过video.js解决m3u8视频播放格式的方法
  • vue使用video.js进行视频播放功能
  • vue实现自定义H5视频播放器的方法步骤
  • vue2.0实现音乐/视频播放进度条组件
  • vue视频播放暂停代码

相关文章

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

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

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播
    2019-11-08
  • vue.js的简单自动求和计算实例

    vue.js的简单自动求和计算实例

    一、导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="http://files.jb51.net/file_images/article/201911/2019110809
    2019-11-08
  • flask框架自定义过滤器示例【markdown文件读取和展示功能】

    flask框架自定义过滤器示例【markdown文件读取和展示功能】

    本文实例讲述了flask框架自定义过滤器。分享给大家供大家参考,具体如下: 除了一些内置的join length safe等过滤器外, flask还提供了自定义过滤器的功能. 一. 自定
    2019-11-08
  • SpringBoot yml配置文件调用过程解析

    SpringBoot yml配置文件调用过程解析

    这篇文章主要介绍了SpringBoot yml配置文件调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1、y
    2019-11-08
  • shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    需求 批量实现自动发送公钥到远程主机 环境 firewalld:关闭 selinux:关闭 实现方式 sshpass命令 shell调用expect命令 sshpass命令 #
    2019-11-08
  • Django框架下静态模板的继承操作示例

    Django框架下静态模板的继承操作示例

    本文实例讲述了Django框架下静态模板的继承操作。分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下。 开发环境:pyt
    2019-11-08
  • vue视频播放暂停代码

    vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
    2019-11-08
  • 详解使用Spring快速创建web应用的两种方式

    详解使用Spring快速创建web应用的两种方式

    介绍 本篇文章主要介绍,如何使用 Spring 开发一个 Web 应用。 我们将研究用 Spring Boot 开发一个 web 应用,并研究用非 Spring Boot 的方法。 我们将主要
    2019-11-08
  • 使用go在mangodb中进行CRUD操作

    使用go在mangodb中进行CRUD操作

    我在学习go语言之前,在对数据库进行CRUD的操作基本是用java和sql来对mysql数据库进行操作,但是到了实习中公司业务都是用的是mangodb,通过一段学习时间后,
    2019-10-08
  • Win10 系统下快速搭建mxnet框架cpu版本

    Win10 系统下快速搭建mxnet框架cpu版本

    Win10 系统下快速搭建mxnet框架cpu版本 一:安装Anaconda 1. 从官方网站下载 https://www.anaconda.com/download/ 建议下载python 3.7版本的Anaconda 2.
    2019-10-08

最新评论