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之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
随机推荐
- JS和AS交互
这个话题在网上应该说很好找,有很多这方面的资料.比者也看过一些,不过大部分都是AS2与JS进行交互.很少提到AS3,即使有,也让人感觉浅尝辄止.很多东西并没有介绍的太清楚.所有笔者萌生了写这样一篇教程 ...
- [LeedCode]279. 完全平方数
题目描述: 给定正整数 n,找到若干个完全平方数(比如 , , , , ...)使得它们的和等于 n.你需要让组成和的完全平方数的个数最少. 示例 : 输入: n = 输出: 解释: = + + . ...
- 【Guava 】Collections – Join and Split
Convert Collections to String Using Joiner Convert List into String Using Joiner @Test public void w ...
- JS之滚动条效果
滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条 首先要实现的是上 ...
- NIO文件锁FileLock
目录 <linux文件锁flock> <NIO文件锁FileLock> <java程序怎么在一个电脑上只启动一次,只开一个进程> 文件锁可以是shared(共享锁) ...
- NodeJs使用Express框架开发时的快速调试方法
习惯了php开发,可以直接使用echo或者var_dump()将想要查看的变量结果输出到网页查看,非常的方便.但是使用express开发时,每次修改文件后,都需要使用npm start命令重启服务,然 ...
- 【ZZ】堆和堆的应用:堆排序和优先队列
堆和堆的应用:堆排序和优先队列 https://mp.weixin.qq.com/s/dM8IHEN95IvzQaUKH5zVXw 堆和堆的应用:堆排序和优先队列 2018-02-27 算法与数据结构 ...
- [SQL]SQL中EXISTS的用法
比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(SELECT OrderID FR ...
- ubuntu18.04 LTS解决/boot空间不足
1. 查看磁盘占用情况 df -h Filesystem Size Used Avail Use% Mounted on/dev/nvme0n1p5 181M 141M 27M ...
- sqoop1.4.7 导入数据到hive2.3.4 jackson版本问题
今天用sqoop往hive导入数据的时候,执行报错,错误信息为: java.lang.NoSuchMethodError:com.fasterxml.jackson.databind.ObjectMa ...