1. onabort
在視頻/音頻(audio/video)終止加載時觸發
該事件在多媒體數據終止加載時觸發,而不是發生錯誤時觸發。
提示
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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>
瀏覽器支持
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)數據加載期間發生錯誤時觸發
提示
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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)加載過程中,事件的觸發順序如下:
- 不支持冒泡
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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
在瀏覽器獲取媒體數據,但媒體數據不可用時觸發
提示
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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
在瀏覽器讀取媒體數據中止時觸發
提示
支持的HTML標籤
<audio>, <video>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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>
瀏覽器支持
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>