Event事件对象之媒体事件

最新推荐文章于 2024-01-12 11:32:28 发布

zzzzzzz周绍辉

最新推荐文章于 2024-01-12 11:32:28 发布

阅读量667

点赞数

分类专栏： javascript Event 事件对象文章标签：对象 JavaScript Event 事件

本文链接：https://blog.csdn.net/qq_32758013/article/details/76358507

版权

javascript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

对象

25 篇文章 0 订阅

订阅专栏

Event

10 篇文章 0 订阅

订阅专栏

1. onabort

在视频/音频（audio/video）终止加载时触发

该事件在多媒体数据终止加载时触发，而不是发生错误时触发。

提示

影响多媒体加载的事件有:
- onemptied
- onerror
- onstalled
- onsuspend
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

注意

Windows 7下的 Internet Explorer 11 浏览器不支持 onabort 事件。

ElementObject.onabort=function

2. oncanplay

在用户可以开始播放视频/音频（audio/video）时触发

该事件在多媒体数据终止加载时触发，而不是发生错误时触发。

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.oncanplay=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls oncanplay="myFunction()">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("可以开始播放视频");
}
</script>

</body> 
</html>

3. oncanplaythrough

在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.oncanplaythrough=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls oncanplaythrough="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("可以开始播放视频");
}
</script>

</body> 
</html>

4. ondurationchange

在视频/音频（audio/video）的时长发生变化时触发

提示

当视频/音频（audio/video）已经加载后，视频/音频（audio/video）的时长从 “NaN” 修改为正在的时长。
在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.ondurationchange=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls ondurationchange="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("可以开始播放视频");
}
</script>

</body> 
</html>

5. onemptied

当期播放列表为空时触发

6. onended

在视频/音频（audio/video）播放结束时触发

提示

不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onended=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onended="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频结束啦");
}
</script>

</body> 
</html>

7. onerror

在视频/音频（audio/video）数据加载期间发生错误时触发

提示

影响多媒体加载的事件有:
- onemptied
- onerror
- onstalled
- onsuspend
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

注意

Windows 7 下的 Internet Explorer 11 不支持 onerror 事件。

ElementObject.onerror=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onerror="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("出错啦");
}
</script>

</body> 
</html>

8. onloadeddata

在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onloadeddata=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onloadeddata="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("卡啦");
}
</script>

</body> 
</html>

9. onloadedmetadata

在指定视频/音频（audio/video）的元数据加载后触发

视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onloadedmetadata=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onloadedmetadata="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频元数据已加载");
}
</script>

</body> 
</html>

10. onloadstart

在浏览器开始寻找指定视频/音频（audio/video）触发

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onloadstart=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onloadstart="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("正在寻找视频");
}
</script>

</body> 
</html>

11. onpause

在视频/音频（audio/video）暂停时触发

提示

onplay 事件在视频/音频（audio/video）开始播放时触发。
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onpause=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onpause="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频暂停了");
}
</script>

</body> 
</html>

12. onplay

在视频/音频（audio/video）开始播放时触发。

提示

onpause 事件在视频/音频（audio/video）暂停播放时触发。
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onplay=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onplay="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频开始了");
}
</script>

</body> 
</html>

13. onplaying

在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发

提示

不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onplaying=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onplaying="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频开始了");
}
</script>

</body> 
</html>

14. onprogress

在浏览器下载指定的视频/音频（audio/video）时触发

提示

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onprogress=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onprogress="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频开始了");
}
</script>

</body> 
</html>

15. onratechange

在视频/音频（audio/video）的播放速度发生改变时触发

提示

该事件通过 Audio/Video 对象的 playbackRate属性调用, 该属性用于设置或返回视频/音频（audio/video）的当前播放速度。
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onratechange=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<p>本实例中，我们向 video 元素添加了 "onratechange" 事件。 playbackRate 属性用于设置视频的播放速度。</p>
<video id="myVideo" width="320" height="240" autoplay controls onratechange="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video><br>
<button onclick="setPlaySpeed()" type="button">设置视频播放速度为慢速</button>
<script>
// 获取 id="myVideo" 的 video 元素
var x = document.getElementById("myVideo");
// 设置当前视频的播放速度为 0.3 (慢速)
function setPlaySpeed() { 
    x.playbackRate = 0.3;
} 
// 当播放速度改变时弹出提示窗口
function myFunction() { 
    alert("视频的播放速度已改变");
}
</script> 

</body> 
</html>

16. onseeked

在用户重新定位视频/音频（audio/video）的播放位置后触发

提示

与 onseeked 事件相反的是 onseeking 事件。
使用 currentTime 可以设置或返回视频/音频（audio/video）播放的当前位置。
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onratechange=function

以下实例演示了 onseeking 事件和 onseeked 事件的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>以下实例演示了 onseeking 事件和 onseeked 事件的区别。</p>
<p> onseeking 事件在用户开始重新定位视频/音频（audio/video）的播放位置触发。</p>
<p> onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。</p>
<p>移动视频新的播放位置。 <strong>提示：</strong> 尝试按下鼠标设置视频的不同播放位置。</p>
<video controls onseeking="myFunction()" onseeked="mySecondFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>seeking 触发: <span id="demo"></span> 次。</p>
<p>seeked 触发: <span id="demo2"></span> 次。</p>
<script>
x = 0;
function myFunction() {
    document.getElementById("demo").innerHTML = x += 1;
}
y = 0;
function mySecondFunction() {
    document.getElementById("demo2").innerHTML = y += 1;
}
</script>

</body>
</html>

在用户重新定位视频播放位置后，可以使用 Video 对象的 currentTime 属性来显示当前的播放位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例中，我们向 video 元素添加了 "seeked" 事件。  currentTime 属性返回视频播放的当前位置。</p>
<p>移动视频新的播放位置。</p>
<video id="myVideo" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>播放位置: <span id="demo"></span></p>
<script>
// 获取 id="myVideo" 的 <video> 元素 
var x = document.getElementById("myVideo");
// 如果寻找完成，即向视频添加 seeked 事件，并执行响应的函数
x.addEventListener("seeked", myFunction);
function myFunction() {
    // 显示 id="demo" 的 p 元素中的视频当前播放位置
    document.getElementById("demo").innerHTML = x.currentTime;
}
</script>

</body>
</html>

17. onseeking

在用户开始重新定位视频/音频（audio/video）时触发

提示

与 onseeking 事件相反的是 onseeked 事件。
使用 currentTime 可以设置或返回视频/音频（audio/video）播放的当前位置。
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onseeking=function

以下实例演示了 onseeking 事件和 onseeked 事件的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>以下实例演示了 onseeking 事件和 onseeked 事件的区别。</p>
<p> onseeking 事件在用户开始重新定位视频/音频（audio/video）的播放位置触发。</p>
<p> onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。</p>
<p>移动视频新的播放位置。 <strong>提示：</strong> 尝试按下鼠标设置视频的不同播放位置。</p>
<video controls onseeking="myFunction()" onseeked="mySecondFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>seeking 触发: <span id="demo"></span> 次。</p>
<p>seeked 触发: <span id="demo2"></span> 次。</p>
<script>
x = 0;
function myFunction() {
    document.getElementById("demo").innerHTML = x += 1;
}
y = 0;
function mySecondFunction() {
    document.getElementById("demo2").innerHTML = y += 1;
}
</script>

</body>
</html>

在用户重新定位视频播放位置后，可以使用 Video 对象的 currentTime 属性来显示当前的播放位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例中，我们向 video 元素添加了 "seeked" 事件。  currentTime 属性返回视频播放的当前位置。</p>
<p>移动视频新的播放位置。</p>
<video id="myVideo" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>播放位置: <span id="demo"></span></p>
<script>
// 获取 id="myVideo" 的 <video> 元素 
var x = document.getElementById("myVideo");
// 如果寻找完成，即向视频添加 seeked 事件，并执行响应的函数
x.addEventListener("seeking", myFunction);
function myFunction() {
    // 显示 id="demo" 的 p 元素中的视频当前播放位置
    document.getElementById("demo").innerHTML = x.currentTime;
}
</script>

</body>
</html>

18. onstalled

在浏览器获取媒体数据，但媒体数据不可用时触发

提示

影响多媒体加载的事件有:
- onemptied
- onerror
- onstalled
- onsuspend
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onstalled=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onstalled="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频被破坏了");
}
</script>

</body> 
</html>

19. onsuspend

在浏览器读取媒体数据中止时触发

提示

影响多媒体加载的事件有:
- onemptied
- onerror
- onstalled
- onsuspend
不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onsuspend=function

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<video controls onsuspend="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("视频被破坏了");
}
</script>

</body> 
</html>

20. ontimeupdate

在视频/音频（audio/video）当前的播放位置发送改变时触发

提示

该事件通过以下方式调用：
- 播放视频/音频（audio/video）
- 重新定位视频/音频（audio/video）的播放位置。
不支持冒泡
该事件通常与 Video 对象的 currentTime 属性一起使用，该属性返回视频/音频（audio/video）的当前播放位置。

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.ontimeupdate =function

当用户开始播放音频，或者重新定位音频播放位置时执行 JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>该实例中我们向 audio 元素添加 "ontimeupdate" 事件。当用户开始播放音频，或者重新定位音频播放位置时，会执行显示当前播放位置的函数。</p>
<audio controls ontimeupdate="myFunction(this)">
    <source src="http://www.runoob.com/try/demo_source/horse.ogg" type="audio/ogg">
    <source src="http://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<p>当前播放位置:  <span id="demo"></span></p>
<script>
function myFunction(event) {
    //  currentTime 属性返回视频/音频（audio/video）当前播放位置
    document.getElementById("demo").innerHTML = event.currentTime;
}
</script>

</body>
</html>

使用 currentTime 属性设置当前的播放位置为 5 秒：

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>该实例中我们向 video 元素添加 "timeupdate" 事件。currentTime属性用户获取当前视频/音频的播放位置。</p>
<video id="myVideo" width="320" height="240" controls>
    <source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video><br>
<button onclick="setCurTime()" type="button">设置播放位置为 5 秒</button>
<p id="demo"></p>
<script>
// 获取 id="myVideo" 的 video 元素
var x = document.getElementById("myVideo");
// 向 video 元素添加 timeupdate 事件
x.addEventListener("timeupdate", getCurTime);
// 显示 id="demo" 的 p 元素中视频的当前播放位置
function getCurTime() { 
    document.getElementById("demo").innerHTML = "当前播放位置为 " + x.currentTime + " 秒。";
} 
// 设置播放当前位置为 5 秒
function setCurTime() { 
    x.currentTime = 5;
} 
</script> 

</body> 
</html>

21. onvolumechange

在视频/音频（audio/video）的音量发生改变时触发

提示

该事件通过以下方式调用：
- 增大或降低音量
- 媒体播放器静音或解除静音
不支持冒泡
使用 Audio 或 Video 对象的 volume 属性来设置或返回视频/音频（audio/video）的音量。

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.ontimeupdate =function

当音频的音量改变时执行 JavaScript:

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body> 

<p>该实例演示了如何向 audio 元素添加 "onvolumechange" 事件。</p>
<p>点击右边的音量按钮调整音量。</p>
<audio controls onvolumechange="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/horse.ogg" type="audio/ogg">
    <source src="http://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<script>
function myFunction() {
    alert("音量已改变!");
}
</script>

</body> 
</html>

使用 volume 属性设置音量：

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> 

<video id="myVideo" width="320" height="240" controls>
    <source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>点击以下按钮修改音量值，或者点击右边的音量按钮来调整音量。</p>
<button onclick="setHalfVolume()" type="button">设置音量为 0.2</button>
<button onclick="setFullVolume()" type="button"设置音量为 1.0</button>
<p id="demo"></p>
<script>
// 获取 id="myVideo" 的 video 元素
var x = document.getElementById("myVideo");
// 向视频添加 "volumechange" 事件
x.addEventListener("volumechange", getVolume);
// 显示 id="demo" 的 p 元素中视频的音量
function getVolume() { 
    document.getElementById("demo").innerHTML = "视频音量为: " + x.volume;
} 
// 设置音量为 0.2
function setHalfVolume() { 
    x.volume = 0.2;
} 

//  设置音量为 1.0 (最大)
function setFullVolume() { 
    x.volume = 1.0;
} 
</script> 

</body> 
</html>

22. onwaiting

在视频由于要播放下一帧而需要缓冲时触发

该事件可用于元素，但通常应用在视频（元素）播放中。

提示

不支持冒泡

支持的HTML标签

<audio>, <video>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onwaiting =function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例演示了如何向 video 元素添加 "onwaiting" 事件。</p>
<p>播放视频。</p>
<video controls onwaiting="myFunction()">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<script>
function myFunction() {
    alert("稍等! 我需要缓冲下一帧");
}
</script>

</body>
</html>

zzzzzzz周绍辉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Event事件对象之媒体事件

1. onabort在视频/音频（audio/video）终止加载时触发该事件在多媒体数据终止加载时触发，而不是发生错误时触发。提示影响多媒体加载的事件有:onemptiedonerroronstalledonsuspend不支持冒泡支持的HTML标签<audio>, <video>浏览器支持 google IE firefox safari opera true
复制链接

扫一扫

专栏目录