RateChange事件 | HTML音频/视频

由 hcduguo

定义与用法

ratechange 事件在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式)。

该事件通过音频/视频(audio/video)的 playbackRate 属性调用，用于设置或返回音频/视频(audio/video)的播放速度。

语法格式

HTML 中：

<audio|video onratechange=”myScript“>

JavaScript 中：

audio|video.onratechange=function(){myScript};

使用 addEventListener() 方法:

audio|video.addEventListener(“ratechange”, myScript);

提示： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

示例代码

HTML 中：
<script>
    var vid = document.getElementById("myVideo");

    function setPlaySpeed() {
        vid.playbackRate = 0.3;
    }

    function myFunction() {
        alert("OnrateChange 事件触发 - 视频播放速度已改变");
    }
</script>

效果展示：


亲自试试

JavaScript 中：
<script>
    var vid = document.getElementById("myVideo");
    function setPlaySpeed() {
        vid.playbackRate = 0.3;
    }
    vid.onratechange = function() {
        myFunction()
    };
    function myFunction() {
        alert("OnrateChange 事件触发 - 视频播放速度已改变");
    }
</script>

效果展示：


亲自试试

使用 addEventListener() 方法:
<script>
    var vid = document.getElementById("myVideo");
    function setPlaySpeed() {
        vid.playbackRate = 0.3;
    }
    vid.addEventListener("ratechange", myFunction);
    function myFunction() {
        alert("onratechange 事件触发 - 视频播放速度已改变");
}
</script>

效果展示：


浏览器支持

事件
RateChangeYesYesYesYesYes

表格中的数字表示支持该事件的第一个浏览器的版本号。

技术细节

支持的 HTML 标签:<audio> 和 <video>
支持的 JavaScript 对象:Audio, Video

相关