vue-video是基于 Vue 的简洁 HTML5 视频播放器组件,但是并没有监听touch事件,也就是说在移动端按键无效。

  本文讲述如何改写其vue组件,使其兼容移动端。只需要在其原有的mouse事件上,再额外添加touch事件即可。

  html部分

<div class="__cov-video-container" @mouseenter="mouseEnterVideo" @mouseleave="mouseLeaveVideo" @touchstart.native="toggleContrlShow">
<div class="__cov-contrl-video-slider" @click="slideClick" @mousedown="videoMove" @touchstart="videoMove">
<div class="__cov-contrl-vol-slider" @click="volSlideClick" @mousedown="volMove" @touchstart="videoMove">

 js部分

mounted () { //以前vedio版本钩子函数ready被替换成了mounted,此次需更改
this.$nextTick(function () {
// 代码保证 this.$el 在 document 中
this.$video = this.$el.getElementsByTagName('video')[0]
this.init()
if (this.options.autoplay) {
this.play()
}
//添加监听touch事件
document.body.addEventListener('mousemove', this.mouseMoveAction, false)
document.body.addEventListener('touchmove', this.mouseMoveAction, false)
document.body.addEventListener('mouseup', this.mouseUpAction, false)
document.body.addEventListener('touchend', this.mouseUpAction, false) })
},
beforeDestroy () {
document.body.removeEventListener('mousemove', this.mouseMoveAction)
document.body.removeEventListener('touchmove', this.mouseMoveAction)
document.body.removeEventListener('mouseup', this.mouseUpAction)
document.body.removeEventListener('touchend', this.mouseUpAction)
},

这样就可以实现了对移动端的兼容。

如果需要在父组件调用该组件,推荐添加pause方法

pause(){  //添加暂停
this.$video.pause()
},

通过ref在父组件,调用子组件的方法。如

this.$refs.myV[0].pause();

vue-video监听touch事件的更多相关文章

  1. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  2. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  3. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  4. vue监听滚动事件,实现滚动监听

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

  5. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  6. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  7. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  8. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  9. vue之监听事件

    一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式  用@代替 v-on: <button v-on:click="co ...

随机推荐

  1. robot_framework Authorization 解决登录超时问题(token)

    写rf的接口时,遇到总是报错提示: 登录超时 解决过程: 1 . 通过对同一个接口进行手机抓包对比,发现该接口请求时,多了Authorization,需要HTTP Basic Authenticati ...

  2. Alamofire源码导读四:统计信息

     时间顺序如上图: self.latency = initialResponseTime - requestStartTime self.requestDuration = requestCompl ...

  3. 【10】JMicro微服务-API网关

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到9小节 1. Api网关基本特性: Api网关作为对外网提供服务的基本入口,地位类似于NGINX, ...

  4. django 的ajax 请求,使用form的验证机制。

    所有的form都需要在后台验证,前台验证是不可靠的,django的验证是后台验证,前台提示错误信息. js验证是在前台的,无需发送消息给后台,但安全性不可靠,强调的是用户体验. 要求,使用弹出框,弹出 ...

  5. Jasmine入门(下)

    上一篇 Jasmine入门(上) 介绍了Jasmine以及一些基本的用法,本篇我们继续研究Jasmine的其他一些特性及其用法(注:本篇中的例子均来自于官方文档). Spy Spy用来追踪函数的调用历 ...

  6. JS优先队列排序。出队时,先找出优先级最高的元素,再按照先进先出出队。

    JS优先队列排序.出队时,先找出优先级最高的元素,再按照先进先出出队. /* * 优先队列 * 出队时,先找出优先级最高的元素,再按照先进先出出队. * */ function Queue(){ th ...

  7. json,DataTable,model

    1.DataTable转json public class DataTableConvertJson { #region dataTable转换成Json格式 /// <summary> ...

  8. django框架--cookie/session

    目录 一.http协议无状态问题 二.会话跟踪技术--cookie 1.对cookie的理解 2.cookie的使用接口 3.cookie的属性 4.使用cookie的问题 三.会话跟踪技术--ses ...

  9. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  10. 蝴蝶效应--由'sudo -s ...'引发的vim autocmd使用异常

    1. 背景介绍 自加入RedHat起,我就把家里的台式机(Ubuntu 16.04 LTS)的默认登录用户veli切换成了huanli, 主要是为了跟公司的电脑配置对齐以方便未来WFH,但引发了一个v ...