vue+vue-video-player实现弹窗播放视频
将视频播放器标签放在对话框标签中,实现弹窗
template 中
<el-dialog
:visible.sync="dialogVisible"
width='680px'
heigth="400px"
top="15vh"
:before-close="handleClose">
<video-player class="vjs-default-skin vjs-big-play-centered"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
</video-player>
</el-dialog>
script 中的 data 中
playerOptions:{
height: '360',
sources: [{
type: "rtmp/mp4",
src:'',
}],
techOrder: ['flash'],
autoplay: false,
controls: true,
poster: "../../../src/static/img/poster.png"
},
如果想切换视频源,可用函数
this.playerOptions.sources[0].src = this.videoAddress;//videoAddress为传过来的变量
播放器播放/暂停触发的函数
onPlayerPlay:function () {
...
},
onPlayerPause:function () {
...
},
vue+vue-video-player实现弹窗播放视频的更多相关文章
- video 能播放声音不能播放视频,黑屏
与视频编码格式有关,mp4的视频编码有三种:MPEG4(DivX),MPEG4(Xvid),AVC(H264). 浏览器播放视频的支持有限,MP4格式的视频只支持h.264的视频: 视频编码: AVC ...
- 【WPF】使用控件MediaElement播放视频
需求是点击按钮后,弹出弹窗播放视频.按钮的点击事件如下. public void ShowVideo() { Window window = new Window(); window.Width = ...
- DragVideo,一种在播放视频时,可以任意拖拽的方案
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53638896 前言 项目已开源到 ...
- 【vue】使用 Video.js 播放视频
目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...
- vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" con ...
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- 手机浏览器自动播放视频video(设置autoplay无效)的解决方案
1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
随机推荐
- Mariadb相关
centos下Mariadb相关 MariaDB 是一个采用 Maria 存储引擎的MySQL分支版本,是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服 ...
- 第三月 day03.笔记
函数在调用的时候回形成一个私有作用域,内部变量不会被外面访问,这种保护机制叫做闭包,这就意味着函数调用完了,这个函数形成的栈内存就会被销毁,但有时候我们不希望被销毁. * 函数归属谁和他的调用没有关系 ...
- 数据结构09—— 并查集(Union-Find)
一.关于并查集 并查集(Union-Find)是一种树型的数据结构,常用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.并查集(Union-Find)从名字可以看出,主要它涉及两种 ...
- Delphi 调试连接 任意Android手机/平板/盒子
Delphi有时候无法连接调试一些手机,解决方案: 1.安装Google USB Driver 2.通过设备管理器查看手机或平板USB的VID,PID 3.修改你的电脑上的android_winusb ...
- PTA基础编程题目集6-4求自定类型元素的平均 (函数题)
6-4 求自定类型元素的平均 (10 分) 本题要求实现一个函数,求N个集合元素S[]的平均值,其中集合元素的类型为自定义的ElementType. 函数接口定义: ElementType Aver ...
- 20155216 2016-2017-2 《Java程序设计》第七周学习总结
20155216 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 认识Lambda表达式语法 Lambda表达式不需要也不允许使用throws关键字来声明可能 ...
- 20155230 2016-2017-2《Java程序设计》第二周学习总结
20155230 2016-2017-2 <Java程序设计>第er周学习总结 教材学习内容总结 JAVA编程风格 1.命名变量时不可以使用数字及特殊字符作为开头. 2.变量名称不可以与J ...
- 无法获得锁 /var/lib/apt/lists/lock - open (11 资源临时不可用)
具体如下: 1.ps-aux 查出apt-get进程的PID,通常是一个四位数字. 2.用sudo kill PID代码 杀死进程 3.用sudo apt-get update,sudo apt-ge ...
- Caliburn.Micro - IResult and Coroutines
IResult and Coroutines 翻译[三台]:网址[http://home.cnblogs.com/u/3Tai/] Previously, I mentioned that there ...
- tkinter界面卡死的解决办法
0.如果点击按钮,运行了一个比较耗时的操作,那么界面会卡死 import tkinter as tk import time def onclick(text, i): time.sleep(3) t ...