采用原生时间监听element.addEventListener(eventfunctionuseCapture)

           //监听播放时间
var video = document.getElementById(videoName);
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒数来显示当前播放进度
timeDisplay = Math.floor(video.currentTime);
var popCut=popTime //视频弹出时间
//当视频播放到 maxpopCut的时候做处理
if(timeDisplay == popCut||timeDisplay>popCut){
video.pause() //视频暂停 play();视频播放
video.setAttribute('src',''); //去除src内容
video.style.display="none";
$('.navBar').css('z-index','')
$('.layer-box').show()
var scroTop=$(document).scrollTop() //滚动条距离顶部的位置
$('.layer-box').css('top',scroTop+'px') //弹出框顶部位置
// 当弹出层出现的时候,禁止弹出层背景层滑动,阻止事件传递冒泡
function move(e){
e.preventDefault();//禁止事件冒泡
}
$('.layer-box').on('touchmove',move, false)//弹出层出现,弹出层的背景层阻止默认滑动事件
$('.share-btn').click(function(){
console.log('跳转 ')
window.location.href="${path}/share/toShare?id="+webPageId
//window.open("${path}/share/toShare?id="+webPageId)
//$('.navBar').css('z-index','99')
})
}
},false)

JS监听video视频播放时间的更多相关文章

  1. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  2. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  3. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  4. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  5. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  6. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  7. 使用web3.js监听以太坊智能合约event

    传送门: 柏链项目学院 使用web3.js监听以太坊智能合约event   当我们在前端页面调用合约时发现有些数据不会立即返回,这时还需要再调用更新数据的函数.那么这样的方法使用起来非常不便,监听ev ...

  8. 知识点---js监听手机返回键,回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  9. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

随机推荐

  1. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

  2. [转]JDK1.0到12各版本新特性

    原文链接 JDK Version 1.0 1996-01-23 Oak(橡树) 初代版本,伟大的一个里程碑,但是是纯解释运行,使用外挂JIT,性能比较差,运行速度慢.JDK Version 1.1 1 ...

  3. Jmeter 如何发起一个Get请求

    举例平台:https://www.juhe.cn/docs/api/id/65 前提条件: 1)要在聚合网站注册实名认证才可以收到Key,用于Get请求的参数数值 2)Jmeter本地安装好 3.这是 ...

  4. 关于编译QT官方的MQTT库.

    先放一位博主的资料,参阅了其中资料,表示感谢: https://www.cnblogs.com/yexiaopeng/p/8542894.html ########################## ...

  5. 【规范建议】服务端接口返回字段类型与iOS端的解析

    一.本文档的写作目的 App需要跟产品.UI.后台.服务器.测试打交道,app的产出是其他端人员产出的综合体现.与其他端人员沟通就像是开发写接口,也就是面向接口编程的思想. 本文档讲解针对的是服务端返 ...

  6. sublime3常用环境配置

    如何设置侧边栏颜色 Ctrl+Shift+P -> install -> 搜索安装包SyncedSidebarBg,自动同步侧边栏底色为编辑窗口底色. 设置快捷键让html文件在浏览器窗口 ...

  7. MySQL之可视化软件

    MySQL可视化客户端 多款可视化界面,总有一款适合你 个人推荐使用MySQL官方提供的可视化工具. 下载链接 使用方法链接

  8. openstack搭建之旅(原创)

    1.什么是openstack是一个集中管理虚拟机的平台,整合了各种虚拟化的技术.虚拟机的具体创建交给具体的虚拟化技术实现,而Openstack是整合这些虚拟化技术,提供一个统一管理的视图,对虚拟机进行 ...

  9. 一 Spring概述

    知识点概要: 1 SpringIOC入门(XML).Spring的Bean管理.Spring属性注入 2 SpringIOC注解方式.Spring的AOP开发(XML) 3 Spring的AOP注解开 ...

  10. asp.net core配置下载文件

    asp.net core的wwwroot文件夹下默认时保存静态文件的地方,外面可以直接访问,但是如果是一些无法识别的后缀文件,如(.apk),会报错404 如果想要实现下载这些文件,在配置静态文件中间 ...