vue-dplayer 视频播放器实例代码
官网
示例
如果默认 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>
相关推荐
-
vue2.0实现音乐/视频播放进度条组件
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口
-
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通过video.js解决m3u8视频播放格式的方法
前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,
-
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实现自定义H5视频播放器的方法步骤
前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采
-
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的两个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语言音乐播放器实例代码
实例代码如下: #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
随机推荐
- javascript学习笔记(五)原型和原型链详解
- 获取当前按钮或者html的ID名称实例(推荐)
- javascript动画效果类封装代码
- PHP实现多维数组转字符串和多维数组转一维数组的方法
- JavaScript实现信用卡校验方法
- 七步倒┈→专用asp后门
- ReplaceTrim 函数之asp实现过滤掉字符中所有的tab和回车和换行的代码
- 细说MySQL死锁与日志二三事
- TurboLinux常见问题解答
- jquery ajax请求实例深入解析
- ASP 获取腾讯IP地址的代码
- Java读取Properties文件几种方法总结
- Javascript实现信息滚动效果
- JavaScript事件学习小结(三)js事件对象
- SSM框架搭建图文教程(推荐)
- C#实现查杀本地与远程进程的方法
- PHP中散列密码的安全性分析
- python抓取网站的图片并下载到本地的方法
- ElementUI多个子组件表单的校验管理实现
- PyInstaller运行原理及常用操作详解