先搞个原生的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. vue项目打包后的文件如何在本地访问

    你是不是一直存在个困惑?vue项目build出来的dist文件夹下index.html直接点开始控制台一顿报错.今天咱就给他治服. 解决方案就是本地启动一个node服务.详细步骤如下: 创建项目 np ...

  2. docker部署rocketmq

    docker pull foxiswho/rocketmq:server-4.7.0  (拉取镜像) docker pull foxiswho/rocketmq:broker-4.7.0 (拉取镜像) ...

  3. kubeSphere+kubernetes 集群更新证书

    模拟问题点 使用kubernetes时错误提示 yang@master:~$ kubectl get nodes Unable to connect to the server: x509: cert ...

  4. CentOS 7关闭防火墙 SElinux 配ip

    屏蔽出站 iptables -t filter -A OUTPUT --dst 192.168.0.191/32 -j DROP iptables -t filter -A OUTPUT --dst ...

  5. 创建一个httpserver、httpclient

    最近因为要和java进行通信.约定好使用http协议进行消息传递.在网上找了很久server编写发现有个博主写的很详细,因此把东西记录下来以便下次使用.这是原博主网址:https://blog.csd ...

  6. 25 String 对象中的属性

    <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF ...

  7. 12组-Beta冲刺-总结

    组长博客链接 https://www.cnblogs.com/147258369k/p/15615820.html 一.基本情况 1.1 现场答辩总结 柯老师意见: 面向普通用户群体推出排行榜功能 增 ...

  8. Java基础学习：6、方法的重载和可变参数

    一.方法重载: 基本介绍: Java中允许在一个类中,多个同名方法的存在,到要求形参列表不一致. 注意事项: 1.方法名:必须一致. 2.形参列表:必须不同(形参类型或个数或顺序至少有一样不同,参数名 ...

  9. Vue源码中的数据代理

    直接开讲: ​ 由于这个Vue底层封装的函数太多了,我这里只讲思路不说具体的执行了什么函数. ​ const vm=new Vue({这里写一个data,可以是对象也可以是函数}) 在写这段代码的时候 ...

  10. 使用ADB拷贝Android设备的文件夹

    在当前目录下执行,拷贝到当前目录.   拷贝照片 adb pull sdcard/DCIM   删除照片 adb shell rm -rvf sdcard/DCIM   拷贝图片 adb pull s ...