先搞个原生的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. Unity UI 识别画圆手势

    最近做了一个项目,需要打开一个编辑UI,平时不显示,如果在UI界面上做一个按钮,感觉很丑,就想到了Reporter_Logs的画圆触发. 识别到你在界面上画了一个圆 (可用于 Windows 和 An ...

  2. JavaScript 静态方法

    JavaScript 静态方法 静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象,在实例化对象之前可以通过 类名.方法名 调用静态方法. 静态方法不能在对象上调用,只 ...

  3. Linux 在miniconda和anaconda同时安装时，卸载miniconda

    1. 找到miniconda目录,删除. rm -rf miniconda3/ 2. 编辑bashrc sudo vim .bashrc setup路径改回anaconda3的,注释掉"&g ...

  4. Workbench download Document

    1. package.xml <?xml version="1.0" encoding="UTF-8"?> <Package xmlns=&q ...

  5. linux服务器连接数查询

    linux服务器环境检查 CPU.内存使用情况 查看系统整体执行情况 命令执行 # 查看当前系统正在执行的进程的相关信息,包括进程ID.内存占用率.CPU占用率等 top # 返回结果 # 14:06 ...

  6. win10系统IE浏览器打不开 点击无反应 解决办法

    打开左下角开始菜单 步骤阅读 2 点击右边的Cortana,在下面的输入框中输入:regedit,等待它自动搜索出来后,以管理员身份打开这个注册表编辑器:当然熟悉电脑的同学可以直接打开运行----re ...

  7. mybatis判断是否为空或null

    <if test="catagoryCode != null and catagoryCode != ''"> AND train.CATAGORY_CODE = #{ ...

  8. KingbaseES V8R3集群运维案例之---kingbase_monitor.sh启动”two master“案例

    案例说明: KingbaseES V8R3集群,执行kingbase_monitor.sh启动集群,出现"two master"节点的故障,启动集群失败:通过手工sys_ctl启动 ...

  9. ASP.NET中maxRequestLength和maxAllowedContentLength的区别；上传大文件设置IIS7文件上传的最大大小

    https://blog.csdn.net/qq_23663693/article/details/89920039 maxRequestLength表示ASP支持的最大请求大小,而maxAllowe ...

  10. vscode 终端中运行执行js文件

    问题汇总 1.在vscode中执行node -v没有反应或者执行js文件出现下图错误 解决办法: 1.先关闭vscode,找到vscode的执行文件,在兼容性中勾上以管理员身份运行此程序,该问题win ...