HTML5 video 事件应用示例
发布时间：2014-09-11 15:17:36 作者：佚名 
我要评论
我要评论使用 onloadedmetadata 事件获取视频的时间长度，使用 ontimeupdate 事件获取视频当前播放的进度，示例代码如下
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);
};
当视频载入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);
};
相关文章
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
这篇文章主要介绍了HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧问题,需要的朋友可以参考下2018-08-28- 这篇文章主要介绍了HTML5 video视频字幕的使用和制作,HTML5允许我们使用元素为视频指定字幕，需要的朋友可以参考下2018-05-03
- 这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-15
HTML5的Video标签有部分MP4无法播放的问题解析（多图）
这篇文章主要介绍了HTML5的Video标签有部分MP4无法播放的问题。通过代码展示了设置的过程，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-18- 这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法，文中介绍的非常详细，相信会对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来2017-05-07
- 使用HTML5时就应该考虑包括桌面以及移动端的浏览器兼容问题,特别是视频方面浏览器对解码的支持会有所不同,所以下面就来分享一个HTML5的video标签的浏览器兼容性增强方案分2016-05-19
- 这篇文章主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法,2016-02-22
HTML5 video播放器全屏(fullScreen)方法实例
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下2015-04-24- 这篇文章主要介绍了HTML5 Video标签的属性、方法和事件汇总介绍,本文讲解了2015-04-24
- HTML video 适用于HTML 5+，用于定义在线观看的视频流媒体，这里简单介绍下， 方便需要的朋友2014-02-03
最新评论