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之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
随机推荐
- Linux LVM 简单操作
查看当前磁盘分区情况fdisk -l 磁盘分区fdisk /dev/sdb# 可能用到的Type :# 8e Linux LVM# fd Linux raid auto 创建PVpvcreate /d ...
- 【Https】Spring RestTemplete支持Https安全请求
实现步骤 Step1: 自定义ClientHttpRequestFactory package com.example.demo.https; import org.springframework.h ...
- 小程序支持打开APP
根据微信的官方文档,小程序支持打开APP,专门研究了下这个API有什么,官方文档地址如下 https://mp.weixin.qq.com/debug/wxadoc/dev/component/but ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- java打印实心10*10正方形, 空心10*10正方形
public class PrintSquare { public static void main(String[] args) { printSolidSquare(10); System.out ...
- typescript接口扩展、接口的继承
//接口扩展:接口可以继承接口 // interface Animal{ // eat():void; // } // interface Person extends Animal{ // work ...
- python容器数据类型的特色
python容器数据类型的特色 list: 可变数据类型(不可哈希), 有序, 可索引获取, 可修改 Dict: 可变数据类型(不可哈希), 3.6版本有序, 可通 ...
- U3D学习002——编辑器使用
shift键+鼠标点击中间方块,实现视角切换回初始化透视模式 Unity GameObject菜单栏下有3个和View(此View指显示Scene面板虚拟相机(后面简称Scene Camera)的视角 ...
- Unity打包Android平台AssetBundle脚本
注意,BuildTarget tagetPlatform参数为BuildTarget.Android using UnityEngine; using UnityEditor; public clas ...
- flume用场景及架构原理
Flume是什么 1.flume可以将采集到的数据存储到HDFS上,也可以放在Hbase上. 2.flume就是一个中间插件,他的作用就是屏蔽数据源和数据存储系统的差异.可以在不同的数据源采集数据,因 ...