HTML5 Video Playback Rate

Question

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>

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

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.

Changing the dropdown selection seems to do nothing – bsaid97 Nov 15 '16 at 19:03 — bsaid97, Nov 15 '16 at 19:03

Nick · Accepted Answer · 2016-11-15T19:09:50.813

1

You should listen for the event change not select:

playRate.addEventListener("change", setPlaySpeed);

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

edited Nov 15 '16 at 19:09

answered Nov 15 '16 at 19:02

Nick

597
4
15

Didn't solve it :/ I thought that was the problem too and have been trying different events but nothing worked. Could I be reading the dropdown values incorrectly? – bsaid97 Nov 15 '16 at 19:05
That should do it. – Nick Nov 15 '16 at 19:10
Thanks for your help mate! – bsaid97 Nov 15 '16 at 19:12

HTML5 Video Playback Rate

1 Answers1

Linked