更改音频/视频持续时间时,将发生HTML DOM ondurationchange事件。音频/视频的持续时间从“NaN”更改为加载时的音频/视频的实际持续时间。
音频/视频的加载过程中发生以下事件:
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
用法:
- 在HTML中:
<element ondurationchange="myScript">
- 在JavaScript中:
object.ondurationchange = function(){myScript};
- 在JavaScript中,使用addEventListener()方法:
object.addEventListener("durationchange", myScript);
范例1:使用HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4"
type="video/mp4">
</video>
<script>
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
输出:
范例2:使用JavaScript
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM ondurationchange Event</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4" type="video/mp4">
</video>
<script>
document.getElementById("durVideo").ondurationchange = function() {
GFGfun()
};
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
输出:
范例3:使用addEventListener()方法:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="mov_bbb.mp4" type="video/mp4">
</video>
<script>
document.getElementById(
"durVideo").addEventListener("durationchange", GFGfun);
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
输出:
支持的浏览器:下面列出了HTML DOM ondurationchange Event支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML onfocusin事件用法及代码示例
- HTML onbeforeunload事件用法及代码示例
- HTML onbeforeprint事件用法及代码示例
- HTML oncanplay事件用法及代码示例
- HTML onblur事件用法及代码示例
- HTML fullscreenchange事件用法及代码示例
- HTML onerror事件用法及代码示例
- HTML onfocusout事件用法及代码示例
- HTML onseeking事件用法及代码示例
- HTML onclick事件用法及代码示例
- HTML oncopy事件用法及代码示例
- HTML onresize事件用法及代码示例
- HTML onreset事件用法及代码示例
- HTML onscroll事件用法及代码示例
- HTML oncontextmenu事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM ondurationchange Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。