Want to set initial speed for video

I have a simple html page that plays a video, On the page there is a range control which will set the speed of the video between 0.1 to 1 with increments of 0.1. If you load the page and start the video it will playback at normal speed 1. When the page loads I want the range control to be set to 0.1 and that’s the speed I want the video to play when first played. Currently the only way to make the video initially play at any speed other than 1 is to set the speed with the range control then start the video. The code can be found here. https://codepen.io/jimeast/pen/KqNevb and you can view here http://jim-east.site/scratch/bird-speed.html

Hi,

You can do it like this:

<video id="myVideo" width="640" height="360" controls>
  <source src="http://jim-east.site/scratch/media/bird.webm" type="video/webm">
  <source src="http://jim-east.site/scratch/media/bird.mp4" type="video/mp4">  
 </video>
<form>
  <label>Playback Speed: <span id="speed">0.1</span> 
  <input type="range" id="range" min="0.1" max="1" step="0.1" value="0.1" /></label>
</form>

and simplify the JS a little:

function changeSpeed() {
  myVideo.playbackRate = range.value;
  dsply.innerHTML= range.value;
}

var dsply = document.getElementById("speed");
var myVideo = document.getElementById("myVideo");
var range = document.getElementById("range");
range.addEventListener("change", changeSpeed)

myVideo.playbackRate = 0.1;

That did it thanks!
I went on to make a couple of other changes this is what I have now.

function changeSpeed() {
myVideo.playbackRate = range.value;
display.innerHTML= " “+range.value+” ";
}

var display = document.getElementById(“speed”);
var myVideo = document.getElementById(“myVideo”);
var range = document.getElementById(“range”);
range.addEventListener(“change”, changeSpeed);

range.value=0.2;
changeSpeed();
myVideo.play();

Looks good :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.