HTML5 video 事件
1、获取视频时间长度
当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度。
video.onloadedmetadata = function () {
var vLength = video.duration;
console.log(vLength);
}
2、当前视频的播放进度
当视频开始播放时,可以使用 ontimeupdate 事件获取视频当前播放的进度。当video对象的 currentTime 属性发生改变时触发 ontimeupdate 事件。currentTime 属性是浮点小数,可取到 12 位数的小数位数。
video.ontimeupdate = function () {
var vTime = video.currentTime;
console.log(vTime);
};
如需更多教程,请到 淘课学院 http://www.taokeschool.com/ 下载。

(欢迎关注角速度微信:jiaosud)
HTML5 video 事件的更多相关文章
- video事件
/** video播放器*/ * @ src: 指定所要嵌入视频.文档的URL. * @ poster: 视频预览图像 * @ autoplay: 视频自动播放 * @ loop: 循环播放 * @ ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
- Video事件、方法-- DOM
<video> 元素同样拥有方法.属性和事件.其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,<video ...
- 使用HTML5视频事件示例
<!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
随机推荐
- 使用PowerDesigner 15对现有数据库进行反向工程(图解教程)
1.启动PD 2.菜单:File->Reverse Engineer ->Database 出来New Physical Data Model对话框 点击“确定”按钮,弹出Database ...
- (转载)C# 编程 使用可空类型
转载出处为://https://msdn.microsoft.com/zh-cn/library/2cf62fcy(vs.90).aspx#Anchor_1 C#可以为 null 的类型可以表示基础类 ...
- 新鲜博客出炉www.pubwin2009.net
既然不快乐,又不喜欢这里,不如一路向西去大理.不是说不喜欢博客园,而是不喜欢现在工作的公司已经向公司递了辞职申请,然后突然有个想把,就是把公司里学到的东西做一个总结,全部写下来正好阿里云可以有免费半年 ...
- flask_socketio 使用范例
最近看flask有关的文档.想security, sqlalchemy, jwt等等相关的插件都没有问题.唯独这个socketio, 跟着官方文档一起蒙, 如果不看github上面的范例还真不好懂. ...
- C程序设计语言练习题1-4
练习1-4 编写一个程序打印摄氏温度转换为相应华氏温度的转换表. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为main的 ...
- Jetty开发(2)
部署web应用 配置了部署模块的Jetty服务器实例能够在webapps目录下热部署web应用.在webapps目录下标准的War包和jetty的配置文件能够被热部署进服务器需要符合下述规则: exa ...
- IOS NSURL基本操作-备
NSURL其实就是我们在浏览器上看到的网站地址,这不就是一个字符串么,为什么还要在写一个NSURL呢,主要是因为网站地址的字符串都比较复杂,包括很多请求参数,这样在请求过程中需要解析出来每个部门,所以 ...
- Gradle Android客户端程序打包(基于gradle 1.12版本验证通过)
一.前言 android客户端开发进入尾声,负责SEO同事突然发给我一个涉及45个发布渠道的噩耗,之前只发布自有渠道的工作方式(手动修改参数打包)已经不满足需求,所以引入最近比较流行的gradle打包 ...
- win10系统加载ahci驱动的操作方案(Win10之家)
win10系统使用的过程中很多用户会想要加载ahci驱动,但是大部分用户根本不知道怎么操作加载ahci驱动,这样的话很多用户会遇到一些问题,那如果使用的过程中想要加载ahci驱动的话我们应该怎么操作呢 ...
- HP的笔记本经常蓝屏崩溃 -------athr.sys
因为windows 7才新装不久,没有时间下载配置什么符号表,直接临时下载了WinDbg分析下Dump文件, Probably caused by : athr.sys ( athr+428a5 ) ...