• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
6.3 多媒体元素重要事件

6.3 多媒体元素重要事件

多媒体元素不仅有相关的属性、方法,而且该元素还有一系列完备的事件机制。在6.1节介绍多媒体元素的“networkState”与“error”属性时,分别触发了“progress”与“error”事件。除此之外,还有许多记录媒体文件播放过程的事件,如“playing”等,下面分别进行介绍。

6.3.1 媒体播放事件

在媒体文件被浏览请求加载、开始加载、开始播放、暂停播放、播放结束这一系列的流程中所触发的事件,称为“媒体播放事件”,也是多媒体元素的核心事件。通过对这些事件的跟踪,可以很方便地获取媒体文件在各个阶段的播放状态。

下面通过实例6-9介绍获取多媒体元素在播放事件中不同状态的过程。

6.3.2 timeupdate事件

在多媒体元素的众多事件中,timeupdate事件是一个十分重要的事件。在媒体文件播放过程中,如果播放位置发生变化,就会触发该事件。利用该事件,结合多媒体元素的“currentTime”与“duration”属性,可以动态显示媒体文件播放的当前时间与总量时间。

下面通过实例6-10介绍通过timeupdate事件动态显示媒体文件播放时间的过程。

6.3.3 其他事件

除了在6.3.1节与6.3.2节中介绍的事件外,多媒体元素还有很多实用的事件。例如.播放总长度改变时,将触发durationchange事件;音量大小改变或启动静音时,将触发volumechange事件等。多媒体元素的相关事件如表6-5所示。

在HTML5中,多媒体元素<video>与<audio>可以利用这些自带的事件,方便快捷地实现在原来HTML4以前版本中较为复杂的功能。

表6-5 多媒体元素的相关事件

本章小结

本章先从最基础的概念入手,介绍多媒体元素<video>与<audio>在页面中的使用方法;然后,通过理论与实例结合的方式,分别介绍了多媒体元素涉及的属性、方法及重要的事件,为读者熟练掌握视频与音频元素在HTML5中的应用打下扎实的基础。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101