先搞个原生的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. docker 部署rocketmq 4.4

    1 mkdir -p /home/rocketmq/{name_server,broker,console} 2 mkdir -p /home/rocketmq/name_server/{logs,s ...

  2. 神奇的Object.assign()

    Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 1.Object.assign()可以在对象为一层的时候,实现简单的"深拷 ...

  3. Java笔记_递归回溯之小老鼠出迷宫问题

    递归回溯之小老鼠出迷宫问题 直接看代码 /** * @ClassName MiGong01 * @Description TODO * @Author Orange * @Date 2021/4/16 ...

  4. csdn 复制

    $("#content_views pre").css("user-select","text"); $("#content_vi ...

  5. 小白之Python-基础中的基础04

    继续.. ------------------------华丽的分界线----------------------------- Python-基础中的基础04 --之方法 格式:对象.方法() 1. ...

  6. Quartz 2D CGPattern学习笔记

    CGPattern是在图形上下文中重复绘制的一系列绘制操作.你可以像使用颜色一样使用图案.当使用CGPattern进行绘制时,Quartz将页面划分为一组图案单元格,每个单元格的大小为CGPatter ...

  7. js中的base64转化

    创建一个base64.js文件,将以下代码粘贴进去 var Base64= { _keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst ...

  8. sap软件功能介绍及主要功能（模块）有哪些？

    SAP 成立于 1972 年,最初称为 System Analysis Program Development (Systemanalyse Programmentwicklung),后来采用缩写 S ...

  9. Systrace学习记录

    「置顶」Android 性能优化必知必会[大量文章] https://androidperformance.com/2018/05/07/Android-performance-optimizatio ...

  10. Java学习笔记-11

    StringBuffer:是字符串缓冲区,是一个容器.长度是固定的,可以直接添加多个数据类型.最终回通过toString方法变成字符串. 容器具备的特点:存储,删除,获取,修改 存储操作: Strin ...