bsaid97 bsaid97 - 18 days ago 7
Javascript Question

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>


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.

Answer

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