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创建节点的事件绑定的更多相关文章

  1. 第一百三十六节,JavaScript,封装库--事件绑定

    JavaScript,封装库--事件绑定 在函数库添加两个函数 添加事件绑定函数 删除事件绑定函数 添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...

  2. javascript - 工作笔记 (事件绑定二)

    在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下:  JavaScript ...

  3. javascript - 工作笔记 (事件绑定)

    背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...

  4. <a>的javascript+jquery编程实例之删除(定位节点与事件绑定)

    相关jquery方法 parent(), remove() //上传图片 article_create.js article_edit.js function uploadAttachment() { ...

  5. javascript 创建节点和新增节点

    createElement(tabName) 创建一个为tagName的新元素节点 ANode.appendChild(BNode)把B节点追加至A节点的末尾 insertBefore(ANode,B ...

  6. javascript - 工作笔记 (事件四)

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  7. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  8. 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...

  9. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

随机推荐

  1. JVM异常之:栈溢出StackOverflowError

    在java虚拟机规范中,虚拟机栈和本地方法栈都会出现StackOverflowError和OutofMemoryError,程序计数器是java虚拟机中唯一一块不会产生error的内存区域. 一.St ...

  2. 描述wxWidgets中事件处理的类型转化

    wxWidgets是一个比较常用的UI界面库,我曾经试着使用wxWidgets写一个UI编辑工具,在此期间,学习了一些wxWidgets的知识.我对wxWidgets的绑定(Bind)比较好奇,想知道 ...

  3. Django简介及Django项目的创建详述

    Django简介 Django是一个开源的Web应用框架,由Python写成.但是,百度百科中讲它采用了MVC框架模式,其实这个解释不准确. 确切的讲,Django的模式是:路由控制+MTV模式.所谓 ...

  4. B-树和B+树的应用

    1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...

  5. typescript静态属性,静态方法,抽象类,多态

    /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...

  6. NT平台ADSL拨号连接密码恢复原理

    NT平台拨号连接密码恢复原理 创建时间:2004-11-08 更新时间:2004-11-12文章属性:原创文章提交:eyas (eyas_at_xfocus.org)NT平台拨号连接密码恢复原理Aut ...

  7. ElasticSearch索引

    简介 索引是具有相同结构的文档集合.在Elasticsearch中索引是个非常重要的内容,对Elasticsearch的大部分操作都是基于索引来完成的.同时索引可以类比关系型数据库Mysql中的数据库 ...

  8. HDFS操作及小文件合并

    小文件合并是针对文件上传到HDFS之前 这些文件夹里面都是小文件 参考代码 package com.gong.hadoop2; import java.io.IOException; import j ...

  9. 用T-SQL命令附加数据库时,出现如下异常信息

    用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft SQL Server ...

  10. canvas实现刮刮乐

    效果展示 源码下载