javascript - HTML5 视频播放速率

Question

我正在尝试使用下拉窗口来更改视频播放的速率。

我在此处添加了标记选项:

        <select id="playBackRateDrop">
            <option>0.5</option>
            <option selected= "selected">1</option>
            <option>1.5</option>
            <option>2</option>
        </select>

在此处向 getElementById 添加了一个变量 var playRate= document.getElementById("playBackRateDrop");

向下拉窗口添加了一个actionListener playRate.addEventListener("select", setPlaySpeed);

并在这里创建了一个函数

function setPlaySpeed() {
        var rate= playRate.options[selectedIndex].value;
        video.playbackRate= rate;
    }

由于某种原因，从下拉列表中选择一个选项不会改变任何内容，视频会正常播放。

Answer 1

您应该监听事件 change不选择:

playRate.addEventListener("change", setPlaySpeed);

此外，您应该使用 playRate.value 来获取选择的值。然后使用parseFloat获取返回字符串的浮点值。这会产生以下函数:

function setPlaySpeed() {
    var rate= playRate.value;
    video.playbackRate= parseFloat(rate);
}