javascript创建节点的事件绑定
javascript创建节点的事件绑定
timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计)。
现video标签需要直接在js中创建出来,
video = document.createElement( 'video' );
无法直接绑定timeupdate事件。
解决方法:
1.直接调用 ontimeupdate
video = document.createElement( 'video' );
video.ontimeupdate= function() { //实时更新播放进度条和时间
var currentPos = video.currentTime; //Get currenttime //当前时间
var maxduration = video.duration; //Get video duration //总时间
}
2.<video>标签和video对象互转
video = document.createElement( 'video' );
var videos = $(video);
video.on("timeupdate", function() { //实时更新播放进度条和时间
var currentPos = video[0].currentTime; //Get currenttime //当前时间
var maxduration = video[0].duration; //Get video duration //总时间
}
附:<video>标签和video对象的区别
将html中的<video>标签在控制台打印后结果为:

用javascript中 video = document.createElement( 'video' ); 创建一个video对象打印出来为:

video对象就等于<video>标签对象中的video[0]。
javascript创建节点的事件绑定的更多相关文章
- 第一百三十六节,JavaScript,封装库--事件绑定
JavaScript,封装库--事件绑定 在函数库添加两个函数 添加事件绑定函数 删除事件绑定函数 添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...
- javascript - 工作笔记 (事件绑定二)
在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下: JavaScript ...
- javascript - 工作笔记 (事件绑定)
背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...
- <a>的javascript+jquery编程实例之删除(定位节点与事件绑定)
相关jquery方法 parent(), remove() //上传图片 article_create.js article_edit.js function uploadAttachment() { ...
- javascript 创建节点和新增节点
createElement(tabName) 创建一个为tagName的新元素节点 ANode.appendChild(BNode)把B节点追加至A节点的末尾 insertBefore(ANode,B ...
- javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件
一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
随机推荐
- sublime 最近用的有点卡
index_files:false,
- spring 基本配置学习
1.bean的方式说明 作用: 用于配置对象让spring来创建的. 默认情况下它调用的是类中的无参构造函数.如果没有无参构造函数则不能创建成功. 属性: id:给对象在容器中提供一个唯一标识. ...
- Java工程师高手之路
JVM方面 JVM内存结构 堆.栈.方法区.直接内存.堆和栈区别 Java内存模型 内存可见性.重排序.顺序一致性.volatile.锁.final 垃圾回收 内存分配策略.垃圾收集器(G1).GC算 ...
- windows cmd下ssh连接免密码问题解决
windows 7 cmd下 ssh -T username@serverip 免密码连接成功 有的同学在windows下开发,并且在windows下安装了git for windows,这些资源已经 ...
- Maven编译错误记录:Some Enforcer rules have failed
一.错误信息 添加httpclient与httpcore依赖后编译Maven报错. 错误信息如下: Failed to execute goal org.apache.maven.plugins:ma ...
- appium 启动了2个端口,但是只有一台机器在跑的 问题解决 (还没试,记录在此)
appium启动了2个,端口分别设置为了4723 4725, 在测试类中也分别指定了设备和端口,用device来指定.然而每次都是运行一个设备. 后来添加了udid这个来指定才发现可以.deviceN ...
- Linux环境下配置maven环境
1.下载安装包并解压 安装包直接去apache官网下载:https://maven.apache.org/download.cgi 将安装包放在自己指定的目录:/home/software/apach ...
- flume-拦截器、channel选择器、sink组合sink处理器
1. Flume Interceptors Flume有能力修改/删除流程中的events.这是在拦截器(interceptor)的帮助下完成的.拦截器(Interceptors)是实现org.apa ...
- Java-Runoob-高级教程-实例-方法:03. Java 实例 – 汉诺塔算法-un
ylbtech-Java-Runoob-高级教程-实例-方法:03. Java 实例 – 汉诺塔算法 1.返回顶部 1. Java 实例 - 汉诺塔算法 Java 实例 汉诺塔(又称河内塔)问题是源 ...
- [UE4]非常实用的SizeBox控件
Desired:表示以期望的实际尺寸显示视图. SizeBox最好作为Child Widget的根节点.(如果SizeBox的父节点是Canvas Panel,SizeBox会变成可拉伸,ChildL ...