Event事件對象之媒體事件

原創 zzzzzzz周绍辉 2020-06-21 06:46

1. onabort

在視頻/音頻（audio/video）終止加載時觸發

該事件在多媒體數據終止加載時觸發，而不是發生錯誤時觸發。

提示

支持的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）時觸發

該事件在多媒體數據終止加載時觸發，而不是發生錯誤時觸發。

提示

支持的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）可以正常播放且無需停頓和緩衝時觸發

提示

支持的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）的時長髮生變化時觸發

提示

支持的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）數據加載期間發生錯誤時觸發

提示

支持的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）的下一幀時觸發

提示

支持的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）的元數據包含: 時長，尺寸大小（視頻），文本軌道。

提示

支持的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）觸發

提示

支持的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）時觸發

提示

支持的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

在瀏覽器獲取媒體數據，但媒體數據不可用時觸發

提示

支持的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

在瀏覽器讀取媒體數據中止時觸發

提示

支持的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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Puppeteer實戰案例：自動化抓取社交媒體上的媒體資源

在當今數字化時代，社交媒體已成爲人們獲取信息、分享生活和進行商業推廣的重要平臺。隨着社交媒體內容的爆炸性增長，自動化抓取社交媒體上的媒體資源變得尤爲重要。本文將介紹如何使用Puppeteer這一強大的自動化工具來實現這一目標。 1. P

原創 2024-06-08 00:06:14

交互式流程圖組件DHTMLX Diagram v6.0 - 擁有更靈活的高度可定製功能

DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖，通過自動佈局和實時編輯器，它可以更容易地將複雜數據可視化到一個整潔的層次結構中。 DHTMLX Diagram v6.0版本發佈，帶來了衆多令人興奮的新功能和改進，

原創 2024-06-04 12:32:11

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:28

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:12

界面控件DevExtreme v23.2 - 可訪問性、性能增強

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-06-03 12:21:39

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合*使您可以利用現代Web開發堆棧*包括React*Angular*ASP.NET Core*jQuery*Knockout等*構建交互式的Web應用程序。從Ang

原創 2024-05-31 12:32:20

網頁爬蟲開發：使用Scala和PhantomJS訪問知乎

引言 隨着大數據時代的到來，網頁爬蟲作爲一種高效的數據收集工具，被廣泛應用於互聯網數據抓取和信息抽取。而知乎是一個知識分享平臺，擁有大量的用戶生成內容。通過爬蟲獲取知乎數據，企業和研究人員可以進行深入的數據分析和市場研究，瞭解用戶的需求

原創 2024-05-31 00:11:23

「盤點」JetBrains IDEs v2024.1新功能一覽，更智能的開發體驗！

JetBrains IDEs日前正式發佈了v2024.1版本，此版本中最大的亮點就是帶來了AI賦能的全行代碼補全，同時在最新的IDEs中重做了終端、擁有更強大的代碼編輯和導航功能、更智能的代碼分析和提示、更優化的性能、更豐富的插件和集成等。

原創 2024-05-29 12:18:44

Objective-C爬蟲：實現動態網頁內容的抓取

在當今的互聯網時代，數據的獲取和分析變得日益重要。無論是進行市場研究、用戶行爲分析還是產品開發，獲取大量數據都是不可或缺的一環。然而，很多有價值的信息都隱藏在動態加載的網頁中，這些網頁通過JavaScript動態生成內容，傳統的爬蟲技術

原創 2024-05-29 00:07:51

音頻鏈接抓取技術在Lua中的實現

前言 隨着數字音樂的普及，越來越多的用戶選擇在線音樂平臺來享受音樂。網易雲音樂作爲國內領先的音樂服務平臺，不僅提供了豐富的音樂資源，還擁有獨特的社交屬性，吸引了大量的用戶。在衆多的音樂服務中，音頻鏈接的抓取技術成爲了一個重要的需求。無論

原創 2024-05-28 00:07:25

今天！通義靈碼在北京、成都、杭州三城開講啦

通義靈碼自從入職阿里雲以來備受行業關注。5 月 24 日，阿里雲工程師奔赴北京、成都、杭州三城，向企業和開發者介紹並演示通義靈碼，通義靈碼依然是大家話題的C位，並收穫了衆多粉絲。 @杭州 阿里雲金融創新峯會 今天，2024 阿里雲金融創新峯

原創 2024-05-27 21:13:46

響應式UI組件DevExtreme中文教程 - 工具欄的自適應模式

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-27 12:19:43

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（三）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-05-27 12:19:39

由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！

本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1

Zabbix中國 2024-05-24 22:33:53

H5按需加載探索——Webpack模塊化示例

1-前言 瀏覽器早已已經全面支持ESM即ES模塊化，可以實現前端代碼的模塊化，以及按需加載/下載，甚至還提供了一個非常貼心的ES特性：importmap 通過importmap，可以代碼零修改實現按需加載： 1.1 在html中聲明模塊的

原創 2024-05-22 11:10:06