HTML 音频/视频 DOM timeupdate 事件

返回上一级

HTML timeupdate 事件在音频/视频(音频/视频)的播放位置发生改变时触发

该事件可以在以下情况被调用:

  1. 播放音频/视频(音频/视频)
  2. 移动音频/视频(音频/视频)播放位置

timeupdate 事件通常与 音频/视频 对象的 currentTime 属性一起使用,该属性返回音频/视频(音频/视频)的播放位置 ( 以秒计 )

语法

HTML 中

<audio|videoontimeupdate="myScript">

运行范例 »

JavaScript 中

audio|video.ontimeupdate=function(){ myScript };

运行范例 »

JavaScript 中, 使用 addEventListener() 方法

audio|video.addEventListener("timeupdate", myScript ); 

运行范例 »

Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号

Yes 9.0 Yes Yes Yes

支持的 HTML 标签

<audio> 和 <video>

支持的 JavaScript 对象

Audio, Video

范例

当视频播放位置已经改变,显示视频当前播放位置 ( 一秒计 )

// 获取 id="myVideo"的 <video> 元素

var vid =   document.getElementById("myVideo");

//为 <video> 元素添加 ontimeupdate 事件,如果当前播放位置改变则执行函数
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
    // 显示 id="demo" 的 <p> 元素中视频的播放位置     
    document.getElementById("demo").innerHTML = vid.currentTime;
}

运行范例 »

范例 2

当音频的播放位置改变时,显示当前音频的播放位置 ( 以秒计 )

// 获取 id="myVideo" 的 <audio> 元素
var aud = document.getElementById("myVideo");

// 为 <audio> 元素添加 ontimeupdate 事件,并在播放位置改变时执行函数
aud.ontimeupdate = function() {myFunction()};

function myFunction() {
    // 显示 id="demo" 的 <p> 元素中音频的播放位置    
    document.getElementById("demo").innerHTML = aud.currentTime;
}

运行范例 »

范例 3

使用 currentTime 属性设置播放位置为 5 秒

document.getElementById("myVideo").currentTime = 5;

运行范例 »

返回上一级

HTML 全部标签

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.