广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >分享HTML5 video事件应用示例
  • 165
分享到

分享HTML5 video事件应用示例

2024-04-02 19:04:59 165人浏览 泡泡鱼
摘要

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

本篇内容主要讲解“分享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事件应用示例”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 分享HTML5 video事件应用示例

本文链接: https://www.lsjlt.com/news/85561.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分享HTML5 video事件应用示例
    本篇内容主要讲解“分享HTML5 video事件应用示例”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分享HTML5 video事件应用示例”吧!使用 onl...
    99+
    2022-10-19
  • HTML5的video事件怎么应用
    这篇文章主要介绍“HTML5的video事件怎么应用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5的video事件怎么应用”文章能帮助大家解决问题。 使...
    99+
    2022-10-19
  • HTML5的Audio/Video标签,属性,方法,事件实例分析
    本文小编为大家详细介绍“HTML5的Audio/Video标签,属性,方法,事件实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5的Audio/Video标签,属性,方法,事件实例分析”文章...
    99+
    2022-10-19
  • HTML5触摸事件演化tap事件的示例分析
    HTML5触摸事件演化tap事件介绍,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。触摸事件是移动浏览器特有的HTML5事件,虽然click事件...
    99+
    2022-10-19
  • HTML5服务器推送事件的示例分析
    这篇文章给大家分享的是有关HTML5服务器推送事件的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。服务器推送事件(Server-sent Events)是基于WebSoc...
    99+
    2022-10-19
  • HTML5应用之文件上传的示例分析
    这篇文章主要介绍HTML5应用之文件上传的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用HTML5上传文件在HTML5标准中,XMLHttpRequest对象被重新定义,被...
    99+
    2022-10-19
  • HTML5 Canvas鼠标与键盘事件demo的示例分析
    本篇文章给大家分享的是有关HTML5 Canvas鼠标与键盘事件demo的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 ...
    99+
    2022-10-19
  • angularjs中响应回车事件的示例分析
    小编给大家分享一下angularjs中响应回车事件的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hell...
    99+
    2022-10-19
  • html5之sse服务器发送事件EventSource的示例分析
    这篇文章主要介绍html5之sse服务器发送事件EventSource的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Server-Sent Events使用Server-S...
    99+
    2022-10-19
  • JavaScript键盘事件响应顺序的示例分析
    这篇文章主要为大家展示了“JavaScript键盘事件响应顺序的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript键盘事件响应顺序的示例...
    99+
    2022-10-19
  • html5 datalist选中option选项后触发事件的示例分析
    这篇文章将为大家详细讲解有关html5 datalist选中option选项后触发事件的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用input + datalist 实现自动补全功能,其中d...
    99+
    2023-06-09
  • Web移动应用 HTML5 CSS和JavaScript的示例分析
    Web移动应用 HTML5 CSS和JavaScript的示例分析,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。移动设备的广泛...
    99+
    2022-10-19
  • 20个HTML5应用程序示例分别有哪些
    本篇文章为大家展示了20个HTML5应用程序示例分别有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1-HTML5 Canvas ...
    99+
    2022-10-19
  • js移动端事件基础及常用事件库的示例分析
    这篇文章主要为大家展示了“js移动端事件基础及常用事件库的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js移动端事件基础及常用事件库的示例分析”这篇文...
    99+
    2022-10-19
  • vue2.0+vuex+localStorage代办事项应用的示例分析
    这篇文章将为大家详细讲解有关vue2.0+vuex+localStorage代办事项应用的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。代码预览vuex官方文档 ...
    99+
    2022-10-19
  • mysql事件之修改事件、禁用事件、启用事件、事件重命名及数据库事件迁移操作的示例分析
    这篇文章主要为大家展示了“mysql事件之修改事件、禁用事件、启用事件、事件重命名及数据库事件迁移操作的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“m...
    99+
    2022-10-18
  • Android编程基础之简单Button事件响应综合提示控件Toast应用示例
    本文实例讲述了Android简单Button事件响应综合提示控件Toast应用。分享给大家供大家参考,具体如下: 前面讲述了在main.xml里定义了Button对象,这里我们...
    99+
    2022-06-06
    button 示例 toast Android
  • html5中音频与视频监听器应用的示例分析
    这篇文章将为大家详细讲解有关html5中音频与视频监听器应用的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 一 介绍1、<au...
    99+
    2022-10-19
  • C#操作文本文件应用的示例分析
    本篇文章给大家分享的是有关C#操作文本文件应用的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。C#操作文本文件应用实例:using System; ...
    99+
    2023-06-18
  • iOS12系统应用发送邮件中附件的示例分析
    这篇文章主要介绍iOS12系统应用发送邮件中附件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!iOS12系统应用发送邮件中的附件iOS12系统应用发送邮件中的附件,如果发送邮件的内容很多,或者包含文档、图片...
    99+
    2023-06-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作