博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
好程序员web前端分享HTML5 video事件应用示例
阅读量:6253 次
发布时间:2019-06-22

本文共 515 字,大约阅读时间需要 1 分钟。

  好程序员web前端分享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);

  };

转载地址:http://sbfsa.baihongyu.com/

你可能感兴趣的文章
PHP 输出数据库中文是问号
查看>>
SameSite Cookie,防止 CSRF 攻击
查看>>
nginx+tomcat+redis完成session共享
查看>>
iOS开发拓展篇—UIDynamic(捕捉行为)
查看>>
Eclipse 编译java文件后出错 左树无红叉
查看>>
Laravel Debugbar
查看>>
CentOS系统程序包管理器【rpm、yum】
查看>>
谷歌浏览器跨域问题,命名行解决
查看>>
MyEclipse生成WAR包并在Tomcat下部署发布(转发)
查看>>
后台管理UI皮肤的选择
查看>>
inline-block 左边固定,右边自适应
查看>>
ubuntu 环境变量PATH的修改
查看>>
动态代理模式
查看>>
进度条,随机数---demo笔记【原创】
查看>>
Android -- 自定义View小Demo,绘制钟表时间(一)
查看>>
Download Free Oracle Reports Building Guide eBook
查看>>
固定标题列、标题头table
查看>>
Geeks - Check whether a given graph is Bipartite or not 二分图检查
查看>>
使用Ant构建简单项目
查看>>
求两个有序数组的中位数(4. Median of Two Sorted Arrays)
查看>>