分享HTML5 video事件应用示例

发布时间:2021-11-06 15:38:24 作者:iii
来源:亿速云 阅读:206

本篇内容主要讲解“分享HTML5 video事件应用示例”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分享HTML5 video事件应用示例”吧!

使用 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);

  };

到此,相信大家对“分享HTML5 video事件应用示例”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. HTML5中显示视频的示例
  2. HTML5中视频播放库video.js的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:MYSQL同步报错故障处理的常见情况有哪些

下一篇:让JavaScript变得更好的步骤有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》