将视频播放器标签放在对话框标签中,实现弹窗

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实现弹窗播放视频的更多相关文章

  1. video 能播放声音不能播放视频,黑屏

    与视频编码格式有关,mp4的视频编码有三种:MPEG4(DivX),MPEG4(Xvid),AVC(H264). 浏览器播放视频的支持有限,MP4格式的视频只支持h.264的视频: 视频编码: AVC ...

  2. 【WPF】使用控件MediaElement播放视频

    需求是点击按钮后,弹出弹窗播放视频.按钮的点击事件如下. public void ShowVideo() { Window window = new Window(); window.Width = ...

  3. DragVideo,一种在播放视频时,可以任意拖拽的方案

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53638896 前言 项目已开源到 ...

  4. 【vue】使用 Video.js 播放视频

    目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...

  5. vue使用 video.js动态切换视频源视频源不刷新问题

    网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video  id="my-player" con ...

  6. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

  7. vue基于video.js实现视频播放暂停---切图网

    切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...

  8. 手机浏览器自动播放视频video(设置autoplay无效)的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  9. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

随机推荐

  1. Mariadb相关

    centos下Mariadb相关 MariaDB 是一个采用 Maria 存储引擎的MySQL分支版本,是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服 ...

  2. 第三月 day03.笔记

    函数在调用的时候回形成一个私有作用域,内部变量不会被外面访问,这种保护机制叫做闭包,这就意味着函数调用完了,这个函数形成的栈内存就会被销毁,但有时候我们不希望被销毁. * 函数归属谁和他的调用没有关系 ...

  3. 数据结构09—— 并查集(Union-Find)

    一.关于并查集 并查集(Union-Find)是一种树型的数据结构,常用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.并查集(Union-Find)从名字可以看出,主要它涉及两种 ...

  4. Delphi 调试连接 任意Android手机/平板/盒子

    Delphi有时候无法连接调试一些手机,解决方案: 1.安装Google USB Driver 2.通过设备管理器查看手机或平板USB的VID,PID 3.修改你的电脑上的android_winusb ...

  5. PTA基础编程题目集6-4求自定类型元素的平均 (函数题)

    6-4 求自定类型元素的平均 (10 分)  本题要求实现一个函数,求N个集合元素S[]的平均值,其中集合元素的类型为自定义的ElementType. 函数接口定义: ElementType Aver ...

  6. 20155216 2016-2017-2 《Java程序设计》第七周学习总结

    20155216 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 认识Lambda表达式语法 Lambda表达式不需要也不允许使用throws关键字来声明可能 ...

  7. 20155230 2016-2017-2《Java程序设计》第二周学习总结

    20155230 2016-2017-2 <Java程序设计>第er周学习总结 教材学习内容总结 JAVA编程风格 1.命名变量时不可以使用数字及特殊字符作为开头. 2.变量名称不可以与J ...

  8. 无法获得锁 /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 ...

  9. Caliburn.Micro - IResult and Coroutines

    IResult and Coroutines 翻译[三台]:网址[http://home.cnblogs.com/u/3Tai/] Previously, I mentioned that there ...

  10. tkinter界面卡死的解决办法

    0.如果点击按钮,运行了一个比较耗时的操作,那么界面会卡死 import tkinter as tk import time def onclick(text, i): time.sleep(3) t ...