先搞个原生的video标签进来

<video

    ref="movie"

    class="video"

    src="static/movie.mp4"

    width="100%"

    controls

></video>

展示如下，自带的控制台里，播放/暂停，声音，全屏，下载等

一般没人用它，都喜欢自己弄个居中的播放按钮。。

搞吧，先弄俩 播放/暂停的 icon图标进来，

这里利用 $refs 去指定元素，绑定监听事件：

也可以用 元素选择器 去找到对应的  class

document.querySelector(".video") 
 
最后，为了体验好点，让它鼠标移出去就隐藏暂停按钮

简易美观的视频播放器就做好了。。

vue监听video标签播放暂停，中间按钮替换 controls控制台的更多相关文章

  1. jquery监听video标签视频播放暂停状态

    由于jquery中没有video的paly,pause方法,所以在使用jquery来控制视频的播放的播放状态时会出现问题 之前的代码: let $video = $('#video'); $('.pl ...

  2. 监听auduo标签播放

    <audio id="audio" controls="controls" loop="loop" style="displ ...

  3. vue监听input标签的value值方法

    <input id="materialSearch" type="text" @keyup.enter="search" @input ...

  4. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue 监听键盘,键盘修饰符keyup

    附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...

  6. vue监听滚动事件，实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  7. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  8. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  9. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  10. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

随机推荐

  1. 092_Schema获取表字段的方式

    Map<String, Schema.SObjectField> objectFields = Schema.getGlobalDescribe().get('ObjectName').g ...

  2. 在pycharm中安装虚拟环境

    1.安装python解释器 2.安装pytorch (1)查看当前虚拟环境 conda env list (2)进入自己的虚拟环境 source activate SCI(自己的虚拟环境名字) (3) ...

  3. jekins+svn

    1.jekins安装可以看jekins+shell随笔. 2.安装svn. yum -y install subversion 3.配置相关文件 mkdir   家目录 cd 到家目录修改conf下三 ...

  4. 关于CMDB

    关于CMDB: CMDB运维管理平台是由CMDB开发团队,针对目前服务器运维.监控,批量管理提出的一个开源. 易用.实用的跨平台服务器运维管理平台. 统筹来说cmdb就是将已有的规则化运维技术规则到运 ...

  5. pg9.6查询优化

    目录 1 样例数据集 2 explain基础 3 执行计划节点结构 3.1 基本代价计算 3.2 执行计划格式输出 4 组装行集合 4.1 扫描方式 4.2 处理节点 1 样例数据集 wget htt ...

  6. 1构建NTP时间服务器

    NTP时间服务器 NTP服务器是用于局域网服务器时间同步使用的,可以保证局域网所有的服务器与时间服务器的时间保持一致,某些应用对时间实时性要求高的必须统一时间. 互联网的时间服务器也有很多,例如ntp ...

  7. htmlApk:一个轻松在线打包生成双端app应用的网站

    htmlApk平台,基于HTML打包制作APP,只要有手机网站或者HTML文件,3分钟即可生成app多端应用,同时拥有苹果版和安卓版双系统APP,快速进入移动互联时代. 全面支持h5网址打包,可设置图 ...

  8. docker+react+nginx部署

    一.准备工作 1.先确保项目可以正常运行. 2.如果拉代码到Linux下进行打包,注意node版本,我就是版本不同,yarn build一直不成功. 3.找一个nginx的配置文件nginx.conf ...

  9. jwt二次加密失败原因(Bad “options.expiresIn“ option the payload already has an “exp“ property.)

    在写vue+nodejs项目的校验token时,出现了次错误 然后想了想问题所在: 第一次加密的时候使用jwt.sign(value,秘钥,{}),会返回一个字符串,然后当前端跳转别的发送请求时,会将 ...

  10. Symfony2在Nginx下的配置方法图文教程

    来源: https://www.xp.cn/b.php/79706.html Symfony2在Nginx下的配置方法图文教程 本文详细讲述了Symfony2在Nginx下的配置方法.分享给大家供大家 ...