HTML onwaiting 事件

简介

onwaiting HTML5 事件媒体播放下一帧而需要缓冲时触发。

兼容性

所有主流浏览器都支持。

语法

<element onwaiting="script">

支持的元素

<audio>、<video>

实例

播放控件设置了播放时才开始缓存,此时可以触发一次 onwaiting 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmedia</title>
    <script>
        function printEvent(name) {
            document.getElementById("result").innerHTML +=  name + " 事件执行<br>";
        }
        function printErrorEvent(name) {
            document.getElementById("result-error").innerHTML +=  name + " 事件执行<br>";
        }
        function cleanlog() {
            document.getElementById("result").innerHTML = "";
        }
        function setPlaybackRate(rate) {
            var player = document.getElementById("myaudio");
            player.playbackRate = rate;
        }
    </script>
</head>
<body>
<h4> audio 元素</h4>
<audio controls="controls" id="myaudio" preload="none"
       onabort="printEvent('audio onabort')"
       onloadedmetadata="printEvent('audio onloadedmetadata')"
       onloadeddata="printEvent('audioonloadeddata')"
       onloadstart="printEvent('audio onloadstart')"
       onprogress="printEvent('audio onprogress')"
       oncanplay="printEvent('audio oncanplay')"
       onratechange="printEvent('audio onratechange')"
       onpause="printEvent('audio onpause')"
       onplay="printEvent('audio onplay')"
       onseeked="printEvent('audio onseeked')"
       onseeking="printEvent('audio onseeking')"
       onplaying="printEvent('audio onplaying')"
       oncanplaythrough="printEvent('audio oncanplaythrough')"
       ondurationchange="printEvent('audio ondurationchange')"
       onsuspend="printEvent('audio onsuspend')"
       onended="printEvent('audio onended')"
       ontimeupdate="printEvent('audio ontimeupdate')"
       onvolumechange="printEvent('audio onvolumechange')"
       onwaiting="printEvent('audio onwaiting')"
       onerror="printErrorEvent('audio onerror')"
       onstalled="printErrorEvent('audio onstalled')"
       onemptied="printErrorEvent('audio onemptied')">
    <source src="https://s.tinyx.cc/audios/ring.wav" type="audio/wav">
    <source src="https://s.tinyx.cc/audios/ring.ogg" type="audio/ogg">
    此浏览器不支持 audio 标签
</audio>
<button onclick="setPlaybackRate(0.3)">降低音频速度</button>
<button onclick="setPlaybackRate(1)">恢复音频速度</button>
<button onclick="cleanlog()">清空日志</button>
<h4> video 元素</h4>
<video id="video1" width="420px" preload="none"
       onabort="printEvent('video onabort')"
       onloadedmetadata="printEvent('video onloadedmetadata')"
       onloadeddata="printEvent('video onloadeddata')"
       onloadstart="printEvent('video onloadstart')"
       onprogress="printEvent('video onprogress')"
       oncanplay="printEvent('video oncanplay')"
       onratechange="printEvent('video onratechange')"
       onpause="printEvent('video onpause')"
       onplay="printEvent('video onplay')"
       onseeked="printEvent('video onseeked')"
       onseeking="printEvent('video onseeking')"
       onplaying="printEvent('video onplaying')"
       oncanplaythrough="printEvent('video oncanplaythrough')"
       ondurationchange="printEvent('video ondurationchange')"
       onsuspend="printEvent('video onsuspend')"
       onended="printEvent('video onended')"
       ontimeupdate="printEvent('video ontimeupdate')"
       onvolumechange="printEvent('video onvolumechange')"
       onwaiting="printEvent('video onwaiting')"
       onerror="printErrorEvent('video onerror')"
       onstalled="printErrorEvent('video onstalled')"
       onemptied="printErrorEvent('video onemptied')"
       controls="controls">
    <source src="https://s.tinyx.cc/videos/video.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
</video>
<p id="result" style="color: green;"></p>
<p id="result-error" style="color: red"></p>
</body>
</html>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注