HTML5 视频播放速率 [英] HTML5 Video Playback Rate

问题描述

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

I'm trying to use a drop down window to be able to change the rate of which a video is playing at.

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

I've added the options on markup here:

        <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");

Added a variable to getElementById here var playRate= document.getElementById("playBackRateDrop");

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

Added a actionListener to the dropdown window playRate.addEventListener("select", setPlaySpeed);

并在这里创建了一个函数

And created a function here

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

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

For some reason, the selecting an option from the dropdown doesn't change anything, the video plays as normal.

推荐答案

你应该监听事件 change 不是 select:

playRate.addEventListener("change", setPlaySpeed);

此外，您应该使用 playRate.value 来获取选择的值.然后使用 parseFloat 获取返回字符串的浮点值.这导致以下功能:

Furthermore, you should use playRate.value to get the value of the select. Then use parseFloat to get the float value of the returned string. This results in the following function:

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

这篇关于HTML5 视频播放速率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！