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

官网

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>
赞 (0)

相关推荐

  • vue实现自定义H5视频播放器的方法步骤

    前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采

  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

  • vue使用video.js进行视频播放功能

    关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide

  • vue通过video.js解决m3u8视频播放格式的方法

    vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video html页面 <video id="vide" class="video-js v2 ani resize" autoplay :src="视频地址" type="

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

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$refs.player.dp ,然后通过 switchVideo() 对 url 进行修改 <template> <d-player ref="player" :options="options">

  • vue 中的keep-alive实例代码

    Vue 实现组件信息的缓存 当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 一.在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下:

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

  • vue中的过滤器实例代码详解

    过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper

  • Python 带有参数的装饰器实例代码详解

    demo.py(装饰器,带参数的装饰器): def set_level(level_num): def set_func(func): def call_func(*args, **kwargs): if level_num == 1: print("----权限级别1,验证----") elif level_num == 2: print("----权限级别2,验证----") return func() return call_func return set_f

  • C++制作鼠标连点器实例代码

    众所周知······ 鼠标连点器是个东西······ 那么你会编吗?······ 尤其是用C++的那种······ 不会也没有关系,今天,同我一起,看看就会. #include<stdio.h> #include<windows.h> int main() { while(1) { if(GetAsyncKeyState(VK_SPACE))//按下空格,开始执行 { while(1) { mouse_event(MOUSEEVENTF_LEFTDOWN|MOUSEEVENTF_L

  • vue axios请求拦截实例代码

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 下面代码给大家介绍vue axios 请求拦截,具体代码如下所示: import axios from 'axios';//引入axios依赖 imp

  • Python应用03 使用PyQT制作视频播放器实例

    Python应用03 使用PyQT制作视频播放器实例

    最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放器,并借此来说明PyQT的基本用法.  视频播放器 先把已经完成的代码放出来.代码基于Python 3.5: import time import sys from PyQt4 import QtGui, QtCore from PyQt4.phonon import Phonon class Po

  • Vue作用域插槽slot-scope实例代码

    vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot

  • C语言音乐播放器实例代码

    C语言音乐播放器实例代码

    实例代码如下: #include <stdio.h> #include<dirent.h> #include<stdlib.h> #include<unistd.h> #include<string.h> typedef struct node_ node_t; struct node_{ char* name;//gequming node_t * prev; node_t * next; }; node_t *head = NULL; int

随机推荐