先搞个原生的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. 解决iview拖动头部横向滚动问题

    Vue.directive('dragsroll', { bind (my_el) { let elHeader = my_el.querySelector('div.ivu-table-header ...

  2. XXE漏洞初步练手

    0x00:XXE定义 xml外部实体注入被我们称为XXE.因为实体可以通过预定义在文档中被调用,而实体的标识符又可以访问本地或者远程内容,当允许引用外部实体时,攻击者便可以构造恶意内容来达到攻击.

  3. JetCache源码整理

  4. getClassLoader

    类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源程序(.java 文件)在经过 Java 编译器编 ...

  5. 剑指 Offer II 树

    我为什么要把代码粘在这里 断更很久了,基于一个错误的观念:我想看题,我到leetcode官网看不就行了吗? 但是若干年后我可能还会到我的博客园看看呀,我有可能上刷题网站吗?而且心得不好写到注释上. 记 ...

  6. （0303）怎么在sequence中调用agent中的函数以及如何快速实验你的想法？

    https://mp.weixin.qq.com/s/9hDz9-nur5szBib18_yPnA

  7. 调度器43—migration 内核线程

    基于LInux-5.10 相关:Linux内核机制-smp_hotplug_thread:https://www.cnblogs.com/hellokitty2/p/17114737.html 一.相 ...

  8. 【服务器数据恢复】热备盘同步失败导致数据丢失的raid5数据恢复案例

    服务器数据恢复环境:华为s系列服务器:24块硬盘组成一组raid5磁盘阵列,其中包含1块热备盘. 服务器故障&检测:服务器工作状态下raid5中有一块硬盘离线,热备盘激活替换离线硬盘并开始进行 ...

  9. 关于matlab2011b 32bit无法成功激活

    matlab2011b版本已经很少见了 下载链接:Matlab_R2011B.Win32.iso_免费高速下载|百度网盘-分享无限制 (baidu.com) 解决办法:(参考原博) (43条消息) M ...

  10. 【git】2.5远程仓库的使用

    资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93% ...